Skip to content

README.md

Latest commit

 

History

History
458 lines (332 loc) · 9.53 KB

README.md

File metadata and controls

458 lines (332 loc) · 9.53 KB
Raw

📱 Instagram Clone

A comprehensive and complete clone of Instagram built with Django REST Framework and Next.js that supports all major social network features.

🌟 Key Features

👤 User Management System

  • ✅ Secure registration and login with JWT
  • ✅ User profile with profile picture
  • ✅ Edit user information
  • ✅ View other users' profiles
  • ✅ Display followers and following counts

📝 Post System

  • ✅ Create posts with images and captions
  • ✅ Edit and delete your own posts
  • ✅ Like posts
  • ✅ Comment on posts
  • ✅ Delete and edit comments
  • ✅ Save posts for later access
  • ✅ Display main feed with posts from followed users

📸 Stories System

  • ✅ Create new stories with images
  • ✅ View stories from followed users
  • ✅ Track story viewers
  • ✅ "My Stories" page for managing stories
  • ✅ Auto-delete expired stories

👥 Follow System

  • ✅ Follow and unfollow users
  • ✅ Display follower list
  • ✅ Display following list
  • ✅ Direct follow from search page

💬 Messaging System

  • ✅ Send first message to users
  • ✅ Private conversations
  • ✅ View message history
  • ✅ Display user online status
  • ✅ Follow button within messages

🔔 Notification System

  • ✅ Like notifications
  • ✅ Comment notifications
  • ✅ Follow notifications
  • ✅ View unread notifications

🔍 Search and Explore System

  • ✅ Search for users
  • ✅ Search for posts
  • ✅ Explore page for discovering popular posts
  • ✅ Search by hashtags

⭐ Highlights System

  • ✅ Create highlights from organized stories
  • ✅ Display highlights on profile
  • ✅ Manage highlights

🏗️ Project Architecture

Backend (Backend)

config/
├── manage.py           # Django management script
├── requirements.txt    # All Python dependencies
├── db.sqlite3          # SQLite database
├── config/             # Django settings
│   ├── settings.py     # Project configuration
│   ├── urls.py         # Main routes
│   ├── wsgi.py         # WSGI configuration
│   └── asgi.py         # ASGI configuration
│
└── Django Apps:
    ├── users/          # User management and authentication
    ├── posts/          # Post system
    ├── comments/       # Comments on posts
    ├── likes/          # Post likes
    ├── follow/         # Follow system
    ├── stories/        # Instagram stories
    ├── messages/       # Private messaging system
    ├── notifications/  # System notifications
    ├── saved/          # Save posts
    └── search/         # Search and explore

Frontend (Frontend)

my-instaclone/
├── package.json           # Node.js dependencies
├── tsconfig.json          # TypeScript configuration
├── next.config.ts         # Next.js configuration
├── tailwind.config.mjs    # Tailwind CSS configuration
│
├── src/
│   ├── app/               # Next.js pages (App Router)
|   |   ├──(auth)          # auth
|   |   └──(root)          # root pages
│   ├── components/        # React components
│   │   ├── comments/      # Comments
│   │   ├── highlight/     # Highlight
│   │   ├── stories/       # Stories
│   │   ├── search/        # Search
│   │   ├── messages/      # Messages
│   │   ├── posts/         # Posts
│   │   ├── profile/       # Profile
|   |   └── ...            # Other componetns
│   ├── hooks/             # Custom React Hooks
│   ├── services/          # API client
│   ├── lib/               # Helper functions
│   ├── utils/             # Utilities
│   ├── types/             # TypeScript types
│   └── styles/            # Global CSS
│
└── public/                # Static files

🛠️ Technologies Used

Backend

  • Django 4.x - Python web framework
  • Django REST Framework - REST API
  • PostgreSQL / SQLite - Database
  • JWT (JSON Web Token) - Authentication
  • Django Signals - Notifications and events
  • Pillow - Image processing

Frontend

  • Next.js 15 - React framework
  • React 19 - UI library
  • TypeScript - Type safety
  • Tailwind CSS - Styling
  • Axios - HTTP client
  • next/image - Image optimization

📋 Requirements

System

  • Python 3.9+
  • Node.js 18+
  • npm or yarn

Python Dependencies

Django==4.x
djangorestframework
django-cors-headers
Pillow
python-dotenv
psycopg2-binary

Node.js Dependencies

next@15
react@19
typescript
tailwindcss
axios

🚀 Quick Start

