Airly is an image-based social media webapp where people can share posts, like and comment on posts, and discover popular content through a smart ranking algorithm 🧠.
Built as a full-stack webapp with a clean, minimal design inspired by Pinterest, featuring a scalable backend architecture.
- 📸 Image Sharing - Upload and share your moments
- 💖 Smart Engagement - Advanced like and comment system
- 🔍 Intelligent Discovery - AI-powered content ranking
- 👤 User Profiles - Personalized user experiences
- 📱 Responsive Design - Works seamlessly across devices
- 🔐 Secure Authentication - JWT-based user management
Swayam - Passionate Full-Stack Developer 🚀
Building scalable web applications with modern technologies 💻
"Learning by building real-world applications" 💡
I built this as my first full-stack webapp project with a strong focus on:
- 🎯 Backend Mastery - Deep dive into Node.js ecosystem
- 📊 Advanced Queries - MongoDB aggregation pipelines
- 🏗️ System Architecture - Scalable application design
- 🎨 Modern Frontend - React + TypeScript best practices
This project was also created for the Hack Club Athena Award - a "you ship, we ship" initiative! 🏆
| Technology | Purpose | Why I Chose It |
|---|---|---|
 |
Runtime Environment | Developer-friendly, JavaScript ecosystem |
 |
Web Framework | Minimal, flexible, robust |
 |
Database | Document-based, denormalized approach |
 |
Image Storage | Automatic optimization, easy integration |
 |
Authentication | Stateless, secure token-based auth |
| Technology | Purpose | Why I Chose It |
|---|---|---|
 |
UI Library | Component-based, modern ecosystem |
 |
Language | Type safety, better DX |
 |
Build Tool | Fast development, optimized builds |
 |
Styling | Utility-first, rapid UI development |
 |
State Management | Predictable state, persistence |
- 📊 Smart Algorithms: Advanced ranking system with weighted engagement metrics
- 🔍 Text Indexing: Multi-field search across posts and users
- 🛡️ Security: JWT authentication with refresh tokens
- 📱 Responsive: Mobile-first design with Tailwind CSS
- ⚡ Performance: Database indexing and optimized queries
- 🗂️ Organization: Clean folder structure with proper separation of concerns
- 📊 MongoDB Aggregation Pipelines - Complex data processing
- 🔐 JWT Authentication System - Secure user management
- 📁 File Upload Handling - Multer + Cloudinary integration
- 🎯 TypeScript Mastery - Type-safe React development
- 🔗 API Integration - RESTful service architecture
- 📱 State Management - Redux Toolkit with persistence
| Challenge | Solution | Learning |
|---|---|---|
| 🌐 CORS Issues | Proper middleware configuration | Cross-origin security |
| 📤 File Uploads | Multer + Cloudinary pipeline | Media handling patterns |
| 🔍 Complex Queries | MongoDB aggregation mastery | Database optimization |
| 🔑 Token Management | JWT refresh token strategy | Security best practices |
| 🎨 UI Consistency | TypeScript + Tailwind system | Design systems |
🚧 Coming Soon! Screenshots will be added once the application is deployed.
Preview of the beautiful, Pinterest-inspired interface
The popular posts feature implements a algorithm like a ranking system that goes far beyond simple "most liked" sorting. Instead of just counting likes, this algorithm creates a engagement score that considers the quality and type of user interaction.
How the Algorithm Works: we decide stuff on basis of these things -
- Likes (2x weight)
- Comments (1x weight)
- Views (0.5x weight)
- Recency factor - When scores are tied, newer posts get slight preference to keep content fresh.
imagine a post with 10 likes and 5 comments might rank higher than one with 20 likes but no comments. (yes this is an algorithmm)
This algorithm uses MongoDB's aggregation pipeline thingy to calculate scores(likes, comments) in real-time.
multi-field text indexing is something so cool that it takes out stuff out of a mess of data to a request made by a user - that provides intelligent, context-aware search results.
This goes far beyond simple keyword matching to deliver relevant and fast results across different types of content.
I used AI tools strategically and minimally throughout this project for learning and problem-solving:
- 📚 Learning TypeScript patterns and React best practices
- 🧱 Masonry Layout Implementation - Pinterest-style grid system
- 🔍 Complex Aggregation Queries - MongoDB pipeline optimization
- 🐛 Debugging Assistance - Understanding error patterns
- 🧠 Core Logic & Algorithms - All my design and implementation
- 🏛️ System Architecture - Database design and API structure
- 🎨 UI/UX Decisions - Component design and user flows
- 🔧 Problem-Solving Approach - Technical decision-making
AI helped me learn faster, but the creativity and engineering are mine! 💪
git clone https://github.com/swayam03275/Airly.git
cd Airlycd Backend
npm install
# Create environment variables file
cp .env.example .env
# Edit .env file with your actual values (MongoDB URI, JWT secrets, Cloudinary credentials)
# Start the backend server
npm run devThe backend server will start on http://localhost:8000
Open a new terminal window/tab:
cd frontend
npm install
# Create environment variables file
cp .env.example .env
# Edit .env file to set VITE_SERVER_API=http://localhost:8000/api/v1
# Start the frontend server
npm run devThe frontend will start on http://localhost:5173
MONGODB_URI: Your MongoDB connection stringACCESS_TOKEN_SECRET&REFRESH_TOKEN_SECRET: Generate strong random stringsCLOUDINARY_*: Get these from your Cloudinary dashboardUPSTASH_REDIS_REST_URL&UPSTASH_REDIS_REST_TOKEN: Required for feed caching (recommended)
VITE_SERVER_API: Should point to your backend URL (http://localhost:8000/api/v1)
Airly uses Upstash Redis REST caching for feed endpoints to reduce repeated aggregation load on MongoDB and improve response time.
- Feed endpoints are read-heavy and frequently repeated.
- Aggregation pipelines for sorting and ranking are comparatively expensive.
- Redis stores precomputed response payloads for short TTL windows.
Add these values in backend environment configuration:
- UPSTASH_REDIS_REST_URL
- UPSTASH_REDIS_REST_TOKEN
- GET /api/v1/feed?sort=recent
- GET /api/v1/feed?sort=liked
- GET /api/v1/feed?sort=popular
Each cache key includes sort mode, tag, pagination pointer, and user identity segment so personalized flags remain correct.
- Request reaches feed controller.
- Controller builds deterministic cache key from query and user context.
- Redis get is attempted first.
- If key exists, cached payload is returned immediately.
- If key does not exist, MongoDB aggregation pipeline executes.
- Response payload is stored in Redis with TTL.
- Response is sent to the client.
- On tweet create, edit, or delete, related feed cache keys are invalidated.
- Vercel routes /api/v1/* to api/serverless.
- Serverless handler initializes Mongo connection once per warm instance.
- Serverless handler initializes Redis integration in non-blocking safe mode.
- If Redis env is missing or unavailable, app continues without cache.
- Significant latency reduction on repeated feed requests.
- Lower MongoDB query pressure for hot endpoints.
- Faster user-perceived feed loading for repeated sorts and pagination patterns.
- Backend API: Use Postman or similar tools to test API endpoints
- Frontend: Use your browser to test the UI and user flows
- Full Stack: Ensure both servers are running to test the complete application
If using local MongoDB:
# Make sure MongoDB is installed and running
mongodIf using MongoDB Atlas:
- Create a cluster at MongoDB Atlas
- Get your connection string and add it to the backend .env file
/Backend- Node.js/Express API server/frontend- React/TypeScript client application- Both folders have their own package.json and dependencies
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
