/timgur

Tinder UI for IMGUR images

Primary LanguageJavaScript

TIMGUR

Tinder UI for like or dislike image provided by IMGUR available at timgur.herokuapp.com.

Based on my own kickstarter ReacToGo using

Installation

Simply clone this project on your local machine and then :

cd imgur npm install npm run start

And go to localhost:3000 in your favourite browser. It will start the webpack-dev-server on the 3000 port and proxy all the requests to your future production server (expressjs) on the port 9000. So you can also develop all your endpoints while having hot reload enable.

External Libs

A lot of externals librairies are used in this project for differents goals:

  1. UI : VelocityJS for handling the logic business animations, React-Motion for handling the Page transition animation. I initially wanted to use it for animating the swiping between cards as well but instead I used SwingJS, a swiping lib build on top of HammerJS.

  2. Logic: Redux for managing the App State and API request. It's giving the current state of the whole app. All the action dispatched are visible thanks to the Redux Logger Middleware. The Redux Thunk Middleware is enabling function to be dispatched as well(useful for API calls). React is simply used for the UI components and is mapped to Redux events with React-Redux.

  3. Style: I used Stylus preprocessing for having variables and keep my UI kit in one place. It's used in combination with [Stylus export loader] (https://github.com/PBRT/stylus-export-loader) for having these stylus variables accessible in the javascript.

  4. Routing: React Router is used for handling the route changes in combinaison with Redux-Simple-Router to map it with Redux events.

  5. Platform and Server: An ExpressJS server is handling the API request with Imgur API and distributing the code build by Webpack handling all the transformation (transpile, preprocessing, assets...) and production operations.

All is written in ES6 or ES2015 for the hipsters, transpiled by Babel-Loader

To do

  • Implement ImmutableJS for increasing the performances on the state object.
  • Add User Login and persistant data
  • Learn ELM