Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Student Grade Calculator is a web application designed to help students calculate and track their grades efficiently. It provides users with an intuitive interface to input their grades, view overall performance, and receive insights on areas for improvement. This application aims to enhance the academic experience by simplifying grade management.

## CORE FEATURES
1. **Grade Input**: Users can easily input their grades for various subjects and assignments.
2. **Average Calculation**: The application automatically calculates the average grade based on the inputted data.
3. **Grade Tracking**: Students can view their grades over time, helping them monitor their academic progress.
4. **Performance Insights**: The app provides insights and suggestions based on the user's grading history to help improve performance.
5. **User Authentication**: Users can create an account and log in to save their grades securely.
6. **Responsive Design**: The application is optimized for use on both desktop and mobile 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 will feature a header for navigation, a hero section for the grade input, a central dashboard for displaying calculated averages and insights, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux for managing user data and grade entries

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a React project with TypeScript and install Tailwind CSS.
2. **Create the File Structure**: Organize components, pages, and styles within the project.
3. **Implement User Authentication**: Set up user registration and login functionalities using a suitable authentication method.
4. **Develop the Grade Input Component**: Create a user-friendly interface for entering grades.
5. **Build the Average Calculation Logic**: Implement functions to calculate and display average grades based on user inputs.
6. **Design the Dashboard**: Create a central dashboard to display user grades, performance insights, and trends.
7. **Ensure Responsiveness**: Utilize Tailwind CSS to make the application responsive across devices.
8. **Test the Application**: Conduct thorough testing to ensure all functionalities work as expected.

## USER EXPERIENCE
Users will start by registering or logging into their accounts. Once logged in, they will be greeted by a clean dashboard where they can input their grades. As they enter data, the application will dynamically update to show averages and insights, encouraging continuous engagement. The minimalist design ensures that users can focus on their academic data without distractions, while responsiveness allows for seamless interaction on both mobile and desktop devices.