Car Configurator

Car configurator app, developed just for fun.

This project was bootstrapped with Create React App.

Project requirements

Must have

1. Being able to customize a car
   1. Brand (using data from this api)
   2. Body color
   3. Rims (type + color)
   4. Number on the side
2. Don't use any images (including SVG or Canvas), try to do as much as possible using CSS
3. Use next generation Javascript / CSS
4. Minification / any other optimizations for Production
5. Proper HTML semantics
6. Responsive design

Should have

1. Auto-saving configuration to the localStorage
2. Sharing configuration using a url
3. Basic tests (added a reducer test example)
4. Travis build

Nice to have

1. Server side rendering
2. View car from multiple angles
3. Change configuration for interior
4. Use Hot Module Replacement
5. Use React Hot Loader
6. i18n
7. Sass compilation as part of webpack
8. Make use of Redux Saga

Directory structure

1. actions Action creators, used for creating Redux action objects.
2. components Presentation components. Focus on displaying things, don't use the global store.
3. containers Container components. Focus on behavior, use the global store.
4. reducers Redux reducers. Convert an action into a new state.
5. sagas Redux sagas, used to simplify interactions with async actions.
6. services Services which interact with the backend (JSON Api).

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.