Hello guys Welcome back again, In this series we are going to build full register and login application from scratch with the help of express js (a web application framework) .

Prerequisite for this project

• HTML and CSS is must
• You must have the knowledge of javascript
• basic knowledge node js, express js

For creating login and register template we are going to use tailwindcss "a utility-first CSS framework for rapidly building custom user interfaces".

First of all we got to initialize our project by creating package.json file in root directory that can be created by running this command on the teminal open in your root file directory and for window user you can open your cmd and move to the project directory and run this command.

 npm init -y

Then we need to setup our package.json file. For this we need to include the dependencies we are going to use for this project.

For this project we are going to use following dependencies :-

• bcrypt
• connect-flash
• dotenv
• express
• express-session
• express-validator
• mongoose
• nodemailer
• otp-generator
• passport
• passport-local
• pug
• tailwindcss
• nodemon (developer dependencies)

After the creation of package.json file in our root directory we need to include this dependencies in package.json file. You can include it by copying these dependencies written down below.

{
  "name": "loginRegister",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.0.1",
    "connect-flash": "^0.1.1",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "express-session": "^1.17.2",
    "express-validator": "^6.12.1",
    "mongoose": "^6.0.2",
    "nodemailer": "^6.6.3",
    "otp-generator": "^2.0.1",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "pug": "^3.0.2",
    "tailwindcss": "^2.2.8"
  },
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

Now for installing these dependencies in our project directory we need to run the command written down.

npm install

Folder structure of the project

In this project we will have three folder in our root directory

• App - In App folder we will be storing all the backend part of our application.
• Public - In public folder we will store all the static files.
• Views - In views we will store all the template and layout.

Including nodemon script

Now we need to write a script in our package.json file that whenever we make some changes in our backend server get restart automatically and for that include this code in your package.json file.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon ./app/server.js"
  }

In the next part of this series we are going to create login and registration template.