Dynamic Profile - Full Stack CRUD Application

Dynamic Profile is a Full Stack CRUD application built using Next.js, Node.js, Express.js, and MongoDB. It allows users to create, edit, and manage their profiles and connections. Live: https://dynamic-profile.vercel.app

Screen Shots

Dashboard and Profile page

Connections page

Toggle Functionality of Adding and Removing Connection

Edit Details Modal

Login Page

SignUp Page

Features

• Authentication: Secure login and sign-up functionality using JWT.
• Dynamic Profile and Connection Pages: View and manage user profiles and connections.
• Image Upload: Upload profile images to Cloudinary and store URLs in the database.
• Edit User Data: Edit user information using the EditModal component.
• API Binding: Frontend API binding for seamless communication with the backend.
• CRUD Operations: Backend routes and controllers for Create, Read, Update, and Delete operations.
• Connection Management: Add and remove connections with a toggle feature.
• Modern Design: Stylish UI using TailwindCSS.

Getting Started

Prerequisites

• Node.js and npm installed
• MongoDB account and database set up
• Cloudinary account for image uploads

Installation

1. Clone the repository: git clone https://github.com/your-username/dynamic-profile.git

2. Navigate to the project directory: cd dynamic-profile cd server -> npm install -> cd .. -> cd client -> npm install

3. Create .env file in the server directory and replace the values for" MONGODB_URI=your-mongodb-uri JWT_SECRET=your-jwt-secret

4. To run locally in server run -> npm start in client start npm run dev

   And the application will start runnung on localhost:3000

Deployment

Backend (Render)

1. Push your code to GitHub repository.
2. Create a new Web Service on Render.
3. Link your GitHub repository and configure build settings.
4. Set environment variables in Render for MongoDB and Cloudinary.
5. Deploy the backend service on Render.

Frontend (Vercel)

1. Push your code to GitHub repository.
2. Create a new Next.js project on Vercel.
3. Link your GitHub repository and configure build settings.
4. Set environment variables in Vercel for frontend configuration.
5. Deploy the frontend project on Vercel.

Do not forget to update the deployed URL of frontend and backend in the code

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.