This project was created in 3 days during the MHP - A Porsche Company "Mobility Hack 2022" Hackathon and earned us the second place. You create your avatar, we propose you the car that fits your needs. We choose to build this car configurator because usually people spend more time personalizing their avatar as actually playing the video game.
Did you ever try to configure your dream car and felt like drowning in all the options and features? 😖
We feel you, we know the frustration, but we have a solution, using gamification. 👍
The idea was to create a sophisticated algorithm which we simplified a lot to be able to implement the idea in 3 days.
(1) You create an avatar which corresponds to you.
(2) We perform a profiling and apply a scoring system.
(3) You got your car configuration, based on your needs and lifestyle !
Let's start customizing our Avatar, first we have to fill in some input parameters.
Damn ! That's exactly the car I was looking for ! 🚙 Let's take a look in the showroom, on the right side you can see all the additionals options of the car.
-
SAAS (Software as a Service) on which car brands can register and enable users to configure their car through gamification.
-
These brands have to pay annual subscription for their models to be presented on our website. Moreover, if an appointement is taken, we could charge the company.
Actually the logic is pretty simple and based on "stereotypes"
-> By adding more input parameters we could find a better matching car.
-> Based on your feeback we could improve our configurator's accuracy
-> Aside of finding your car in this world, we could also help you to find your virtual car in the Metaverse.
- clone the repository ✔️
git clone repo name
cd repo name
- run the backend (default port: 4242) ✔️
cd backend
npm install
npm start
- open another terminal and run the frontend (default port: 3000) ✔️
cd frontend
npm install
npm start
- Your brower should open on localhost:3000 ✔️
Enjoy!
| Backend | Frontend | 3D |
|---|---|---|
| TypeScript | React | Blender |
| Express | Three.js | |
| AWS | Three Fiber | |
| Three drei | ||
| gltfjsx | ||
| Sass |