Desktop & mobile compatible website for IELTS Coaching
Generated Prompt
## APPLICATION OVERVIEW This application is a web-based platform designed for IELTS coaching, optimized for both desktop and mobile users. It aims to provide a seamless learning experience with a focus on user engagement and effective study resources. ## CORE FEATURES 1. **User Registration and Profiles**: Users can create accounts to save their progress, access personalized study materials, and track their performance. 2. **Course Catalog**: A comprehensive list of available IELTS preparation courses, including descriptions, duration, and pricing. 3. **Interactive Lessons**: Engaging multimedia lessons that cover all aspects of the IELTS exam, including listening, reading, writing, and speaking. 4. **Practice Tests**: Users can take practice tests that simulate real IELTS exam conditions, with instant feedback and score tracking. 5. **Discussion Forum**: A community space for users to ask questions, share tips, and interact with tutors and peers. 6. **Resource Library**: A collection of study materials, including PDFs, videos, and recommended external resources. ## DESIGN SPECIFICATIONS - **Visual Style**: The application will feature a minimalist aesthetic, emphasizing a clean and simple design that utilizes ample white space. The focus will be on typography to enhance readability and engagement. - **Color Mode**: The light theme will incorporate dark text on light backgrounds, ensuring high contrast and legibility for all users. - **Layout**: The main layout will consist of a top navigation bar with a logo, search bar, and user account access. Below, a grid-based structure will display courses and resources. Each section will have generous spacing to maintain a clean look. - **Typography**: Utilize a sans-serif font such as "Roboto" or "Open Sans" for body text to ensure clarity. Headings will utilize a bolder weight to establish a clear hierarchy, with sufficient spacing between text elements. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS for utility-first styling - **UI Components**: shadcn/ui for pre-built UI components to maintain consistency and speed up development - **State Management**: Use React's Context API or Zustand for managing global state and user sessions. ## IMPLEMENTATION STEPS 1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS. 2. **Create Basic Folder Structure**: Organize components, pages, assets, and stylesheets. 3. **Implement Routing**: Set up React Router for navigating between the home page, course catalog, user profiles, and forums. 4. **Develop Core Features**: - User registration and login functionality with form validation. - Create Course Catalog component displaying courses fetched from a mock API. - Design Interactive Lessons component with multimedia content. - Implement Practice Tests functionality with scoring logic. - Setup Discussion Forum using a simple comment system. - Build Resource Library to allow downloading and viewing of materials. 5. **Design UI Components**: Use shadcn/ui components for headers, buttons, and cards to ensure a cohesive look. 6. **Style Application**: Apply Tailwind CSS classes to achieve the minimalist design, focusing on spacing, typography, and responsive layouts. 7. **Testing and Debugging**: Ensure all features work as intended on both desktop and mobile devices, fixing any bugs encountered. ## USER EXPERIENCE Users will be greeted with an intuitive landing page that invites them to explore available courses. Upon registration, users can easily navigate to their profiles where they can track their progress and access personalized lessons. Each course will provide engaging interactive lessons and practice tests, which will guide users through the IELTS preparation process. The discussion forum will foster community interaction, allowing users to connect and share insights. All elements will be designed to ensure a smooth and responsive experience across devices, prioritizing usability and accessibility.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
