Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web app designed to enhance user interaction with social media posts by modifying existing like, comment, share, and save functionalities. It aims to provide a seamless experience for users, ensuring accurate counters for each interaction while maintaining the current layout and styling of posts.

## CORE FEATURES
1. **Like Counter**: The like counter will increment or decrement by 1 with each click, reflecting the real-time status from the database for each user.
2. **Comment Count**: Displays the actual number of comments associated with each post, ensuring accurate information is presented to users.
3. **Share Counter**: Increments by 1 each time the user shares a post, providing clear visibility of post engagement.
4. **Save/Unsave Functionality**: Updates the save counter based on whether the user has saved or unsaved the post, ensuring a personalized experience.
5. **Persistent State**: All counters will maintain their state even after a page reload, providing a consistent user experience.
6. **Optimistic UI Updates**: The interface will respond immediately to user actions, reflecting changes in real-time without waiting for server confirmation.

## 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 clean presentation of posts with clearly defined sections for likes, comments, shares, and saves, utilizing a card-style format for individual posts.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React Context or Redux for managing the state of user interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using TypeScript and set up Tailwind CSS for styling.
2. **Create Post Component**: Develop a component that displays individual posts, including like, comment, share, and save counters.
3. **Implement State Management**: Set up state management to handle user interactions and ensure that counters are updated in real-time.
4. **API Integration**: Connect to the backend to fetch and update the counters based on user actions.
5. **Optimize UI Updates**: Implement optimistic UI updates to ensure immediate feedback for user interactions.
6. **Testing**: Conduct thorough testing to ensure all functionalities work correctly, especially focusing on user-specific states and persistence.

## USER EXPERIENCE
Users will interact with the application by clicking on the like, comment, share, and save buttons. Each action will provide immediate feedback through UI updates, enhancing engagement. The counters will clearly reflect the user's interactions, ensuring a personalized and responsive experience. The design will remain clutter-free and focused, allowing users to concentrate on the content without distraction.