1️⃣ Backend Setup (Django)

Clone the project:

git clone https://github.com/AhmadReza16/instagram-Clone.git
cd instagram-Clone

Activate virtual environment:

# Windows
python -m venv venv
venv\Scripts\activate

# Mac/Linux
python3 -m venv venv
source venv/bin/activate

Install dependencies:

cd config
pip install -r requirements.txt

Set up .env:

# config/.env
SECRET_KEY=your_secret_key_here
DEBUG=True
ALLOWED_HOSTS=localhost,127.0.0.1
DATABASE_URL=sqlite:///db.sqlite3
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

Run migrations:

python manage.py migrate

Create superuser:

python manage.py createsuperuser

Run Django server:

python manage.py runserver

Django server runs at http://127.0.0.1:8000.

2️⃣ Frontend Setup (Next.js)

Install dependencies:

cd my-instaclone
npm install

Set up .env.local:

# my-instaclone/.env.local
NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

Run Next.js server:

npm run dev

Next.js server runs at http://localhost:3000.

📡 API Endpoints

Authentication

POST   /api/auth/register/          - Register new user
POST   /api/auth/login/             - User login
POST   /api/auth/refresh/           - Refresh token
POST   /api/auth/logout/            - Logout

Users

GET    /api/users/                  - List all users
GET    /api/users/<id>/             - Get user information
PUT    /api/users/<id>/             - Update user information
GET    /api/users/<username>/profile/ - User profile

Posts

GET    /api/posts/                  - List all posts
POST   /api/posts/                  - Create new post
GET    /api/posts/<id>/             - Get post details
PUT    /api/posts/<id>/             - Edit post
DELETE /api/posts/<id>/             - Delete post
GET    /api/posts/feed/             - Personal feed

Comments

GET    /api/posts/<id>/comments/    - Get post comments
POST   /api/posts/<id>/comments/    - Create new comment
DELETE /api/comments/<id>/          - Delete comment

Likes

POST   /api/posts/<id>/like/        - Like post
DELETE /api/posts/<id>/like/        - Unlike post
GET    /api/posts/<id>/likes/       - Get likers list

Follow

POST   /api/users/<id>/follow/      - Follow user
DELETE /api/users/<id>/unfollow/    - Unfollow user
GET    /api/users/<id>/followers/   - Get followers list
GET    /api/users/<id>/following/   - Get following list

Stories

GET    /api/stories/                - All stories from followed users
POST   /api/stories/                - Create new story
GET    /api/stories/my-stories/     - Your stories
DELETE /api/stories/<id>/           - Delete story
POST   /api/stories/<id>/view/      - Record story view

Messages

GET    /api/messages/               - List conversations
GET    /api/messages/<user_id>/     - Messages with user
POST   /api/messages/<user_id>/     - Send new message

Search

GET    /api/search/users/           - Search users
GET    /api/search/posts/           - Search posts
GET    /api/posts/explore/          - Explore posts

Notifications

GET    /api/notifications/          - All notifications
GET    /api/notifications/unread/   - Unread notifications
POST   /api/notifications/<id>/read/ - Mark as read

🔐 Authentication

The project uses JWT (JSON Web Token) for authentication:

  • Access Token: For accessing protected API endpoints
  • Refresh Token: For refreshing access token

Every request needs the following header:

Authorization: Bearer <access_token>

🐛 Troubleshooting

Likes not working

If likes don't work:

  1. Reset database: python manage.py migrate
  2. Refresh page
  3. Check browser console

Image upload errors

If images won't upload:

  1. Check media/ folder exists
  2. Verify directory write permissions
  3. Check file size limits

CORS errors

If CORS requests are blocked:

  1. Set ALLOWED_HOSTS in Django
  2. Configure CORS_ORIGINS_ALLOWED

📝 Important Notes

  • All images are stored in config/media/
  • Tokens expire after 24 hours
  • Stories auto-delete after 24 hours
  • Notifications are auto-created by signals

🤝 Contributing

To contribute to the project:

  1. Fork it
  2. Create a feature branch
  3. Commit your changes
  4. Submit a Pull Request

📄 License

This project is licensed under the MIT License.

📧 Contact and Support

For questions and issues:

🎯 Roadmap

  • Real-time Chat with WebSocket
  • Reels implementation
  • Hashtag tracking
  • Advanced analytics
  • Mobile App (React Native)
  • Better Dark/Light Mode
  • Multi-language support

Built with ❤️ by AhmadReza16