As I described in the FAQ on the homepage, one of the reasons I started this blog was a way to learn react.js. One of the best ways to learn new things in programming is to actually do it and use a real project, or in this case a so called ‘pet’ project which you’ll love and take good care of.
I started almost 2 months ago I with a very good video lesson from Wes Bos:
https://reactforbeginners.com/ it will cost you some $ but they’re well worth the spend! Very good and clear lessons with everything I needed to kick off my project.
The main library’s/services I used are:
- react.js (of course) https://facebook.github.io/react/
- the API’s from strava, youtube, flickr & tumblr
- Firebase the database layer https://www.firebase.com/
- Gulp http://gulpjs.com/ to glue everything together
- http://browserify.org/ & http://babeljs.io/ for writing javascript modules the ES6 way.
- http://underscorejs.org/ for some helper functions
- http://momentjs.com/ mainly for the date linking & formatting of the date’s
I’m using my own lazyloader & infinitescroll functions, I’ve used/tested some library’s but they were all a bit too complicated and with functionality I did not need. Maybe I will release them on github.
Admin page
For the Admin side of the project, I’ve made use of several node.js library’s so I could easily connect to the API’s and make the calls.
- Youtube: https://www.npmjs.com/package/youtube-api
- Strava: https://www.npmjs.com/package/strava-v3
- Flickr: https://www.npmjs.com/package/flickrapi
- Tumblr: https://www.npmjs.com/package/tumblr
For the interface I’ve made a seperate page which does all the import & syncing. This page puts everything on firebase and the main site only gets the data and does no syncing. So when I’ve made a new ride the only thing I need to do is upload the ride & media (if any of course) and push some buttons and my site is updated!
Next up!
I’ve made a list of nice to have’s which I will work in the coming months.
- A map of all the rides, pictures & videos
- add disqus to blog https://github.com/mzabriskie/react-disqus-thread
- page transitions
- RIDES: resize map row http://codepen.io/zz85/post/resizing-moving-snapping-windows-with-js-css
- RIDES: autosuggest by search https://github.com/fmoo/react-typeahead
- RIDES: calendar overview http://belkalab.github.io/react-yearly-calendar/
- share buttons https://github.com/nygardk/react-share
- PICTURES: Filter on year
- PICTURES: Better Slide image, like IOS https://www.npmjs.com/package/swipe-js-iso https://github.com/jed/react-swipe/blob/gh-pages/react-swipe.js
And as it comes down to learn more about react I will probably investigate more on how to structure/architect a (react) app with flux
https://facebook.github.io/flux/ and maybe make use immutable https://github.com/facebook/immutable-js
And I will probably also investigate some more on webpack https://github.com/webpack/webpack (instead of browserify)
BUT first I’ll go out and do some more biking and put the laptop aside and of my lap ;-)