Skip to content

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)