This project aims to create a dynamic user dashboard having two sections: Profile and Connections.The frontend is built using Next.js and tailwind css while the backend is built using Node JS AND MongoDB.
The aim of this user dashboard is to create a web page where user can manage his user profile dynamically.They can register/log in , update their profile and connect with people.
- FrontEnd : Next.js , Tailwind CSS , Vercel(deployment)
- Backend : Node JS , MongoDB , Render(deployment)
- User Authentication using 2 factor Authentication
- Editable User Profile
- Adding or Removing Connections
The application provides a secure way of user authentication. User can create account with his basic details and optionally provide details such as skills,experience etc. His account will be created after email verification. The passwords are encrypted and stored in a secure way.
Profile of a user displays all the details such as his name,email,password,skills,experience ,education and certification.The user can update his information easily on clicking "edit" button.
The Connections page displays all the friends or user with whom the user have connected to or can connect to. The user can also remove connections from existing ones or add connections with people he can connect with.
The backend provides API endpoints for:
- User authentication
- Fetching and updating user profiles
- Managing user connections
MongoDB is used for data storage and retrieval . User profiles and connections are stored and managed within the MongoDB database.
The project is deployed using:
- Frontend: Vercel
- Backend: Render
Project Deployed Link: Live Site
- Signup Page:
/register
- Login Page:
/
- User Profile Page:
/user/profile
- User Connections Page:
/user/connections
Clone this repository
git clone https://github.com/Mahikagarg09/Dashboard-user
Navigate to the project directory
cd Dashboard-user
Install frontend dependencies
cd client && npm install
Install backend dependencies
cd server && npm install
Configure environment variables for MongoDB, other settings in backend's .env file and localhost for running backend server URL (usually http://localhost:5500).
Start the frontend development server
npm run dev
Start the backend development server
nodemon index.js
- Create an account on vercel
- Import your GitHub repository
- Choose your branch (usually main) and directory (client)
- Deploy
- Create an account on render
- Choose new Web Service
- Import your GiHub repository
- Choose your branch (usually main) and directory (api)
- Add environment variables
- Deploy