Secret ask - Tolong buatkan saya tampilan layar web app yang saya rancang namanya itu aplikasi untuk interaksi dikelas, membantu pelajar yang...
Generated Prompt
## APPLICATION OVERVIEW "Secret Ask" is a web application designed to facilitate classroom interactions, particularly for introverted students who prefer to ask questions anonymously. This platform allows students to engage without the fear of judgment, enabling a more inclusive learning environment. ## CORE FEATURES 1. **Photo Upload for Questions**: Students can upload images to accompany their questions, enhancing clarity and context. 2. **Profanity Filter**: An automatic system that screens and filters inappropriate language, ensuring a respectful environment. 3. **Question Grouping**: Similar questions are grouped together, allowing for efficiency in addressing common inquiries. 4. **Panic Button**: A quick-access feature for students to signal if they are struggling to keep up with the material. 5. **Unique Character Names**: Each student receives a unique pseudonym to protect their identity while asking questions. 6. **Material Difficulty Mapping**: Students can report which topics they find challenging, creating a visual map of difficult subjects for educators. 7. **Material Upload by Educators**: Teachers have the capability to add supplementary material directly to the web app, enhancing resource availability. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist with a clean and simple design, emphasizing ample white space to create an inviting atmosphere. The interface focuses on clear typography for easy readability. - **Color Mode**: Light theme featuring dark text on light backgrounds to ensure high contrast and readability. - **Layout**: A simple two-column layout for the main dashboard. The left column for navigation (with options for students and teachers), and the right column displaying content based on user selection. - **Typography**: - Primary Font: Inter or Roboto for clean, modern text. - Headings: Bold and larger sizes to create a visual hierarchy. - Body text: Regular weight for easy reading, with appropriate line heights for better legibility. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for strong type checking and component reusability. - **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design iterations. - **UI Components**: Utilize shadcn/ui for pre-designed components that maintain a consistent look and feel. - **State Management**: Consider using Zustand or Redux for managing global application state if needed. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS. 2. **Create Basic Components**: Develop core components such as Header, Sidebar, Question Card, and Upload Button using shadcn/ui. 3. **Design Authentication Flow**: Implement login screens for both teachers and students with appropriate routes. 4. **Develop Core Features**: - Implement the photo upload feature with a preview option. - Integrate the profanity filter during question submissions. - Create a grouping algorithm for similar questions. - Add the panic button functionality. - Generate unique character names upon user registration. - Build the material difficulty mapping interface. - Enable educators to upload and manage materials. 5. **User Interface Design**: Apply Tailwind CSS classes to ensure adherence to the minimalist design principles outlined. 6. **Testing**: Conduct user testing to gather feedback on functionality and user experience, making necessary adjustments. ## USER EXPERIENCE The user experience is designed to be intuitive. Upon entering the app, users will choose their role (teacher or student). Students will be greeted with a clean dashboard where they can easily navigate to upload questions, view grouped inquiries, and access the panic button if needed. Teachers will have a separate dashboard to add materials and view reports on difficult topics. The overall flow is seamless, ensuring that both students and teachers can interact efficiently within the application. By following this structured prompt, "Secret Ask" will embody a minimalist design while fulfilling its purpose of enhancing classroom communication.
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!
