Website that logs onto another given website and uses ha1 as the institution code and user-given username and password.
Generated Prompt
## APPLICATION OVERVIEW This project is a web application designed to log into another specified website using a provided institution code, username, and password. It enables users to access and complete selected assignments, utilizing the Gemini API key for functionality. The application will also store answers in a database for easy access later, enhancing the user experience and efficiency. ## CORE FEATURES 1. **User Authentication**: Secure login functionality where users can input their institution code, username, and password to access the required website. 2. **Assignment Access**: Ability to fetch and display assignments from the target website once logged in, allowing users to select which assignments to complete. 3. **Automatic Completion**: Integration with the Gemini API to automatically complete selected assignments based on user input or predefined criteria. 4. **Answer Storage**: A database to store completed answers for future reference, ensuring users can easily retrieve their past submissions. 5. **User Dashboard**: A clean interface where users can view their completed assignments and track their progress over time. 6. **Responsive Design**: Ensure the application is fully responsive for both desktop and mobile users, providing a seamless experience across devices. ## 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 structure will include a header for navigation, a main content area for assignments and dashboard functionalities, and a footer with contact information and links. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript. - **Styling**: Tailwind CSS. - **UI Components**: shadcn/ui for enhanced UI elements. - **State Management**: Use React's Context API or a state management library like Redux if required for managing application state. ## IMPLEMENTATION STEPS 1. **Setup Project**: Initialize a new React project with TypeScript using Create React App. Install necessary dependencies including Tailwind CSS and shadcn/ui. 2. **Create Authentication Flow**: Implement user authentication using a form that captures institution code, username, and password. Handle state changes and validations. 3. **Integrate API Functionality**: Develop functions to log in to the target website and fetch assignments using the provided institution code and user credentials. 4. **Build Assignment Display**: Create a component to list assignments fetched from the target site, allowing users to select which ones to complete. 5. **Implement Completion Logic**: Integrate the Gemini API to handle the completion of selected assignments automatically. 6. **Database Setup**: Set up a database (e.g., Firebase, MongoDB) to store completed answers and establish connections to retrieve and display this data in the user dashboard. 7. **Design and Style Components**: Use Tailwind CSS to style the application according to the minimalist design specifications, ensuring responsiveness across different screen sizes. 8. **Testing and Deployment**: Conduct thorough testing of all features, followed by deploying the application to a hosting service (e.g., Vercel, Netlify). ## USER EXPERIENCE Users will interact with a straightforward login interface, entering their credentials to gain access. Once logged in, they will see a list of assignments, which they can select to complete. The application will automatically fill out the assignments using the Gemini API, and users can review their completed work in the dashboard, where they can also access previously stored answers. The clean design ensures that users can easily navigate and use the application without confusion.
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!
