Learn German - iOS Inspired

A modern, interactive German language learning platform built with React and styled with an iOS design language.

Features

• Sleek iOS-Design: Clean interface with glassmorphism effects, smooth animations, and dark mode support.
• Structured Courses: Comprehensive lessons organized into Beginner, Intermediate, and Advanced levels.
• Interactive Exercises: Practice grammar, vocabulary, and phrases with engaging quizzes.
• Progress Tracking: Monitor your daily streaks, points, and learning statistics.
• Gamification: Earn badges and complete daily goals to stay motivated.
• Rich Content: Covers essential topics including:
  • Grammar (Verbs, Cases, Tenses)
  • Vocabulary (Food, Numbers, Business)
  • Phrases & Culture

Tech Stack

• Frontend: React, React Router
• Styling: TailwindCSS
• Animation: Framer Motion
• UI Components: Headless UI, Heroicons
• Charts: Chart.js with React-ChartJS-2
• State Management: React Context API

Getting Started

Prerequisites

• Node.js installed

Installation

1. Clone the repository
2. Install dependencies:

   npm install

Running the App

Start the development server:

npm start

The app will be available at http://localhost:3000.

Project Structure

• src/components: Reusable UI components (Buttons, Cards, Widgets)
• src/contexts: State management (UserDataContext)
• src/pages: Application views (Home, Courses, Lessons, Profile)
• src/styles: Global styles and Tailwind configuration
• src/assets: Static resources