Car Vault app using MERN

Organizing your vehicle data and keeping the information updated is very necessary for managing your cars. In this article, we'll explore the process of building a scalable car vault system using the MERN stack – MongoDB, Express, React, and Node.

Preview of final output: Let us have a look at how the final output will look like.

Approach to create vehicle tracker

• In the app we have used MongoDB to store the data.
• There is some initial sample data of the cars are added in the code.
• You can do CRUD operation on the data with the help of buttons and forms provided.
• By clicking on the add vehicle button you will be able to add new entry of a vehicle.
• In the frontend App.js is the main component which is used to fetch data from the backend with the help of Axios.
• There are various components for each part which all together do the functioning.
• There is an option for filtering the vehicle on the basis of name, milage and distance covered.
• There is an option for contact owner, delete and update vehicle information on the card.

Project Structure

Steps to create the application

Step 1: Open the root directory in vs code and create a folder `server` and initialize the express application.

cd server
npm init -y

Step 2: Install the required dependencies

npm install express mongoose body-parser cors nodemon

Dependencies(Backend):

"dependencies": {
 "body-parser": "^1.20.2",
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.0.3",
 "nodemon": "^3.0.2"
}

Example: Create files server.js and seedData.js and add the required codes.

Step 3: To start the server run the following command.

nodemon server.js

Step 4: Open a new terminal in project root directory and run the following command to create react app.

 npx create-react-app client
cd client

Step 5: Install Axios

npm install axios

Project dependencies:

 "dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.6.3",
 "moment": "^2.30.1",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
 }

Example: Create the required files and add the below code.

Step 6: To start the frontend run the following command.

npm start

Output: