A modern image discovery platform built with Next.js 15.1.4, enabling users to explore, collect, and interact with high-quality images through a seamless interface.
- 🖼️ Image Discovery - Browse through a vast collection of high-quality images
- 📂 Collections - Explore and create curated themed image collections
- 🔐 Authentication - Secure user authentication powered by Supabase
- ❤️ Like System - Save and organize favorite images
- 🔄 Infinite Scrolling - Smooth content loading with React Query
- 📱 Responsive Design - Optimized for all device sizes
- 🌓 Dark Mode - Built-in dark/light theme support
- 🔍 Search - Advanced search for images and collections
- 📝 Contact Form with validation
- 💬 Dynamic FAQ section
- 📞 Contact information display
- 🎨 Modern gradient background
- Framework: Next.js 15.1.4 (App Router)
- Language: TypeScript
- Styling:
- Tailwind CSS for utility-first styling
- shadcn/ui for component library
- Animations: Framer Motion
- State Management: React Query
- Authentication: Supabase Auth
- Database: Supabase
- Image Service: Unsplash API
- Contact Components:
- ContactForm: Form handling with validation
- ContactHero: Hero section for contact page
- ContactInfo: Display contact details
- ContactFAQ: Frequently asked questions
- UI Elements:
- Card components for structured content
- Accordion for expandable FAQ items
src/
├── actions/ # Server actions for API calls
├── app/ # Next.js app router pages
│ └── contact/ # Contact page components
├── components/ # Reusable React components
│ ├── collections/ # Collection-related components
│ ├── contact/ # Contact-specific components
│ ├── forms/ # Form components
│ ├── images/ # Image handling components
│ └── auth/ # Authentication components
├── interfaces/ # TypeScript interfaces
├── lib/ # Utility functions and configurations
└── utils/ # Helper functions
- Node.js (v18 or higher)
- npm or yarn
- Supabase account
- Unsplash API key
- Clone the repository
git clone https://github.com/yourusername/frameflow.git
cd frameflow- Install dependencies
npm install
# or
yarn install- Configure environment variables
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
UNSPLASH_ACCESS_KEY=your_unsplash_access_key- Start the development server
npm run dev
# or
yarn devCollectionsGrid: Masonry grid layout for collectionsCollectionHeader: Collection metadata and actionsCollectionPhotos: Photo grid with lazy loading
ImageCard: Responsive image card with hover effectsImageDetails: Modal with image details and actionsImageLightbox: Fullscreen image viewer with gestures
- Protected routes with middleware
- Social authentication integration
- Profile management system
- Prefer server components for better performance
- Implement proper TypeScript types
- Follow atomic design principles
- Use Tailwind CSS utility classes
- Maintain consistent spacing
- Ensure dark mode compatibility
- Use React Query for remote data
- Implement optimistic updates
- Handle loading and error states
- Implement image lazy loading
- Use proper caching strategies
- Optimize bundle size
We welcome contributions! Please follow these steps:
- Fork the repository
- Create your feature branch
git checkout -b feature/amazing-feature- Commit your changes
git commit -m 'Add amazing feature'- Push to the branch
git push origin feature/amazing-feature- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.