AcademyOS - modern, interactive, OS-inspired MVP website for a Police Academy Entrance Exam preparation platform (). This version focuses...
Generated Prompt
## APPLICATION OVERVIEW
The project is a web application called "AcademyOS," designed as an interactive platform for Police Academy Entrance Exam preparation. This MVP focuses on delivering a sleek, OS-inspired user interface, emphasizing visual experience and user interaction without implementing the exam question logic.
## CORE FEATURES
1. **Top System Header / Navigation Bar:** Displays the app title "AcademyOS v1.0," a real-time clock, and a cadet profile widget showing user rank, class, and online status.
2. **Main Dashboard / Desktop Window:** Features a hero section with a bold headline ("Master the Police Academy Entrance Exam") and action buttons ("Start Training - Coming Soon", "Explore Curriculum").
3. **Exam Countdown Widget:** A timer that counts down the days, hours, and minutes to the next official admission exam, enhancing urgency and engagement.
4. **Progress & Readiness Panel:** Visual meters and circular charts indicate overall exam readiness, daily study streak, and total study time, providing users with insights into their preparation.
5. **Curriculum & Subjects Overview:** A grid layout showcasing subject cards (e.g., Romanian Language, Foreign Language) with status badges and difficulty indicators, allowing users to track their subjects' readiness.
6. **Schedule & Key Dates Window:** A visual timeline of key admission milestones, helping users stay informed about important dates in their preparation.
## 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 main layout includes a full-screen desktop view with a structured header, main dashboard section, and responsive adjustments for mobile devices.
## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript
- **Styling:** Tailwind CSS
- **UI Components:** shadcn/ui
- **State Management:** Not specifically required for this MVP, but consider using Context API or Zustand for future scalability.
## IMPLEMENTATION STEPS
1. **Set up the React project:** Create a new React application using Create React App with TypeScript template.
2. **Install necessary dependencies:** Add Tailwind CSS, shadcn/ui, and any other required libraries.
3. **Implement the Navigation Bar:** Create a component for the top header with the title, clock, and cadet profile widget.
4. **Build the Main Dashboard:** Develop the dashboard layout including the hero section, exam countdown widget, and the progress panel.
5. **Create Curriculum Overview:** Design the grid layout for subject cards, implementing status badges and difficulty indicators.
6. **Develop the Schedule Window:** Implement a visual timeline for key admission milestones.
7. **Ensure Responsiveness:** Use Tailwind’s utility classes to make sure the layout adapts to mobile screens seamlessly.
8. **Test the UI Interactions:** Implement smooth animations for hover effects, window transitions, and background animations.
## USER EXPERIENCE
Users will interact with the platform through a visually engaging interface that mimics an OS environment. They will be able to navigate easily using the top navigation bar, view their progress at a glance on the dashboard, and stay informed about important exam dates through the timeline. The countdown widget will create anticipation for the exam, while the curriculum overview will motivate users to complete their study modules. Users can also expect fluid interactions, thanks to the implemented animations and responsive design.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!
