ConnectHub – Mini Social Media Platform

ConnectHub is a modern, responsive, full-stack mini social media web application built with Python (Django 6), SQLite, HTML5, CSS3, and Vanilla JavaScript.

The platform is designed to provide a fluid, seamless user experience inspired by contemporary social networks like Threads, Twitter/X, and Instagram—powered by asynchronous Fetch API interactions, persistent Light/Dark themes, and robust database-backed relationships.

---

🌟 Key Features

1. User Authentication & Session Security

• Dual-Mode Login: Sign in using either your username or your email address.
• User Registration: Real-time validation for unique usernames, unique emails, and password confirmation.
• Session Authentication: Secure session-based auth with PBKDF2 password hashing.
• Protected Views: Decorator-enforced authorization across all internal routes.
• Quick Demo Credential Autofill: Fast-switch buttons to test pre-seeded demo accounts with one click.

2. User Profiles & Social Graph

• Dynamic Profile Pages at /profile/<username>/.
• Profile picture uploads, editable bio, location, and website link.
• Live counters for Posts, Followers, and Following.
• Follow / Unfollow System: Asynchronous follow toggle preventing self-follows and duplicate relationships, with immediate dynamic follower counter updates.

3. Interactive Home Feed & Exploration

• Dual Feed Modes:
  • Following Feed: Personalized feed showing posts from users you follow plus your own posts.
  • Explore Feed: Global feed showcasing posts from all creators across the platform.
• Rich Post Cards: Author avatar, display name, handle, humanized relative timestamps (naturaltime), optional attached images, and captions.
• Inline Post Composer & Modal Composer: Create posts directly from the feed or via a modal dialog with instant image previews.
• Owner-Only Deletion: Secure deletion buttons for posts and comments restricted strictly to their creators.

4. Like & Comment Systems (Asynchronous AJAX)

• Like / Unlike Toggle: Optimistic heart pop animation, duplicate like prevention via database unique constraints, and real-time counter updates.
• Instant Commenting: Post and delete comments dynamically without refreshing the page.
• Comment Metadata: Author avatar, profile link, timestamp, and delete actions for authors.

5. Instant Live Search

• Debounced Asynchronous Search: Live suggestions dropdown as you type in the search bar.
• Full Search Results Page: Filter creators by username, full name, or keywords in their bio.
• Inline Follow Actions: Follow or unfollow users directly from search results.

6. Light & Dark Mode

• Persistent Theme Switching: Toggle between ☀️ Light Mode and 🌙 Dark Mode.
• Stored in localStorage and automatically respects user OS color scheme preferences.

---

🛠️ Technology Stack

Layer	Technology
Backend Framework	Django 6.1 (Python 3.14)
Database	SQLite with Django ORM
Image Processing	Pillow (PIL)
Frontend Markup	HTML5 Semantic Elements
Styling	Modern CSS3 (Custom Properties, Flexbox, Grid, Glassmorphism)
Client-side Scripting	Vanilla JavaScript (ES6+, Fetch API, DOM APIs)
Icons	Custom Inline SVG Icons

---

📁 Project Structure

connecthub/
│
├── manage.py                          # Django management CLI utility
├── requirements.txt                   # Python package dependencies
├── README.md                          # Project documentation
│
├── connecthub/                        # Project configuration module
│   ├── __init__.py
│   ├── settings.py                   # App settings, DB, static/media paths
│   ├── urls.py                       # Root URL routing & media serving
│   ├── wsgi.py                       # WSGI deployment entry point
│   └── asgi.py                       # ASGI deployment entry point
│
├── social/                            # Core Social Media Application
│   ├── migrations/                   # Database migrations
│   ├── __init__.py
│   ├── admin.py                      # Django Admin site registrations
│   ├── apps.py                       # App configuration & signal registration
│   ├── context_processors.py         # Global template context (suggested users)
│   ├── forms.py                      # Forms with validation (auth, post, profile)
│   ├── models.py                     # Profile, Post, Comment, Like, Follow models
│   ├── signals.py                    # Post-save user signal for auto-creating Profile
│   ├── urls.py                       # Application route definitions
│   ├── views.py                      # Views for Auth, Feeds, CRUD, and AJAX API
│   └── management/
│       └── commands/
│           └── seed_data.py          # Demo data seeding command
│
├── templates/                         # HTML5 Templates
│   ├── base.html                     # Base layout (sidebar, nav, modal, toasts)
│   ├── home.html                     # Main feed, composer, post cards
│   ├── profile.html                  # User profile, statistics, post list
│   ├── edit_profile.html             # Profile editor with photo preview
│   ├── create_post.html              # Standalone post creation page
│   ├── search.html                   # User search page
│   ├── login.html                    # Dual username/email login page
│   └── register.html                 # Registration page
│
├── static/                            # Static Assets
│   ├── css/
│   │   └── style.css                 # Responsive stylesheet & theme tokens
│   ├── js/
│   │   └── app.js                    # Fetch API client, theme, modals, toasts
│   └── images/
│       └── default-avatar.svg        # Default user avatar fallback
│
└── media/                             # User Uploads Directory
    ├── profile_pics/                 # Uploaded profile avatars
    └── posts/                        # Uploaded post images

