MegaPinterest

Discover endless inspiration in a beautifully crafted Pinterest clone

---

✨ Features

🎯	Pin Discovery Explore millions of high-quality images from Unsplash	📌	Pin Creation Create and share your own pins effortlessly
📋	Board Management Organize pins into custom boards	🔍	Smart Search Find exactly what you're looking for
👤	Google Authentication Secure login with Google OAuth	🌙	Dark/Light Mode Toggle between themes seamlessly
📱	Responsive Design Perfect on all devices	⚡	Lightning Fast Optimized performance with Next.js 15

---

🖼️ Screenshots

---

🛠️ Tech Stack

Frontend	Backend/API	Styling	Tools

---

🏗️ Architecture

🎯 Simple & Effective

This project uses a client-side only architecture with:

• Unsplash API as the sole backend service for images
• Custom Google OAuth implementation for authentication
• Local Storage for data persistence
• No traditional database - keeping it lightweight and fast!

🔄 Data Flow

User Authentication → Google OAuth → Local Storage
Image Data → Unsplash API → React State → UI Components
User Actions → Local Storage → State Updates

---

🚀 Quick Start

Prerequisites

Make sure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/PouyaBirvand/megapinterest.git
   cd megapinterest

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env.local

   Fill in your API keys:

   NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=your-unsplash-access-key
   NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your-secret-key

4. Get your API keys

   • Unsplash API: Visit Unsplash Developers to get your access key
   • Google OAuth: Go to Google Cloud Console to set up OAuth credentials

5. Run the development server

   npm run dev
   # or
   yarn dev

6. Open your browser Navigate to http://localhost:3000

---

📁 Project Structure

megapinterest/
├── 📁 app/                    # Next.js 13+ App Router
│   ├── 📁 auth/              # Authentication pages
│   ├── 📁 boards/            # Board management
│   ├── 📁 explore/           # Explore page
│   ├── 📁 pin/               # Pin details
│   ├── 📁 pin-builder/       # Pin creation
│   ├── 📁 profile/           # User profiles
│   ├── 📁 saved/             # Saved pins
│   └── 📁 settings/          # User settings
├── 📁 components/            # Reusable components
│   ├── 📁 boards/           # Board components
│   ├── 📁 comments/         # Comment system
│   ├── 📁 explore/          # Explore components
│   ├── 📁 home/             # Home page components
│   ├── 📁 layout/           # Layout components
│   ├── 📁 pin/              # Pin components
│   ├── 📁 pin-builder/      # Pin creation components
│   ├── 📁 profile/          # Profile components
│   ├── 📁 saved/            # Saved pins components
│   ├── 📁 settings/         # Settings components
│   └── 📁 ui/               # UI components
├── 📁 contexts/             # React contexts
├── 📁 hooks/                # Custom hooks
│   ├── 📁 boardhooks/       # Board-related hooks
│   ├── 📁 explorehooks/     # Explore-related hooks
│   ├── 📁 pinhooks/         # Pin-related hooks
│   └── useGoogleAuth.ts     # Custom Google Auth hook
├── 📁 lib/                  # Utility functions
└── 📁 types/                # TypeScript types

---

🎯 Key Features Breakdown

🏠 Home Feed

• Infinite scroll masonry layout
• Real-time image loading from Unsplash API
• Smart caching with local storage
• Responsive grid system

📌 Pin Management

• Save pins from Unsplash to personal boards
• Create custom boards and organize pins
• Local storage persistence
• Fast search and filtering

👤 Authentication System

• Custom Google OAuth implementation
• No external auth libraries - built from scratch
• Secure token management
• Persistent login sessions

🎨 UI/UX Excellence

• Pinterest-inspired design
• Smooth animations with Framer Motion
• Dark/Light theme support
• Mobile-first responsive design

---

🔧 Available Scripts

Command	Description
npm run dev	Start development server with Turbopack
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm run format	Format code with Prettier
npm run format:check	Check code formatting

---

🌟 Performance Optimizations

• ⚡ Next.js 15 with Turbopack for faster builds
• 🖼️ Image Optimization with Next.js Image component
• 🔄 Infinite Scrolling for better UX
• 📱 Mobile-first responsive design
• 🎨 Tailwind CSS for optimal styling
• 💾 Local Storage for instant data access
• 🚀 Client-side rendering for fast interactions

---

🔑 API Integration

Unsplash API Features Used:

• Search Photos - Find images by keywords
• Random Photos - Get random high-quality images
• Photo Details - Fetch detailed photo information
• Collections - Browse curated photo collections
• User Photos - Get photos from specific photographers

Custom Google OAuth:

• Manual implementation without external libraries
• Token management with secure storage
• User profile integration
• Session persistence across browser sessions

---

🤝 Contributing

We love contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add some amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👨‍💻 Author

Pouya

---

🙏 Acknowledgments

• Pinterest for the design inspiration
• Unsplash for providing amazing free photos
• Google for OAuth services
• Next.js Team for the amazing framework
• Tailwind CSS for the utility-first CSS framework

---

Made with ❤️ and lots of 🤖

If you found this project helpful, please give it a ⭐