Welcome to the FullStack Project Connecting Website. This README file will guide you through the functionalities and features of our application. We have converted a Figma design into a complete Next.js application that facilitates connections among users based on shared skills and interests. Our application incorporates cutting-edge technologies and tools to deliver a seamless and responsive user experience.
-
Frontend Framework: Our application's frontend is built using Next.js, a renowned React framework that enables server-side rendering and efficient client-side navigation.
-
Styling: We've employed Tailwind CSS, a utility-first CSS framework, to craft visually appealing and responsive frontend designs.
-
Authentication: We prioritize security using JWT (JSON Web Tokens) for authentication, ensuring only authorized access to different parts of the platform.
-
Database: MongoDB serves as the backbone of our data management. Its flexibility and scalability empower us to manage user information and connections effectively.
-
Connection Suggestions: Our platform goes beyond the norm by suggesting connections with individuals who share similar skills. This advanced recommendation system enhances user engagement and expands networks.
-
Deployment: We've deployed our application using Vercel, a cloud platform that supports static sites and serverless functions. The deployment includes both a fully functional site and a frontend-only link for responsive design testing.
To run the project locally on your machine, follow these steps:
-
Clone the repository to your local machine.
-
Navigate to the project directory using the terminal.
-
Install the required dependencies by running the following command:
npm install
-
Create a
.env
file in the root directory and add your MongoDB URI as follows:MONGODB_URI=your_mongodb_uri_here SECRET= secret_for_encryption_jwt_here
-
With the environment variable set, you are ready to start the application locally. Run the following command:
npm run start
-
Open your web browser and access the application at
http://localhost:3000
.
-
Editable Profile: You have the freedom to edit your name, email, phone, and profile photo. Customize your profile according to your preferences.
-
Dashboard Navigation: Access the connections page by clicking the dashboard button. Clicking the button again will close the connections page.
Feel free to explore the live site and test its responsive design using the provided links.
We highly value your feedback and suggestions. Hope you loved my project.