Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a responsive web application designed for group voting and participation tracking. It features a clean, user-friendly interface similar to group management apps. The main purpose is to facilitate real-time participation monitoring and enable users to manage group votes efficiently.

## CORE FEATURES
1. **Real-time Participation Tracking**: Display participation status with three categories—Yes, No, and Pending—using interactive cards that update automatically.
2. **Member Management**: Users can add new members, with a simple input field and an "Add" button, along with a list showing each member's voting status and options.
3. **Voting Status Update**: Each member can change their voting status with designated buttons, which visually highlight the active selection.
4. **Automatic Counter Updates**: The app recalculates and displays the total number of confirmed votes in real-time.
5. **Responsive Design**: The interface adapts for mobile and desktop users, ensuring an optimal experience regardless of the device.
6. **Chat Functionality**: Users can communicate within the app through a dedicated chat tab.

## 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 features a vertical arrangement for mobile with large buttons and ample spacing, and a centered, clean layout for desktop.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for modern component design.
- **State Management**: React's built-in state management or a library like Redux if needed for complex state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for UI components.
3. **Create Components**:
   - Build the main screen component for group management, including the header and participation section with cards.
   - Develop a member card component featuring avatar, name, and action buttons.
   - Implement the chat functionality as a separate tab.
4. **State Management**: Set up local state to manage member data and voting statuses.
5. **Implement Responsiveness**: Utilize Tailwind CSS classes to ensure the app is mobile-first and responsive to different screen sizes.
6. **Testing and Debugging**: Test the application for functionality and usability, fixing any bugs that arise.

## USER EXPERIENCE
Users will interact with the application by viewing the main screen that prominently displays the participation status. They can add members easily, change voting statuses with intuitive buttons, and see real-time updates on participation counts. The chat feature enables smooth communication among members, ensuring a collaborative environment. The minimalist design enhances focus on key actions and information, making the app easy to navigate.