Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Gridly is a playful and vibrant web application designed as an MVP for a photo-sharing platform inspired by Instagram. The application focuses on essential social media features, allowing users to upload photos, follow others, and interact seamlessly. This engaging platform encourages users to share their moments while maintaining a minimalist and user-friendly interface.

## CORE FEATURES
- **User Authentication**: Users can sign up and log in using their email, ensuring secure access to their profiles and content.
- **Photo Feed**: A visually appealing grid layout displays recent posts from users that a user follows, facilitating easy browsing.
- **Photo Upload**: Users can upload single images with accompanying captions and location tags, enhancing the sharing experience.
- **User Profiles**: Each user has a personalized profile page that showcases their bio, follower count, and a grid of their posts.
- **Follow System**: Users can follow and unfollow others, with real-time updates to their follower counts.
- **Like & Comment**: Basic engagement features allow users to like and comment on posts, fostering interaction within the community.

## 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.
- **Layout**: 
  - **Header**: Features the Gridly logo, a search icon, and notifications.
  - **Main Content**: Route-based content displaying the feed, user profiles, and search functionality.
  - **Bottom Navigation**: Icons for Home, Search, Upload (+), and Profile.
- **Typography**: Use **Quicksand** for all text, ensuring a modern and friendly appearance.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS with a custom color palette
- **UI Components**: Utilize shadcn/ui components customized to fit Gridly's branding
- **State Management**: Use React hooks and context for managing user state

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling.
2. **Create Authentication**: Implement user authentication using Supabase Auth for signup and login forms.
3. **Design Layout**: Construct the main layout with a header, bottom navigation, and route-based content structure.
4. **Develop Core Features**:
   - **HomePage**: Implement infinite scrolling for the photo feed showcasing posts from followed users.
   - **PostCard Component**: Create a reusable component for displaying individual posts, including the image, caption, and like/comment buttons.
   - **ProfilePage**: Build user profile pages featuring a grid of posts, follow button, and user stats.
   - **UploadModal**: Design a modal for photo uploads, including caption and location inputs.
   - **SearchPage**: Implement a simple user search functionality.
4. **Set Up Database**: Configure Supabase to manage user profiles, posts, likes, comments, and follows using the provided database schema.
5. **Styling and Animations**: Apply Tailwind CSS for styling and integrate framer-motion for smooth animations and transitions.
6. **Testing and Optimization**: Conduct thorough testing of user workflows, ensuring a seamless experience and responsive design.

## USER EXPERIENCE
Users will begin their journey with an onboarding process that includes email signup, profile setup, and follow suggestions. Daily interactions involve browsing the photo feed, liking or commenting on posts, and uploading new content. Users can discover new profiles through the search feature, follow accounts of interest, and create engaging content by uploading photos with captions. The overall experience is designed to be intuitive, encouraging user engagement and social interaction within the Gridly community.