Mini Social Post Application (TaskPlanet Clone)

A full-stack social media application inspired by TaskPlanet, built as part of a Full Stack Internship Assignment. Users can create posts, upload images, like and comment on posts, and interact through a modern social feed.

Features

• JWT-based Authentication (Signup & Login)
• Create posts with text and images
• Like and Comment functionality
• Cloudinary-powered image uploads
• Responsive Material UI design
• Dark/Light mode support
• Public social feed with user profiles and timestamps
• MongoDB Atlas database integration

Tech Stack

Frontend

• React.js
• Vite
• Material UI (MUI)
• React Router DOM
• Axios

Backend

• Node.js
• Express.js
• JWT Authentication
• MongoDB + Mongoose

Services

• MongoDB Atlas
• Cloudinary

Project Structure

.
├── frontend/   # React + Vite client
└── backend/    # Express REST API

Local Setup

Backend

cd backend
npm install

Create a .env file inside the backend directory:

PORT=5000
MONGODB_URI=your_mongodb_atlas_uri
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Start the backend server:

npm run dev

Frontend

cd frontend
npm install
npm run dev

The frontend will run locally and communicate with the backend API.

Deployment

Backend Deployment (Render)

1. Push the project to GitHub.
2. Create a new Web Service on Render.
3. Connect the repository.
4. Set the Root Directory to:

backend

5. Build Command:

npm install

6. Start Command:

npm start

7. Add all environment variables from the .env file.

Frontend Deployment (Vercel)

1. Import the repository into Vercel.
2. Select Vite as the framework.
3. Set the Root Directory to:

frontend

4. Configure:

Build Command: npm run build
Output Directory: dist

5. Update the API baseURL in:

frontend/src/api.js

with your deployed Render backend URL before deployment.

Running Seed Data (Optional)

To populate the database with sample users and posts:

cd backend
node seed.js

Author

Built as a Full Stack Internship Assignment using React, Node.js, Express, MongoDB Atlas, and Cloudinary.