You are a senior full-stack engineer.
Generated Prompt
## APPLICATION OVERVIEW Origins is a comprehensive AI-based project recommendation and student support platform designed to assist students in identifying suitable projects based on their skills, personality, and time availability. The application will feature a user-friendly interface that guides students through a structured process, ensuring they receive personalized project recommendations and resources to enhance their learning experience. ## CORE FEATURES 1. **User Profile Creation**: Students can create and manage their profiles, including essential information for personalization. 2. **Skill Input and Detection**: Users can manually input their skills or allow the system to auto-detect skills based on their academic information. 3. **Personality Test**: A brief questionnaire to assess students' strengths and match them with appropriate projects. 4. **AI Project Recommendation Engine**: Utilizes user data to recommend projects that align with individual skills, interests, and availability. 5. **Project Guidance Module**: Provides detailed instructions, resources, and timelines for recommended projects to help students get started. 6. **AI Resume Builder**: Automatically generates a professional resume based on completed projects and user profiles. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The application will feature a clean, simple design with plenty of white space and a focus on typography. - **Color Mode**: Light theme with dark text on light backgrounds for optimal readability. - **Layout**: The main layout will consist of a header with navigation, a central content area for displaying forms and recommendations, and a footer for additional links and contact information. - **Typography**: Use a sans-serif font for body text (e.g., Open Sans) and a bold serif font for headings (e.g., Merriweather) to create a clear visual hierarchy. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for building a robust and scalable frontend. - **Styling**: Tailwind CSS for efficient and responsive design. - **UI Components**: Utilization of shadcn/ui for consistent and modern UI components. - **State Management**: Context API or Redux for managing application state. ## IMPLEMENTATION STEPS 1. **Set Up Project Structure**: Create a new React project using Create React App with TypeScript template. 2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components. 3. **Create User Profile Module**: Implement a form for users to enter their profile information, ensuring data validation and storage. 4. **Skill Input and Detection Module**: Develop functionality for manual skill entry and integration with a backend API for auto-detecting skills. 5. **Implement Personality Test**: Create a component for the personality test with a scoring system that categorizes results. 6. **Build AI Project Recommendation Engine**: Set up the backend API to process user data and generate project recommendations based on defined criteria. 7. **Create Project Guidance Module**: Develop a detailed guidance page for each recommended project with necessary resources and timelines. 8. **Implement AI Resume Builder**: Design the resume builder interface to auto-fill user information and generate a PDF output. 9. **Testing and Optimization**: Conduct thorough testing of all modules for functionality, responsiveness, and user experience. 10. **Deployment**: Prepare the application for deployment on a platform like Vercel or Netlify, ensuring all environment variables are configured correctly. ## USER EXPERIENCE Users will navigate through an intuitive flow starting with creating their profile, followed by inputting skills and taking the personality test. Based on their inputs, they will receive tailored project recommendations, complete with guidance and resources. The application will support users in developing their portfolios through the AI resume builder, ultimately enhancing their academic and professional prospects. The minimalist design ensures a seamless and engaging user experience, allowing students to focus on their learning journey without distractions.
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!
