Instagram Clone

A modern, full-stack Instagram clone built with React, Node.js, Express, and MongoDB. This application replicates the core features of Instagram including user authentication, photo sharing, social interactions, and a responsive design.

🚀 Features

Authentication & User Management

• User Registration & Login - Secure authentication with JWT tokens
• Profile Management - Edit profile information, bio, and profile pictures
• User Search - Find and discover other users

Social Features

• Photo Sharing - Upload and share photos with captions and location tags
• News Feed - View posts from followed users in chronological order
• Like & Comment System - Interact with posts through likes and comments
• Follow/Unfollow - Build your social network by following other users
• User Profiles - View detailed user profiles with post grids and statistics

Modern UI/UX

• Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• Instagram-like Interface - Familiar and intuitive user interface
• Real-time Updates - Dynamic content updates without page refreshes
• Image Upload - Drag-and-drop image upload with preview
• Loading States - Smooth loading indicators and error handling

🛠️ Tech Stack

Frontend

• React 18 - Modern React with hooks and functional components
• React Router - Client-side routing and navigation
• Axios - HTTP client for API communication
• React Icons - Beautiful icon library
• React Dropzone - File upload with drag-and-drop
• Moment.js - Date and time formatting

Backend

• Node.js - JavaScript runtime environment
• Express.js - Web application framework
• MongoDB - NoSQL database for data storage
• Mongoose - MongoDB object modeling
• JWT - JSON Web Tokens for authentication
• Bcrypt - Password hashing and security
• Multer - File upload handling
• Express Validator - Input validation and sanitization

📦 Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local installation or MongoDB Atlas)
• npm or yarn package manager

1. Clone the Repository

```bash git clone cd instagram-clone ```

2. Install Dependencies

```bash

Install root dependencies

npm install

Install server dependencies

cd server npm install

Install client dependencies

cd ../client npm install ```

3. Environment Configuration

Create a `.env` file in the `server` directory:

```env PORT=5000 MONGODB_URI=mongodb://localhost:27017/instagram-clone JWT_SECRET=your-super-secret-jwt-key-change-this-in-production CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name CLOUDINARY_API_KEY=your-cloudinary-api-key CLOUDINARY_API_SECRET=your-cloudinary-api-secret ```

4. Database Setup

Make sure MongoDB is running on your system:

```bash

For local MongoDB

mongod

Or use MongoDB Atlas cloud database

Update the MONGODB_URI in your .env file

```

5. Start the Application

```bash

From the root directory, start both server and client

npm run dev

Or start them separately:

Terminal 1 - Start the server

npm run server

Terminal 2 - Start the client

npm run client ```

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

📱 Usage

Getting Started

1. Register - Create a new account with username, email, and password
2. Login - Sign in to your account
3. Complete Profile - Add a profile picture and bio
4. Create Posts - Share your first photo with a caption
5. Discover Users - Find and follow other users
6. Engage - Like and comment on posts in your feed

Key Features Walkthrough

Creating Posts

• Click the "+" icon in the navigation bar
• Drag and drop an image or click to select from your computer
• Add a caption and location (optional)
• Click "Share" to publish your post

Social Interactions

• Like Posts - Click the heart icon on any post
• Comment - Add comments to posts and engage in conversations
• Follow Users - Visit user profiles and click "Follow"
• Profile Views - Click on usernames to view detailed profiles

Profile Management

• Click your profile picture in the navigation
• Select "Profile" to view your profile
• Click "Edit Profile" to update your information

🏗️ Project Structure

``` instagram-clone/ ├── client/ # React frontend │ ├── public/ # Static files │ ├── src/ │ │ ├── components/ # React components │ │ │ ├── Auth/ # Authentication components │ │ │ ├── Posts/ # Post-related components │ │ │ └── Profile/ # Profile components │ │ ├── context/ # React Context (Auth) │ │ ├── App.js # Main App component │ │ └── index.js # Entry point │ └── package.json ├── server/ # Node.js backend │ ├── models/ # MongoDB schemas │ ├── routes/ # API routes │ ├── middleware/ # Custom middleware │ ├── index.js # Server entry point │ └── package.json ├── package.json # Root package.json └── README.md ```

🔧 API Endpoints

Authentication

• `POST /api/auth/register` - Register new user
• `POST /api/auth/login` - User login
• `GET /api/auth/me` - Get current user

Users

• `GET /api/users/profile/:username` - Get user profile
• `PUT /api/users/profile` - Update user profile
• `POST /api/users/follow/:userId` - Follow/unfollow user
• `GET /api/users/search/:query` - Search users

Posts

• `POST /api/posts` - Create new post
• `GET /api/posts/feed` - Get user feed
• `GET /api/posts/user/:userId` - Get user's posts
• `GET /api/posts/:postId` - Get single post
• `POST /api/posts/:postId/like` - Like/unlike post
• `POST /api/posts/:postId/comment` - Add comment
• `DELETE /api/posts/:postId/comment/:commentId` - Delete comment
• `DELETE /api/posts/:postId` - Delete post

🎨 Styling & Design

The application uses a custom CSS design system that closely mimics Instagram's visual design:

• Color Palette - Instagram's signature colors and gradients
• Typography - Clean, readable fonts with proper hierarchy
• Layout - Responsive grid system and flexible layouts
• Components - Reusable UI components with consistent styling
• Mobile-First - Responsive design that works on all screen sizes

🔒 Security Features

• Password Hashing - Bcrypt for secure password storage
• JWT Authentication - Secure token-based authentication
• Input Validation - Server-side validation for all inputs
• CORS Protection - Cross-origin resource sharing configuration
• File Upload Security - Secure image upload with validation

🚀 Deployment

Frontend (Netlify/Vercel)

```bash cd client npm run build

Deploy the build folder

```

Backend (Heroku/Railway)

```bash

Set environment variables

Deploy the server directory

```

Database (MongoDB Atlas)

• Create a MongoDB Atlas cluster
• Update the MONGODB_URI in your environment variables
• Configure network access and database users

🤝 Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Talha

🙏 Acknowledgments

• Instagram for the design inspiration
• React and Node.js communities for excellent documentation
• All the open-source libraries that made this project possible

---

Note: This is a clone project created for educational purposes. It is not affiliated with or endorsed by Instagram/Meta.