To start project simply clone it on your disc:
git clone https://github.com/Shlizer/car_customization.git
Then go to project directory and install all dependencies using npm or yarn:
npm instal
yarn
At last to start project simply use
npm run start or
yarn start
It's possible also to run both frontend and backend parts separately using prefixes like so:
npm run start:frontend or npm run start:backend
yarn start:frontend or yarn start:backend
It's important to have port 4000 opened for backend app. If it's impossible please change it in backend/src/index.js express listening port and in proxy line in frontend/package.json.
- Project should use React and Redux
- Data should be provided asynchronously from external source
- Dynamic layout from given data
- Fetching car list and car parts
- Each car can have different compatibility with other parts
- Each gearbox have different compatibility with gearboxes
- Calculating price for all selected parts and presenting summary
Project is divided into two separate elements, that can be even further split into two repositories and developed separately. First one - backend, is just regular Express server that provides all needed data from our fixed database. Second, frontend that is, fulfill the representation of data. It's made of React+Redux with HMR.
Page layout is created from provided DB data. I'm using simple component manager to load proper react components where given scheme puts them. There is even possibility to add own attributes to those elements such as style, className and so on.
Each parts (and I'm counting car model as parts too) has it's own 'noFit' array of elements that can reduce visible parts in the output screen and prevent selecting them alongside with this part.
Every part has it's own prop called 'price'. After selecting each element I'm just summing up all selected parts, so user can see final result. I also provided on hover all part costs individually.
This project have some easy to upgrade parts such as all layout colors are stored in css variables so making basic color theming is easy. Also it's possible to add new part types - just add new entry in backend/src/db/parts.js and equivalent file with types in backend/src/db/parts/*.
Author: Krzysztof 'Shlizer' Hinc License: MIT