Nostalgic clone of early Instagram versions - A social photo sharing network recreating the classic Instagram atmosphere from 2010-2012.
Live demo available for testing: instaclone-1nla.onrender.com
Demo credentials:
--> Login: demo_user
--> Pass: 3edc1qaz
Desktop version works stably. Mobile app version is under development.
Note: Some JavaScript features may work slowly or with delays on the free render.com hosting.
- 📸 Photo Sharing - Upload and share your moments with image validation
- ❤️ Advanced Like System - Real-time likes with Ajax support and visual feedback
- 💬 Comment System - Full commenting functionality with edit and delete options
- #️⃣ Hashtag Support - Automatic hashtag parsing and dedicated hashtag pages
- 👥 Following System - Follow/unfollow users with real-time updates
- 🔍 Advanced Search - Live user search with avatar previews
- 📊 Personalized Feed - Timeline showing posts from followed users with pagination
- 🖼️ Custom Avatars - Upload and manage profile pictures
- 📝 Profile Headers - Customizable bio/header text (up to 50 characters)
- 📈 Social Statistics - Real-time follower/following counts and post statistics
- 🔒 Profile Editing - Full control over personal data including phone validation
- 👁️ Profile Views - Browse other users' profiles with follow/unfollow functionality
- 📋 Followers/Following Lists - Paginated lists with user avatars and quick actions
- ➕ Post Creation - Upload photos with captions and automatic hashtag detection
- ✏️ Post Editing - Edit post captions and images (authors only)
- 🗑️ Post Deletion - Delete posts with confirmation (authors only)
- 🔍 Post Details - Dedicated post pages with full comment threads
- 📅 Timestamps - Human-readable timestamps (e.g., "2 hours ago")
- 🏷️ Hashtag Pages - Browse all posts by specific hashtags with grid layout
- 📷 Image Update - Change post image during editing
- 💭 Real-time Comments - Add comments to posts instantly
- ✏️ Comment Editing - Edit your own comments
- 🗑️ Comment Deletion - Delete comments with proper permissions
- 👤 Comment Authors - Display comment authors with profile links
- 📅 Comment Timestamps - Show when comments were made
- 🕰️ Retro Instagram Aesthetic - Faithful recreation of 2010-era Instagram design
- ✨ Interactive Elements - Hover effects, smooth transitions, and visual feedback
- 🌈 Gradient Design - Instagram-style gradients and modern color schemes
- 📋 Smart Navigation - Sticky header with quick access to all features
- 🔄 Ajax Interactions - Real-time likes, follows, and search without page reloads
- 🔐 Custom User Model - Extended user model with phone validation
- 📧 Secure Registration - Email and phone number validation
- 🛡️ Permission System - Proper authorization for post/comment editing
- 🚫 Access Control - Login required for most features
- ✅ Form Validation - Client and server-side validation
- 📈 Pagination - Efficient pagination for feeds, profiles, and lists
- 🗄️ Optimized Queries - Database optimization with select_related and prefetch_related
- 📱 Media Handling - Organized media uploads with date-based directory structure
- 🏷️ Automatic Tagging - Regex-based hashtag extraction and management
- 📸 Cloudinary Integration - All images stored and served via Cloudinary
- 💾 Environment Switching - Use
.envto switch between dev (SQLite) and prod (PostgreSQL) viaDJANGO_SETTINGS_MODULE
- Django 5.2.5 - Modern Python web framework
- SQLite - Lightweight database for development
- Pillow - Image processing and handling
- Python 3.12+ - Latest Python features
- Bootstrap 5.3 - Responsive CSS framework
- FontAwesome 6.4 - Modern icon library
- Vanilla JavaScript - Custom interactions and Ajax
- CSS3 - Modern styling with gradients and animations
- Class-Based Views - Django CBVs for clean, reusable code
- Model-View-Template - Standard Django architecture
- Ajax Integration - Seamless real-time interactions
- Signal System - Automatic profile creation on user registration
📁 django-instaclone-2010/ # Main project root
├── 📝 manage.py # Django management script
├── 📁 django_instaclone_2010/ # Django core package (settings, URLs, WSGI/ASGI)
│ ├── asgi.py # ASGI config
│ ├── urls.py # Main URL routing
│ └── wsgi.py # WSGI config
├── 📁 accounts/ # User management app
│ ├── models.py # User, UserProfile, Follow models
│ ├── views.py # Profile, authentication, follow views
│ ├── forms.py # Registration and profile forms
│ ├── validators.py # Custom username validation
│ ├── signals.py # Auto profile creation
│ ├── 📁 tests/ # Tests for accounts app
│ └── 📁 migrations/ # Database migrations
├── 📁 posts/ # Posts and content app
│ ├── models.py # Post, Comment, PostLike, Hashtag models
│ ├── views.py # CRUD operations for posts and comments
│ ├── 📁 tests/ # Tests for posts app
│ └── 📁 migrations/ # Database migrations
├── 📁 settings/ # Django settings (base, dev, prod, testing)
│ ├── base.py # Base settings
│ ├── dev.py # Development settings
│ ├── prod.py # Production settings
├── 📁 static/ # Static assets (CSS/JS)
│ ├── 📁 css/ # Stylesheets for each component
│ └── 📁 js/ # JavaScript for interactivity
├── 📁 staticfiles/ # Collected static files (for production)
├── 📁 templates/ # Django templates
│ ├── base.html # Base template with navigation
│ ├── pagination.html # Pagination partial
│ ├── 📁 accounts/ # User-related templates
│ └── 📁 posts/ # Post-related templates
├── 📁 media/ # User uploads (avatars, posts)
├── 📝 README.md # Project documentation
├── 📝 requirements.txt # Python dependencies
└── 🛠️ build.sh # Build/deploy script
- Like Button: Ajax-powered likes with instant visual feedback
- Follow System: Real-time follow/unfollow with counter updates
- Live Search: Instant user search results with debouncing
- Comment Management: Add, edit, delete comments without page refresh
- User Search: Find users by username or name with live results
- Hashtag Discovery: Browse posts by hashtags with grid view
- Profile Discovery: Explore user profiles and their content
- Follow Suggestions: See who users are following/followed by
- Post Counts: Track how many posts each user has shared
- Social Metrics: Real-time follower and following counts
- Engagement Stats: Like and comment counts on posts
- Activity Timestamps: Track when content was created and updated
This project faithfully recreates the early Instagram experience:
- 🎨 Visual Design: Retro gradients, card-based layouts, and classic Instagram aesthetics
- 📸 Photo-Centric: Images are the primary content with simple, clean presentation
- 👥 Social Core: Focus on following friends and discovering content through social connections
- 🏷️ Hashtag Culture: Simple hashtag system for content organization
- 💬 Minimal Comments: Clean, simple commenting system without threading
-
Clone the repository
git clone <repository-url> cd django-instaclone-2010
-
Create virtual environment
python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate
-
Install dependencies
pip install -r requirements.txt
-
Configure environment variables
Create a
.envfile in the project root directory and add the following variables:# Django Configuration DJANGO_SECRET_KEY=your-secret-key-here DJANGO_SETTINGS_MODULE=settings.dev # Cloudinary Configuration (for image hosting) CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name CLOUDINARY_API_KEY=your-cloudinary-api-key CLOUDINARY_API_SECRET=your-cloudinary-api-secret
🔑 How to get these values:
Django Secret Key:
- Generate a new secret key using Django's built-in function:
python -c "from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())"
- Or use online generator: https://djecrety.ir/
Cloudinary Credentials:
- Sign up for free account at: https://cloudinary.com/
- Go to Dashboard → Account Details
- Copy Cloud Name, API Key, and API Secret
- Cloudinary provides free tier with 25GB storage and 25GB bandwidth
-
Run migrations
python manage.py makemigrations python manage.py migrate
-
Create superuser
python manage.py createsuperuser
-
Start development server
python manage.py runserver
- Never commit your
.envfile - Add it to.gitignore - Keep your secret keys secure - Don't share them publicly
- Regenerate keys if they get compromised
- Use different keys for development and production environments
- Register: Create account with username, email, and phone
- Complete Profile: Add avatar and bio header
- Find Friends: Use search to find and follow other users
- Share Content: Upload your first photo with caption and hashtags
- Upload Photo: Choose image file (required)
- Add Caption: Write description with hashtags (#hashtag)
- Auto-Tagging: Hashtags are automatically detected and linked
- Edit Later: Modify captions anytime from post detail page
- Follow Users: Click follow button on profiles or search results
- Explore Feed: See posts from people you follow in chronological order
- Interact: Like posts and leave comments
- Discover: Browse hashtag pages to find new content
This project embodies the simplicity and focus that made early Instagram special:
- 📸 Photography First: Clean, uncluttered interface that highlights photos
- 👥 Social Connection: Easy discovery and interaction with other users
- 🎯 Focused Features: Core functionality without overwhelming complexity
- 🕰️ Nostalgic Feel: Warm gradients and classic design patterns
We welcome contributions! Please:
- Fork the repository
- Create a feature branch
- Follow Django best practices
- Add tests for new features
- Submit a pull request
This project is for educational purposes, recreating the early Instagram experience for learning Django development.
- Instagram: For the original inspiration and design patterns
- Django Community: For the excellent web framework
- Bootstrap Team: For the responsive CSS framework
Built with ❤️ and nostalgia for the golden age of social media