README.md

NextJS & Express Social Media Site

Tech Stack

• Frontend: Next js App Router with Javascript & Tailwind CSS
• Backend: Express.js with Mongodb
• Styling: Tailwind CSS, NextUI, Shadcn
• Icons: React Icons, Lucide React
• Form Handling: Formik with Yup validation
• Live feed: Socket.io
• Image Storage: Cloudinary
• AI-Assisted Development: V0.dev, ChatGPT, Gemini
• Utilities: util

---

MERN Social Media App - Project Checklist

---

Phase 1: Essential Features (MVP)

• User Authentication & Authorization

  • Sign up / Log in / Log out
  • JWT-based authentication
  • Password hashing (bcrypt)

• User Profiles

  • View profile
  • Edit profile (name, bio, address, education, work etc)
  • Follow / Unfollow users

• Posts

  • Create post (text)
  • Read posts (feed)
  • Update post
  • Delete post

• Likes / Reactions

  • Like / Unlike posts
  • Display number of likes

• Comments

  • Add comment
  • Edit comment
  • Delete comment

• Feed / Timeline

  • Display posts from followed users

---

Phase 2: Intermediate Features

• Search

  • Search users by name

• Notifications

  • Notify when someone likes a post
  • Notify when someone comments
  • Notify when someone follows

• Post Media

  • Upload images with posts

• Profile Customization

  • Edit name, bio, address, education, work etc

---

Phase 3: Advanced / Optional Features with Socket.io Integration

• Real-time Feed Updates

  • Live updates for posts
  • Live likes/comments count

• Direct Messaging (DMs)

  • Chat between users
  • Real-time using Socket.io
  • Live notification for unread messages
  • Display Read / unread messages

• Cloud Setup Integration

  • Mongodb Atlas for database
  • Cloudinary setup for image storage

---

Phase 4: Deployment to Vercel and Render

• Deployment
  • Deployed frontend to vercel
  • Deployed backend to render

---

Getting Started

1. Clone the repository

   git clone https://github.com/adityaspaudel/socialmedia.git
   

2. Install dependencies for both the client and server

   cd client
   pnpm install
   
   cd ../server
   pnpm install
   

3. Set up environment variables Create a .env file in the root directory of both the client and server and add necessary variables.

4. Run the development server

   cd MeroSanjal/client
   pnpm  dev
   

   For the backend server:

   cd ../server
   pnpm  dev
   

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

6. Backend server will run on http://localhost:8000 by default.

🌐 Live Demo

• Frontend (Vercel): https://merosanjal.vercel.app
• Backend (Render): https://merosanjal-vcjx.onrender.com

Project Screenshots

User Registration

User Login

User Home

User Search

User Profile

User Edit / Update

User Notifications

User Chat between User