The Modern Hacker's Guide to the Universe

a practical approach to surviving a hackathon.

In this talk, we'll create a fully-functional MEAN app, and deploy it to the cloud in less than 30 minutes, using modern web technologies, and cloud services.

Transcript

1. THE MODERN HACKER’S GUIDE TO THE UNIVERSE {'a practical approach': 'to surviving a #hackathon ;)'} Volkan Özçelik me@volkan.io ! 02/07/2014 #hack4good 0.5 http://hack4good.io
2. about:me • Volkan Özçelik • Mobile Front End Engineer @ JiveSoftware.com • twitter: @linkibol • GitHub: https://github.com/v0lkan
3. Other Places to Find Me • http://volkan.io/ • http://linkedin.com/in/volkanozcelik • http://speakerdeck.com/volkan/ • <shameless-plug rel=“Wanna Ace That Job Interview?”>
 http://o2js.com/interview-questions
 </shameless-plug>
4. – E.F. Schumacher “Any intelligent fool can make things 
 bigger and more complex... 
 It takes a touch of genius - and a lot of courage 
 to move in the opposite direction.” WHEN IN DOUBT… KISS
5. WE WILL… • Create a MEAN web app; • And deploy it to the cloud; • in less than 30 minutes!
6. USING… • Yeoman (http://yeoman.io) • Grunt (http://gruntjs.com) • Bower (http://bower.io) • Angular.js (http://angularjs.org) • Sass (http://sass-lang.com/) • Compass (http://compass-style.org/) • LiveReload (http://livereload.com/) • Node.JS (http://nodejs.org) • MongoDB (http://mongodb.org) • Heroku (http://heroku.com) • MongoLab (https://mongolab.com/welcome/)
7. PREREQUISITES • Install git (http://git-scm.com/book/en/Getting-Started-Installing-Git) • Install Node.JS (http://nodejs.org/) • Install MongoDB (http://www.mongodb.org/) • Install Ruby (https://www.ruby-lang.org/en/) • Install Sass (gem install sass;) • Install Compass (gem install compass;)
8. YEOMAN at your service
9. YEOMAN • mkdir ~/PROJECTS/hack4good05; • cd ~/PROJECTS/hack4good05; • git init; • npm install -g yo; • npm install -g generator-angular-fullstack;
10. ANGULAR-FULLSTACK yo angular-fullstack;
11. ANGULAR-FULLSTACK
12. ANGULAR-FULLSTACK
13. INITIAL LAUNCH • mongod; • grunt serve;
14. INITIAL LAUNCH
15. IN LESS THAN FIVE MINUTES… • We Have Created A Fully Functional Web App: • Node.JS / Express.js Server; • Angular.JS Client; • SASS Integration; • MongoDB Data Store; • LiveReload Integration.
16. NOT BAD
17. LET’S MODIFY IT!
18. LET’S MODIFY IT!
19. LET’S MODIFY IT!
20. LET’S MODIFY IT!
21. LET’S MODIFY IT!
22. LET’S MODIFY IT!
23. LET’S MODIFY IT!
24. THE RESULT
25. TO THE CLOUD… and beyond!
26. TO THE CLOUD… • Signup to https://mongolab.com/ (for free) • Create a blank database • That’s it!
27. TO THE CLOUD…
28. TO THE CLOUD…
29. TO THE CLOUD… • Signup to https://www.heroku.com/ (for free) • Install the Heroku Toolbelt • That’s It! more info: https://devcenter.heroku.com/articles/quickstart
30. TO THE CLOUD… • grunt build; • yo angular-fullstack:deploy heroku; • cd dist; • git push heroku master;
31. TO THE CLOUD… • grunt build; • yo angular-fullstack:deploy heroku; • cd dist; • foreman start; • git push heroku master;
32. TO THE CLOUD…
33. TIPS FOR YOUR SUCCESS • DONE IS BETTER THAN PERFECT! • Time is Candy (Don’t Re-Invent the Wheel) • Know Your Tools (Show Love to Yeoman) • Take Frequent Breaks (Enjoy the Event!) • Have Fun!
34. THANK YOU! now go and hack the world!