https://github.com/alex-ray/kit_gif
https://github.com/alex-ray/kit_gif
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/alex-ray/kit_gif
- Owner: Alex-ray
- Created: 2017-03-16T02:35:22.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-28T18:49:12.000Z (over 9 years ago)
- Last Synced: 2025-02-26T05:44:03.603Z (over 1 year ago)
- Language: JavaScript
- Size: 49.8 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# GIFFITI 🎉
## Architecture
The GIF application is being served from a Node.js server using the express
framework. The Node.js server is setup to server assets using Hot Module Reloading for development
and Server Side Rendering for production.
The Application also utilizes [code splitting](https://webpack.js.org/guides/code-splitting/)
which is defined at each route. This helps separate out common code bundles that wont change
often and can be cached on the client as well as making sure to only bundle code that the user
needs for that route. Webpack auto-magically optimizes for the best balance between
network requests and request load.
The App has three main folder sections
- `client`: JS code that is only run on the client
- `server`: JS code that is only run on the server
- `universal`: JS code that is run on both the client _and_ the server.
The UI is built using the following technologies.
- Webpack 2
- React
- React Router
- Redux
- Immutable
- cssnext
## Installation
Make sure you are running on
- Node v7 or higher, I recommend using [NVM](https://github.com/creationix/nvm)
- NPM v4 or higher
- Webpack v2 or higher
Next run `npm install` in the root directory of this project.
## Development
To run the developement environment run `npm run dev` and navigate to `http://localhost:3000`.
## Production
To build for production run `npm run build`.
To start production run `npm run prod` and navigate to `http://localhost:3000`.
To deploy all one needs to do is replace the `webpack.config.prod.js` files `output.publicPath` configuration to the CDN host
and upload all the build files to that CDN and run the application on a node server.
## TODO:
Shuffle Animations and loading states. (I was going to user React)
Gif Image Loading States - Ideally we want to show a loading state for the preview
image of gif when it is being downloaded to the clients browser cache. This becomes
apparent when shuffling new GIFS that have not been downloaded to the client.
Route Animations.
Better breadcrumb design, not very intuitive, general navigation re-think.
Rethink Color Palette.
Scroll to the top when each route is loaded.