Browse the official art installations at the 2015 Burning Man festival. You can discover new pieces, read their meaning, visit the artist's website and donate to show support. For the more adventurous: create a 'tour guide' to save the pieces you hope to find this year!
2015 Burning Man Art Guide & Tour Generator
This was a pet project for learning new technologies. I've listed all below and bolded those which were either new or unfamiliar:
Frontend:
- HTML + CSS
- JavaScript
- jQuery + Ajax
- React
Backend:
- Ruby
- Postgresql
- Rails
Testing and Scraping:
- Capybara
- Nokogiri
-
Nokogiri scrapes the art at BurningMan.org
-
Ruby uses four models:
- Collection (the scraped art)
- Installation (an individual art installation)
- Tour (a user-generated tour)
- Tour_Installation (a join table between the many-to-many Tour <-> Installation relationship)
-
The DB is supported by Postgresql
-
Rails supports the routing and controllers
-
JavaScript supports the one-page nature
-
React handles HTML structure and DOM interaction
I chose React because I liked that it was modular and not too large of an undertaking. I also like that it combines most of the front-end behavior into single components, as opposed to having code spread across multiple files (html, css, js). I chose Nokogiri because I think scraping is really powerful in the absence of an API.
Beyond learning these technologies in general, some specific things I learned included:
- React: passing props and state between a multi-branched tree
- React: using OOJS
- React: using Ajax
- Ajax: using Ajax in a new way, accompanied with JS promises
I also enjoyed learning "how it all comes together." How to use multiple technologies (and languages) in a real-world app.
The challenges I faced had to do with connecting the front-end to the back-end. I had to go from Ruby to JavaScript to Ruby and back. And via asynchronous requests, which I'm comfortable with but was using a new technique with. I'm also somewhat new to JavaScript in general, so keeping everything object-oriented was a fun challenge as well.
I'd use React again. It requires a little more setup than just doing things with jQuery, so it might make less sense for exceptionally-light projects. Beyond that I think it's great.
This project is open-source, so please feel free to clone, tinker, refactor, break and rebuild, submit pull requests, issues or feature ideas. Feel free to get in touch on Twitter!
To setup locally:
- fork + clone
- bundle install
- bundle exec rake db:create db:migrate db:seed
- bundle exec rails s
- browser -> localhost:3000
Schema:
General app structure:
React tree:
Homepage wireframe:
Docs
http://facebook.github.io/react/docs/thinking-in-react.html
https://facebook.github.io/react/docs/why-react.html
Gems
https://github.com/reactjs/react-rails#component-generator
Tutorials
http://ryanlanciaux.github.io/blog/2014/05/26/trying-out-reactjs-with-the-marvel-api/
https://egghead.io/series/build-your-first-react-js-application
General
https://github.com/enaqx/awesome-react
https://www.youtube.com/watch?v=VsVwMrEuaoY
https://www.youtube.com/watch?v=kTSsZrub5iE
https://www.codementor.io/reactjs/tutorial/react-vs-angularjs#/
http://www.quora.com/Is-React-killing-Angular
http://www.funnyant.com/reactjs-what-is-it/
http://chrisharrington.github.io/demos/performance/
http://www.quora.com/Whats-the-best-place-to-learn-React-js
https://www.reddit.com/r/javascript/comments/2uvz0x/whats_so_great_about_reactjs/