Lovable Prompt Creator - AI Prompt Generator

- - ## APPLICATION OVERVIEW
This web application is designed for language learning, specifically focusing on teaching English. It allows users to log in with specific credentials, receive daily lessons, and complete simple assessments to measure their progress. The application is interactive and optimized for mobile use, providing a straightforward and engaging learning experience.

## CORE FEATURES
1. **User Authentication**: Users (Omar and Dua) can log in using a designated access code (123) to access their lessons and track their progress.
2. **Daily Lessons**: The application provides a new English lesson each day, ensuring continuous learning and engagement.
3. **Quizzes and Assessments**: At the end of each day, users receive a simple quiz to evaluate their understanding of the lesson content.
4. **Progress Tracking Dashboard**: A personalized dashboard for each user to monitor their learning progress over time, showcasing completed lessons and quiz scores.
5. **Responsive Design**: The application is optimized for mobile devices, ensuring a seamless user experience across different screen sizes.
6. **Online Accessibility**: The application is fully functional online, allowing users to learn from anywhere at any time.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout consists of a top navigation bar with login options, a main content area for lessons and quizzes, and a sidebar for progress tracking.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React Context or Redux for managing user data and progress.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Authentication Module**: Implement a simple login system that verifies user credentials.
4. **Develop Lesson Module**: Create a component to display daily lessons, ensuring it fetches data from a predefined source.
5. **Build Quiz Component**: Develop a quiz component that presents questions based on the daily lesson and captures user responses.
6. **Implement Progress Tracking**: Create a dashboard that displays user progress, including completed lessons and quiz scores.
7. **Ensure Responsiveness**: Use Tailwind CSS utilities to make the application responsive for mobile devices.
8. **Test Functionality**: Conduct thorough testing to ensure all features work seamlessly, focusing on user interactions and experience.

## USER EXPERIENCE
Users will log in using their credentials, which will lead them to their personalized dashboard. Each day, they will see a new lesson displayed prominently, with a clear call to action to start learning. After completing the lesson, users will take a quiz that is straightforward and intuitive, with immediate feedback on their performance. The dashboard will allow them to easily track their progress, motivating them to continue their learning journey. 

This fully functional minimalist application aligns with the user’s vision and offers a clean and engaging interface for effective language learning.