Contact person: Business Client

Phone:Show

Email:Show

Location: India

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"---
Project Title

FunLearn – Emotion-Aware Learning Web App (Mini Project with Modernistic UI, Webcam/Image/Video Support)


---

Short Description

Build a simple, modernistic, and attractive web app called FunLearn within 5 days. While a child is learning, the webcam remains ON to detect emotions (also support image/video uploads). Based on the detected emotion the app suggests or switches to one of 5–6 simple learning paths (Math, Science, Reading, Art, Games, Mind Relax). Focus: working demo + beautiful modern UI (no project report).


---

Key Requirements (concise)

1) Emotion Detection

Browser-based: [login to view URL] or [login to view URL]

Inputs: Live webcam, Image upload, Short video upload (5–10s)

Emotions: Happy, Sad, Confused, Bored, Angry, Neutral

Real-time display: emoji + label


2) Adaptive Learning Paths (5–6)

Math Magic (quizzes)

Science Spark (facts/visuals)

Reading Room (short texts/word games)

Creative Corner (drawing/coloring)

Fun Zone (puzzles/games)

Mind Relax (breathing/short calm activity)

Emotion → path suggestion / auto-switch logic


3) Modernistic & Attractive Design (required)

Look & feel: sleek, modern, playful — not childish clipart. Clean layouts + playful accents.

Typography: Nunito (headings) + Open Sans (body) — large, readable.

Color system: refined palette with gradients and accent pops (primary blue + warm accent).

UI elements: rounded cards (2xl), soft shadows, micro-interactions, smooth transitions (use Framer Motion or CSS transitions).

Visuals: simple vector illustrations, animated icons, subtle motion when emotion changes (confetti / calming pulse).

Layout: tablet-first responsive, big touch targets, high contrast for accessibility.

UX cues: clear camera permission prompt, onboarding hint, instant feedback on emotion change.

Performance: lightweight animations, lazy loaded models, keep mobile lag minimal.


4) Tech Stack (recommended)

Frontend: React + Vite + Tailwind CSS

Emotion: [login to view URL] / [login to view URL] (browser)

Optional: Web Speech API for voice feedback

Hosting: Vercel / Netlify



---

5-Day Implementation Plan

Day Focus

Day 1 Project skeleton, UI layout, color system, fonts, basic routing
Day 2 Webcam integration + Face-API (real-time detection)
Day 3 Image & video upload detection; basic learning path pages
Day 4 Connect emotion → suggestion logic; style UI + animations
Day 5 Test on desktop/tablet, performance tuning, deploy demo



---

Deliverables

Working hosted demo (web app) with webcam + image + video emotion detection

5–6 simple learning paths tied to emotion logic

Attractive modern UI (fonts, palette, animations)

Source code (React project)

(No written report)



---
Skills Required

React.js (UI + routing)

[login to view URL] / [login to view URL] (browser integration)

HTML/CSS/Tailwind, basic animation (Framer Motion or CSS)

Optional: Web Speech API" (client-provided description)