Website is live and running at myhub

About

• This project is specifically crafted to build a social media website, akin to others, enabling users to engage with one another through commenting, liking, and sharing posts with the help of Next.js with Prisma as the ORM, and MongoDB as the database.
• With the assistance of Cloudinary, user can seamlessly store images in the database.

Credentials

• You can freely check out my project with given email id and password.
  

  ->Email: abc@abc.com
  ->Password: abc123

Authors

• Aryan Kalra

Features

Note

• Dashboard is not accessible to everyone. Users need to sign in with random email in order to create an account and connect with people.
• Feel free to visit.

User Panel

• User can freely visit each other's profile. ✔
• Unauthorized users can not comment and like on any post. ✔
• Users with authorization can interact with each other's post by commenting and liking. ✔
• Users can follow each other along with unfollow feature. ✔
• Users also get notification updates regarding their posts,likes and comments. ✔
• Users can upload their favorite images to display on their profile, along with a cover photo for the wall. ✔
• It also comes with a search functionality, allowing users to visit each other's profiles by searching. ✔
• Responsive design for mobile, tablet, and desktop. ✔
• Users can see their and other followers and the following list. ✔
• All images uploads are stored on Cloudinary Cloud Storage. ✔
• Many more to come. ✔

Tech

• Nextjs 14
• Typescript
• Tailwind CSS
• Jotai
• Prisma
• Mongodb
• Cloudinary for Image database
• useSWR for data revalidation and fetching
• NextAuth.js for authentication along with JWT (JSON Web Tokens) for session management mechanism

Enviroment Variables

To run this project, you will need to add the following enviroment variables to your .env file

DATABASE_URL=Your Mongodb database url, It could be achieved by creating a database in mongodb in order to run this project
NEXTAUTH_JWT_SECRET=It could be any secrey key
NEXTAUTH_SECRET=It could be any key
CLOUD_NAME=Your Cloud Name key
CLOUD_API_KEY=Your Cloud Api Key
CLOUD_API_SECRET=Your Cloud Secret key

In order to generate the above keys, you will have to create an account in Cloudinary before proceeding further with image integration in your project.

Installation

Install my project with npm

  npm install
  npm run dev (for development server)
  npm run dev
  # or
  yarn dev
  # or
  pnpm dev
  npm run build (for Production)
  npm run preview (To View Production Server )

Open http://localhost:3000 with your browser to see the result.

Thank you
Made with 🖱️ and 💻
By Aryan Kalra.