SnapNest

A camera-inspired photo discovery and sharing platform
where every capture finds its focus.

---

What is SnapNest?

SnapNest is a full-stack photo-sharing platform in the spirit of Pinterest.
Users can upload, explore, like, save and comment on photos — organised by categories and searchable by keyword.

The project was originally inspired by the JavaScript Mastery ShareMe tutorial, then rebuilt from the ground up with a modern tech stack, a bespoke camera-themed design system, and production-grade patterns.

Live demo: snapnest.mohitsoni.dev (if deployed)

---

Monorepo Structure

SnapNest/
├── frontend/           # Next.js 16 web application
│   └── README.md       # Frontend-specific docs
├── sanity-backend/     # Sanity CMS studio & schemas
│   └── README.md       # Backend-specific docs
└── old/                # Original React + Sanity v2 prototype (archived)

---

Tech Stack

Concern	Technology
Frontend framework	Next.js 16 — App Router, React 19
Styling	Tailwind CSS v4
Language	TypeScript 5
Content backend	Sanity CMS v3
Authentication	Clerk
Image CDN	Sanity CDN
Photo grid	react-masonry-css
Hosting	Vercel (frontend) + Sanity Studio

---

Features

• Masonry photo grid with responsive layout
• Sign in / sign up via Clerk (Google, GitHub SSO supported)
• Upload and delete pins (image URL or file)
• Like and save pins — stored in Sanity
• Nested comment threads per pin
• Category browsing and full-text search
• User profiles showing created & saved pins
• Webhook-driven Clerk → Sanity user sync
• PWA-ready with app manifest
• Fully mobile-responsive

---

Quick Start

1. Clone

git clone https://github.com/sonimohit481/SnapNest.git
cd SnapNest

2. Start the Sanity Studio

cd sanity-backend
npm install
npm run dev          # http://localhost:3333

3. Start the Frontend

cd ../frontend
npm install
cp .env.example .env.local   # fill in your keys
npm run dev          # http://localhost:3000

See each sub-package's README for full environment variable details.

---

Environment Setup (summary)

Variable	Where	Description
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	frontend	Clerk public key
CLERK_SECRET_KEY	frontend	Clerk secret key
CLERK_WEBHOOK_SECRET	frontend	Clerk webhook signing secret
NEXT_PUBLIC_SANITY_PROJECT_ID	frontend	Sanity project
NEXT_PUBLIC_SANITY_DATASET	frontend	Sanity dataset name
SANITY_API_TOKEN	frontend	Sanity token with Editor rights

---

Deployment

Frontend → Vercel

1. Import the frontend/ subdirectory into Vercel.
2. Set all environment variables in the Vercel dashboard.
3. Register the Clerk webhook endpoint:

   https://your-domain.vercel.app/api/webhooks/clerk
   

   Events: user.created, user.updated, user.deleted

Studio → Sanity Hosting

cd sanity-backend
npm run deploy

Add your Vercel production URL to the Sanity CORS allowlist at sanity.io/manage.

---

About the Developer

Mohit Soni — React Native & Frontend Developer
Assistant Manager – Software Development at PPFAS Mutual Fund

Specialises in building scalable fintech mobile applications and modern web interfaces using React Native, React, Next.js, and TypeScript.

Portfolio	mohitsoni.dev
GitHub	github.com/sonimohit481
LinkedIn	linkedin.com/in/mohitsoni481
Twitter / X	@SoniMohitt
Email	sonimohit481@gmail.com

---

License

MIT © Mohit Soni