Pinterest Lite Clone (Iinterest)

A full-stack lite Pinterest-inspired web application built with modern web technologies. Users can create pins, organize them into boards, and discover content from other users.

Features

Core Features

• User Authentication: Secure registration and login with JWT tokens
• Pin Management: Create, view, edit, and delete pins with image upload
• Boards: Organize pins into custom boards
• Comments: Add and view comments on pins
• User Profiles: View user profiles and their pins/boards
• Image Optimization: Image upload and optimization using ImageKit
• Infinite Scroll: Browse pins with infinite scroll gallery

Tech Stack

Backend

• Framework: Fastify
• Language: TypeScript
• Database: MongoDB with Mongoose
• Authentication: JWT (@fastify/jwt)
• File Upload: Multipart support (@fastify/multipart)
• Image Storage: ImageKit
• Image Processing: Sharp
• Validation: Zod

Frontend

• Library: React 19
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• State Management: Zustand
• Data Fetching: Axios, React Query (@tanstack/react-query)
• Form Handling: React Hook Form
• Routing: React Router DOM
• Infinite Scroll: react-infinite-scroll

Prerequisites

• Node.js: v22 or higher
• pnpm: Package manager (v10.18.0 or higher recommended)
• MongoDB: Local instance or MongoDB Atlas connection string
• ImageKit Account: For image hosting and optimization

Installation

2. Install dependencies

Backend:

cd backend
pnpm install

Frontend:

cd client
pnpm install

Configuration

Backend Setup

Create a .env file in the backend directory with the following variables:

# Frontend URL for CORS
CLIENT_URL=http://localhost:5173

# MongoDB Connection
MONGO_URI=mongodb://localhost:27017/pinterest-clone

# JWT Secret (use a strong secret in production)
JWT_SECRET=your_jwt_secret_key_here

# ImageKit Configuration
IK_URL_ENDPOINT=https://ik.imagekit.io/your_account_id/
IK_PUBLIC_KEY=your_imagekit_public_key
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key

Frontend Setup

Create a .env file in the client directory:

# Backend API endpoint
VITE_API_ENDPOINT=http://localhost:3000

# ImageKit endpoint (same as backend)
VITE_URL_IK_ENDPOINT=https://ik.imagekit.io/your_account_id/

Running the Application

Development Mode

Backend (from backend directory):

pnpm dev

The server runs on http://localhost:3000

Frontend (from client directory):

pnpm dev

The application runs on http://localhost:5173

Build for Production

Backend:

cd backend
pnpm build

Frontend:

cd client
pnpm build

API Documentation

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user

Users

• GET /api/users/:id - Get user profile
• PUT /api/users/:id - Update user profile
• GET /api/users/:id/pins - Get user's pins

Pins

• GET /api/pins - Get all pins (with pagination)
• POST /api/pins - Create new pin (protected)
• GET /api/pins/:id - Get pin details
• PUT /api/pins/:id - Update pin (protected)
• DELETE /api/pins/:id - Delete pin (protected)

Boards

• GET /api/boards - Get all boards
• POST /api/boards - Create new board (protected)
• GET /api/boards/:id - Get board details
• PUT /api/boards/:id - Update board (protected)
• DELETE /api/boards/:id - Delete board (protected)
• POST /api/boards/:id/pins - Add pin to board (protected)

Comments

• GET /api/pins/:id/comments - Get pin comments
• POST /api/pins/:id/comments - Create comment (protected)
• DELETE /api/comments/:id - Delete comment (protected)

Frontend Features

Pages

• Home - Browse all pins with infinite scroll
• Pin Detail - View pin details, comments, and related information
• Create - Create new pins with image upload and customization
• Profile - User profile with tabs for posted pins, saved pins, and boards
• Authentication - Simple Login and registration

Development Guidelines

Adding New Features

1. Backend: Create a new module in src/modules/ following the existing pattern (controller, service, route)
2. Frontend: Add components in src/components/ and pages in src/pages/
3. Types: Update types in src/types/ and backend src/types/dtos.ts
4. Services: Create API service in src/services/ for API calls