Smilo β
Smilo is an interactive and fun app designed to spread happiness and positivity by encouraging users to smile. It combines the power of facial recognition technology and gamification to create a playful experience where users can challenge themselves to match smiles. With the simple goal of making the world a happier place, Smilo encourages you to smile more, laugh more, and connect with others through the universal language of joy.
Humans laugh when they think that something is funny. Funny means surprising but not threatening!
Hereβs a high-level system design for `smilo :
π§± SYSTEM OVERVIEW
Frontend: Next.js Backend: Go (API + Auth + Business Logic) ML Service: Python (Facial Expression Analysis) Storage: AWS S3 (Image uploads) Database: PostgreSQL (Relational data) Cache/Optimization: Redis (sessions, bloom filters)
π COMPONENTS & FLOW
π¦ Next.js Frontend - [Design](https://www.neobrutalism.dev/docs)
Landing page (game description, βPlayβ button)
Smile Gallery page (GET /api/smiles)
Match Page (/smile/[hash]):
Loads target image (GET /api/smile/:hash)
Starts webcam
Sends captured frame to ML (via Go β Python)
Displays real-time accuracy bar (via polling or stream)
Toast: "You matched 87%!"
Buttons: [Retake] [Submit Score]
Auth Pages (Login, Signup, Google OAuth)
Upload Page (POST /api/smile/upload)
Profile Page (total score, stats)
Leaderboard (per-smile + global)
π§ ML Service (Python - FastAPI)
POST /analyze:
Input: { reference_image, user_image }
Output: { score: float, landmarks?, debug_img? }
Handles facial landmark detection & similarity scoring
π Go Backend
Auth:
Google OAuth2 / password
Bloom filter for fast "is new user?" checks
JWT for session management
Smile API:
POST /api/smile/upload β generates unique hash + uploads to S3
GET /api/smile/:hash β returns smile metadata
GET /api/smiles β list all public smiles
Match Submission:
POST /api/smile/:hash/submit
Handles image capture
Forwards to ML API
Saves submission + score in DB
Updates user's score (via service)
Leaderboard:
GET /api/smile/:hash/leaderboard
GET /api/leaderboard (global)
Profile Stats:
GET /api/user/:id/profile
ποΈ PostgreSQL Schema (Simplified)
Users: id, name, email, score, smile_count, match_count
SmileTests: id, user_id, image_url, hash, created_at
Submissions: id, smile_id, user_id, score, created_at
(Optional) SmileAttempts: id, smile_id, attempted_by_user_id
βοΈ AWS S3
Stores all smile test images + optional overlays
Signed URL used for upload/download
π§ Scoring System
User score = # successful matches + (# unique people who attempted their smiles Γ 2)
Optional: streak bonuses, challenge ratings, badges
π§° DevOps (for prod readiness)
Dockerized services (Next.js, Go, Python)
Docker Compose for local dev
GitHub Actions (CI)
Hosting:
Frontend: Vercel
Backend: Fly.io / Railway
ML Service: Render / VPS / GPU-enabled host
π DIAGRAM (Described Visually)
User β Next.js β Go API β Python ML API ββββββββββ βββββββββS3 + PostgreSQL ββββββββββ βββββββββRedis (for bloom filter + sessions)