---

🚀 Getting Started & Installation

Prerequisites

• Python 3.10+ installed on your system.
• Git (optional).

1. Clone or Navigate to the Project Directory

cd C:\Users\ABHINAY SHARAD UGALE\.gemini\antigravity\scratch\connecthub

2. (Optional) Create & Activate a Virtual Environment

# Create virtual environment
python -m venv venv

# Activate on Windows (PowerShell):
venv\Scripts\Activate.ps1

# Or activate on Windows (CMD):
venv\Scripts\activate.bat

# Or on Linux / macOS:
source venv/bin/activate

3. Install Dependencies

pip install -r requirements.txt

4. Run Migrations

python manage.py makemigrations
python manage.py migrate

5. Seed Realistic Demo Data (Recommended)

ConnectHub includes a built-in management command that generates sample users, gradient post cards, comments, likes, and follower relationships:

python manage.py seed_data

6. Create a Superuser (Optional)

If you did not run seed_data or wish to create your own custom admin:

python manage.py createsuperuser

7. Start the Development Server

python manage.py runserver

Open your browser and navigate to: http://127.0.0.1:8000/

---

🔑 Demo Account Credentials

When using python manage.py seed_data, the following test accounts are pre-configured:

Username	Email	Password	Role / Bio
abhinay	abhinay@connecthub.com	password123	Full-stack Engineer & Creator
sarah_dev	sarah@connecthub.com	password123	Frontend Architect
alex_design	alex@connecthub.com	password123	UI/UX Product Designer
emily_photo	emily@connecthub.com	password123	Landscape Photographer
tech_guru	guru@connecthub.com	password123	Cloud & DevOps Specialist
admin	admin@connecthub.local	admin123	Django Superuser / Admin

Tip

The Login page includes one-click ⚡ Quick Demo Logins chips to auto-fill credentials instantly!

---

🔒 Security Best Practices Implemented

• CSRF Defense: All POST requests (including asynchronous JavaScript Fetch calls) pass the X-CSRFToken verification header.
• Strict Authorization: Post and comment deletion endpoints check ownership at the database level (author == request.user), returning HTTP 403 Forbidden on unauthorized attempts.
• Unique Constraints: Database-level unique constraints (unique_post_like, unique_user_follow) ensure no duplicate likes or follow records can exist.
• Media Validation: Client and server-side validation enforces image file types and size thresholds (maximum 5MB for avatars, 8MB for post images).
• Safe HTML Escaping: Client-rendered comment items sanitize all user inputs through DOM text node encoding to prevent XSS.

---

📸 Screenshots & UI Preview

View	Description
Home Feed	Centered modern feed with left sidebar navigation, top composer, like/comment actions, and right suggested users
Profile Page	User header banner, statistics counter, dynamic follow button, bio details, and user posts
Dark Mode	High-contrast dark theme with glowing accents and smooth CSS transitions
Search View	Live debounced creator search with instant follow toggles

---

🔮 Future Enhancements

• Direct private messaging / chat using WebSockets (Django Channels).
• Bookmark / Save post functionality.
• Hashtags (#django, #webdev) and trending topics engine.
• Push and in-app notifications drawer for likes and comments.