Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a complete frontend-only Nam Vidhya School Management Portal designed to facilitate school management through three role-based portals: Admin, Teacher, and Student. Built using React, TypeScript, and Tailwind CSS, the portal will provide essential features for managing academic tasks without the need for a backend or external APIs.

## CORE FEATURES
1. **Role-Based Portals**: 
   - **Admin**: Manage students, teachers, classes, subjects, attendance, examinations, results, and settings.
   - **Teacher**: Access to manage classes, attendance, marks, assignments, and personal profile.
   - **Student**: View personal profile, attendance, timetable, assignments, and results.

2. **Dashboard Interface**: Responsive dashboards for each role that provide quick access to important metrics and actions relevant to the user's role.

3. **Local CRUD Operations**: Implement local storage for mock data, allowing users to perform create, read, update, and delete operations seamlessly.

4. **Searchable and Filterable Tables**: Tables for viewing students, classes, and assignments that users can easily search and filter.

5. **Notifications and Alerts**: System for displaying important announcements and alerts relevant to users.

6. **CSV Export**: Functionality to export data such as attendance and results in CSV format for easy reporting.

## 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 application will feature a responsive layout with a navy sidebar for navigation, white cards for content display, and a light-grey background. Consistent spacing and clean typography will enhance readability across all devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: Lucide icons for UI elements
- **State Management**: Local storage for mock data and state persistence

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and Lucide icons.
2. **Create Components**: Develop reusable components such as Buttons, Cards, and Forms with the specified typography and styles.
3. **Implement Navigation**: Set up React Router for role-based navigation, ensuring all routes are fully functional.
4. **Develop Role-Based Portals**: Create the Admin, Teacher, and Student portals with their respective dashboards and functionalities.
5. **Local Data Management**: Implement local storage to handle CRUD operations for mock data including students, classes, and assignments.
6. **Design and Styling**: Apply Tailwind CSS for styling, ensuring all components match the specified design aesthetics.
7. **Testing**: Test all functionalities, ensure that the application is responsive, and fix any issues related to routing or data handling.

## USER EXPERIENCE
Users will start at a login page featuring the school logo, name, and role selector. After logging in, they will access their respective dashboards where they can navigate through various functionalities specific to their role. The interface will be intuitive, allowing users to easily find information, manage tasks, and receive notifications, all while maintaining a clean and professional look throughout the application. 

This project aims to deliver a fully functional, minimalist light application that aligns with the user's vision while ensuring a smooth user experience across all devices.