Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
PunchPicks is a full-stack web application designed for UFC fans to engage in fantasy predictions. Users can select fight winners, earn points based on their accuracy, and compete on leaderboards. The platform aims to provide a fast, simple, and engaging experience for users.

## CORE FEATURES
- **Upcoming Events**: Users can view a list of all upcoming UFC events along with their respective fight cards.
- **Fight Predictions**: Users can make predictions for each fight, selecting a winner and optionally specifying the method, round, and confidence level.
- **Points System**: Users earn points based on the accuracy of their predictions, with bonuses for additional details provided.
- **Leaderboards**: A competitive leaderboard displays user rankings based on the points earned from predictions, fostering a sense of competition.
- **User Profiles**: Users can create and manage their profiles to track their predictions and scores over time.

## 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 top navigation bar, a hero section for upcoming events, a dedicated area for fight predictions, and a leaderboard section. Each section will be clearly defined with sufficient spacing to enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux Toolkit for managing global state

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS, Redux Toolkit, and shadcn/ui for UI components.
3. **Design Database Schema**: Define relational schemas for fighters, events, fights, users, predictions, and leaderboard entries.
4. **Create API Endpoints**: Set up backend services to handle CRUD operations for users, predictions, and event data ingestion from UFCStats.
5. **Implement Data Ingestion System**: Develop functionality to scrape UFC data and store it in the database, handling failures and normalizing data.
6. **Build User Authentication**: Create user registration and login flows to manage user accounts securely.
7. **Develop Core Features**: Implement the upcoming events display, fight predictions interface, points system, and leaderboard functionality.
8. **Design Frontend Layout**: Structure the application using the specified design guidelines, ensuring responsiveness and a mobile-first design approach.
9. **Testing and Debugging**: Conduct thorough testing of all features and fix any identified bugs.
10. **Deployment**: Deploy the application to a suitable hosting platform (e.g., Vercel, Heroku).

## USER EXPERIENCE
Users will have a straightforward journey from viewing upcoming UFC events to making predictions and tracking their scores on the leaderboard. The application will provide fast interactions and clear visual feedback. Notifications will alert users of score updates, and the leaderboard will dynamically update as fights conclude, enhancing engagement and competition among users.