vivek201102/RTO

Project Information

This project contains some functionalities of RTO website. This project was created as the college project to learn full stack development with MERN stack.

Project Name :

• Regional Transport Office Website

Technologies :

• MongoDB
• Express JS
• React JS
• Node JS

Functions:

• Driving Licence Related Services

  • Apply for Learning License
  • Apply for Driving License
  • Change the Details in License

• Vehicle Registration

  • Apply for New Vehicle Registration
  • Fancy Number Plate Allocation

• Driving School Related Services

  • Driving School Registration

Team Members :

• Vivek Patel
• Jay Shah

(Screen shots of the project will be added as soon as the project gets completed)

RTO Website (MERN STACK)

Project Initialization

Basic Structure

• Create Project Folder (Suggested Name: Project)

• Create Two Folder under Project folder named server and client

• client folder contains all frontend code

• server folder contains all backend code.

• Initilize Project folder with npm using 'npm init'

  //Where you want to create project open it in terminal
      mkdir Project
      cd Project
      mkdir client
      mkdir server
      npm init -y

Client side Initilization

• Open the client folder

• Create react app in that folder

• Test your react app using npm start

  //continue with previos code
      cd client
      ngx create-react-app rto
      npm start

• Add following dependencies.

• Axios is a lightweight HTTP client based similar to a Fetch API. Axios is a promise-based async/await library for readable asynchronous code. We can easily integrate with React, and it is effortless to use in any front-end framework.

      npm install --save react-router-dom
      npm install --save axios

• Make components and make ready the frontend part of the project separately.

Server side Initilization

• Open the server folder

• Run command npm init

• Install dependencies which are needed(Express, mongoose, multer etc.)

• Create file named as app.js

  //continue with previos code
      cd server
      npm init -y
      npm install express
      npm install multer
      npm install mongoose
  //create file name as app.js

• Open file app.js

• Initilize the express app

• Declare port manually or env port

• Listen that port to run the file

  //Code for app.js
  const express = require('express');
  const port = process.env.PORT || 8082;
  const app = express();
  
  app.get('/', (req, res) => res.send('Hello world!'));
  
  app.listen(port, ()=>{
      console.log(`Server is running on port: http://localhost:${port}`);
  });

• Now run app.js file (node app.js)

• Check the url http://localhost:8082

• It will display "Hello world!" output to the screen.

Structure for client side

• controller folder from where you can controll all logics
• routes folder from where you can manage url redirecting
• models folder for handling the database models
• config folder to configure database

  //Open Project folder in terminal then run
  mkdir routes
  mkdir controller
  mkdir models
  mkdir config

MongoDB Setup (Localhost)

• Install Dependency for database connection

• You need to install mongodb & await

      npm install mongodb
      npm install await

• Create file name as db.js

  //db.js file content
  const MongoClient = require('mongodb');
  
  const connect = async function(){
  await MongoClient.connect('mongodb://localhost:2c7017/', (err, client) => {
          try{
              if(err) throw err;
              console.log("database connected successfully");
          } 
          catch(err){
              console.error(err.message);
          }
      });  
  }
  
  module.exports = connect;

• In file where you want to access database you can use config file as require argument.

• You can check wheather given code is working or not by running the db.js file but before that you need to add connect(); befor module.exports to run function.

Mongoose Connection (Atlas)

• Create database with appropriate user.
• User has to permision for read/write.
• After that click on connect button of database and choose connect your application.
• Copy the connection string for your application.

  mongodb+srv://<username>:<password>@<database name>.<your code>.mongodb.net/?retryWrites=true&w=majority

• This is like your connection string should be.

- Install mongoose package by `npm i mongoose` or `npm install mongoose`. - If you want to use connection string from env variable then you neeed to install dotnev by `npm i dotnev`. (Recommended) - Open config.js file to add database configuration. ```js const { default: mongoose } = require("mongoose"); require("dotenv").config();

  /*
  Here you have to set env variable named MONGO_URI as copied connection string from atlas database. You can set your env variable called MONGO_URI as connection string.
  */

  const db = process.env.MONGO_URI;

  const connect = async () => {

    try {
      await mongoose.connect(db, { useNewUrlParser: true });
      console.log("Connected...");
    }
    catch (err) {
      console.log(err);
    }
  }

  module.exports = connect;
```

• Note : Just use localhost or mongooes connection. Mongoose is cloud base and localhost is for local system.

Connection between Frontend and Backend

• we need to install cors in our back-end (server-side) project. run npm install cors in backend project.
• now start the npm start in frontend and npm run app in the backend. It should Work!!