An Instagram-inspired, modern social interaction platform built for learning, scale, and clean architecture.
Social-Mate is a comprehensive full-stack mobile application that mimics the foundational features of modern social media ecosystems like Instagram. The primary motivation underlying this platform wasn't just to build another social app, but to deep-dive into the power of Django and understand precisely how and why tech giants seamlessly scale their backend infrastructure.
- Backend Strategy: Python, Django REST Framework, Django ORM
- Database & Auth: PostgreSQL + Supabase Authentication
- Frontend Ecosystem: React Native (Expo), TypeScript
- DevOps & CI/CD: GitHub Actions
- Secure Authentication: Powered by Supabase, synchronized instantaneously with our Django User models.
- Dynamic Social Feeds: Fully working chronological/algorithmic media feeds.
- User Interactions: A robust Follow/Unfollow mechanism to build networks.
- Post Engagement: Real-time Liking and Bookmark functionalities.
- Story Architecture: Ephemeral storytelling mimicking mainstream social apps.
- End-to-end Encrypted Direct Messaging (WebSockets integration).
- AI-driven feed recommendations.
- Advanced video processing and Reels functionality.
- Comprehensive Admin Analytics Dashboard.
The architectural heart of this project is Django. But why Django? Instagram notoriously scaled to over a billion users while actively leveraging thousands of instances running Python & Django. This project was orchestrated to understand exactly how that feels under the hood, and how to harness it effectively.
Django isn't just a minimal router. By stepping into Django, we instantly gained a powerful ORM (Object-Relational Mapping). The ORM elegantly abstracts raw, injection-prone SQL strings into beautiful Python code, making database interactions fast, secure, and incredibly readable.
Our backend is meticulously divided into logical module "apps" (users, posts, notifications), aggressively enforcing Clean Architecture conventions. In this loosely coupled environment:
- Models strictly handle data integrity, relationships, and schema state.
- Serializers exclusively translate and format complex data into structured RESTful JSON.
- Views/ViewSets act as the security bouncers and workflow managers, delegating business logic correctly.
Frameworks often force you to choose between coding speed or security. Django brings built-in defense mechanisms (CSRF arrays, XSS protection, Password Hashing algorithms). Combined with the Django REST Framework (DRF), we scaffolded scalable, production-grade CRUD endpoints in days rather than weeks—bridging the gap between a startup's need for speed and an enterprise's need for security.
Here's a visual representation of how user actions traverse across our Clean Architecture safely:
sequenceDiagram
participant User as 📱 React Native App
participant DB as 🗄️ Supabase Auth / DB
participant API as ⚙️ Django Engine
participant Internal as 🧠 Django ORM / Logic
User->>DB: 1. Authenticates securely via Supabase JWT
User->>API: 2. Requests Action (Appends Bearer Token)
API->>API: 3. Custom Decrypts & Validates auth claims
API->>Internal: 4. Triggers Clean Business Logic Layer
Internal->>DB: 5. Translates Python to SQL / Fetches Target Entity
DB-->>Internal: 6. Returns Raw PosgreSQL Formatted Data
Internal->>API: 7. DRF Serializer serializes data cleanly
API-->>User: 8. Sends perfectly structured JSON
A high-level overview of the repository's architecture and workspace separation:
Social-Mate/
├── backend/ # Django REST Framework Backend
│ ├── backend_core/ # Main Django project settings & root URLs
│ ├── follows/ # Social graph (follow/unfollow) mechanisms
│ ├── notifications/ # User activity notifications
│ ├── posts/ # Feed, posts, stories, likes & bookmarks
│ ├── users/ # Custom user model & Supabase auth syncing
│ └── sql/ # Raw SQL scripts for Supabase RLS policies
├── frontend/ # React Native (Expo) Frontend
│ ├── app/ # Mobile screens (Expo Router file-based routing)
│ ├── components/ # Reusable UI elements (PostCards, Avatars, etc.)
│ ├── context/ # Global React Context (e.g., AuthContext)
│ ├── hooks/ # Custom React hooks (Theming)
│ ├── lib/ # Core SDKs (Supabase client, API interceptors)
│ ├── constants/ # Design tokens (Colors, Typography, Layout spacing)
│ └── assets/ # App icon, splash screen, and static graphics
└── README.md
Here is a complete look at the Social-Mate Mobile App interface, demonstrating everything from authentication to creating posts and managing your profile.
Onboarding & Auth
|
Sign In / Sign Up
|
Home Feed
|
Search / Explore
|
Create Post
|
Create Group
|
User Profile
|
Profile Settings
|
Story Section
|
Want to hack on this, experiment with our Django REST implementation, or tweak the React Native views? We always welcome exciting contributions!
1. Clone the repository:
git clone https://github.com/thisisouvik/Social-Mate.git
cd Social-Mate2. Setup the Backend (Django):
cd backend
python -m venv .venv
# On Mac/Linux: source .venv/bin/activate
# On Windows: .\.venv\Scripts\Activate.ps1
pip install -r requirements.txt
python manage.py migrate
python manage.py runserver3. Setup the Frontend (React Native): (In a brand new terminal)
cd frontend
npm install
npm run start- Fork the repository and pull it locally.
- Create a Feature Branch related to the issue you want to tackle (
git checkout -b feature/magic-ai-feed). - Commit your distinct changes adhering to standard clean-commit guidelines.
- Push to your origin's branch and open up a Pull Request. We'll review your awesome code!