Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as a digital resource for fifth-grade students, allowing them to interpret and represent data through various graphical formats, specifically focusing on circular diagrams. The application will be projected on a screen for class use, providing an engaging and interactive experience while teaching essential data interpretation concepts.

## CORE FEATURES
1. **Interactive Graphs**: Users can interact with various types of graphs, including circular diagrams, to better understand data representation.
2. **Data Tables**: Present data in a structured table format that correlates with the graphics to enhance comprehension.
3. **Concept Explanations**: Clear and concise explanations of key concepts related to data interpretation and circular diagrams.
4. **Visual Customization**: Options for users to customize the appearance of graphs (e.g., color schemes) for better engagement.
5. **Printable Resources**: Ability to generate printable versions of the data and graphs for offline review.
6. **Progress Tracking**: Track student engagement and understanding through interactive quizzes or questions related to the graphs.

## 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 consist of a header with navigation, followed by sections for interactive graphs, data tables, concept explanations, and a footer with additional resources and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing state across components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using TypeScript and install Tailwind CSS and shadcn/ui.
2. **Design Layout**: Create the main layout structure with a header, body sections for graphs and data, and a footer.
3. **Integrate Graphing Library**: Choose a suitable library for rendering interactive graphs (e.g., Chart.js or D3.js) and set up components to display circular diagrams.
4. **Develop Data Table Component**: Create a table component to display data corresponding to the graphs.
5. **Implement Concept Explanations**: Develop sections for textual explanations of concepts related to data interpretation.
6. **Add Customization Options**: Implement features allowing users to modify graph colors and styles.
7. **Build Printable Resource Feature**: Create functionality to generate and download printable versions of graphs and tables.
8. **Implement Progress Tracking**: Set up a simple quiz or interaction tracking to monitor student engagement.
9. **Testing**: Conduct thorough testing to ensure all features work as intended and the application is responsive.
10. **Deployment**: Deploy the application to a suitable hosting platform for easy access during classroom sessions.

## USER EXPERIENCE
Users will interact with the application primarily through a projected screen. They will be able to click on interactive elements to explore data representations, view explanations, and engage with quizzes. The design will focus on usability with clear navigation and visual appeal, ensuring that students are captivated and can easily follow along with the presented material. The application will be fully responsive, allowing it to adapt to different screen sizes and ensuring that it remains usable in various classroom settings.