Frontend Engineer Interview Task

This project is a frontend implementation of the provided UI screens for the interview assignment.
The goal was to recreate the designs with pixel-close accuracy, clean component structure, and reasonable interactivity using a modern frontend stack.

---

🛠 Tech Stack

• React (Vite)
• JavaScript
• Tailwind CSS
• React Router DOM
• lucide-react (icons)

---

📱 Implemented Screens

1. Home Screen

• User dashboard layout
• Story cards
• Bottom navigation bar
• Responsive mobile-first layout

2. Now Playing (Audio Story Player)

• Story artwork
• Title and description
• Audio control UI
• Progress bar
• Action buttons

3. Craft a Custom Quiz (Learn Tab)

• Topic selection
• Difficulty selection
• Conditional “Generate Quiz” button
• Step-based UI structure

---

🧭 Navigation & Page Flow

This project uses React Router for navigation.

Action	Route
Open Home Screen	/
Click on a story card	/player
Click Learn in bottom navigation	/learn

How pages are accessed

• Home → Now Playing
  Clicking any story card on the Home screen navigates to the Now Playing screen.

• Quiz Builder
  Accessible from the Learn tab in the bottom navigation.

• Bottom Navigation
  Present for switching between main sections of the app.

  🚀 Live website link

  https://speakgenie-psi.vercel.app/