A Car Insurance & Rental website I’ve built, featuring Axios, Cors, React-Router, React-Select, SwiperJS and more. My experience in the Lloyds Insurance Group has lead me to build this project.
This project was a true dive in the deep-end; it is a Full-Stack project that encompasses the Front-End (React) with Back-End (NodeJS, Express, SQL). For this, I had to learn the basics of NodeJS & Express; so, I could link these together.
Initially, I wanted to use React to handle the forms, however I found that these didn’t link well with ’sort’ dropdown for the ‘Browse’ page, so I switched to React-Select for the ‘Sort’ dropdown. I also realized that this condensed my code, and also, the website performed slightly better with this method, especially the link between React and NodeJS/SQL (backend).
I also learned a lot about website deployment; specifically, how to deploy a full website. Honestly, it was a challenge in the beginning; I ran into many bugs during deployment, so I decided to switch from Heroku.com to Render.com for the backend, and I stuck with Netlify for the front-end, and this worked. I have much more to say about this project, as I enjoyed it so much, however I do not want this .readme file to turn into a 7-series book, so I will stick with this.
- Add a Saved/Wishlist to the site, so users could save their favorite cars
- Add a .map to the ‘Compare Car’ info sections, instead of hard-coding
- I initially wasn’t able to tie 'select' tags sort with state in Browse page, had to use another way (React-Select)
- Reduce Image Sizes to improve the performance of the website
- Add an internal Blog Site section within the website.
The Front-End of this website was deployed with Netlify, and the Back-End of this website was deployed with Render.
- Install Git, Node and npm.
$ node --version
v16.13.2
$ npm --version
8.1.2
$ git --version
git version 2.29.1.windows.1
- From your Terminal/Command Line, clone the repository:
# Clone repository
$ git clone https://github.com/EugeneKoba/autoinsure_app
# Go into the repository
$ cd autoinsure_app
- Start the Back-end server with NPM.
# Enter the ‘server’ folder
$ cd server
# Start the backend server with npm
$ npm run dev
- Start the Front-end webpage with NPM.
# Navigate back to root folder
$ cd autoinsure_app
# Enter the ‘client’ folder
$ cd client
# Start the front-end webpage with npm
$ npm start
The development server should be running in your development browser.
Made with React JS, NodeJS, Express & SQL. Website Icons & Design created with Adobe Photoshop, Illustrator, Canva & Figma.
