A Demo Project – Instagram-like photo sharing application built in 24 hours as part of a coding challenge

About

📸 PicShare project was built as part of a coding challenge to demonstrate full-stack development skills. The task was to create a modern Instagram-like photo sharing application with full functionality in a limited timeframe.

Live Demo

🔗 View Live Application

Demo version on Vercel with authentication disabled — guest mode only.

Development Story

Timeline: Built in ~24 hours
Challenge: Create a feature-complete demo social media app from scratch. Afterwards, I made several commits (linter/formatter, cascading data deletion on profile removal, real-time updates) to harden the app.

Development Process:

• v0.dev - Used for rapid UI prototyping and component generation
• Cursor + Claude - AI-assisted development for debugging, optimization, and code refinement
• Manual refinement - Custom logic, performance optimizations, and UX improvements

✨ Key Features

• 🔐 Authentication - Email/password signup and login
• 📸 Photo Upload - Drag & drop with file validation (5MB limit)
• 🖼️ Image Gallery - Responsive grid layout with infinite scroll
• ❤️ Social Features - Like and comment on posts in real-time
• 🌙 Dark/Light Mode - System preference support with manual toggle
• 📱 Responsive Design - Mobile-first approach, works on all devices
• ⚡ Real-time Updates - Live likes, comments, and new posts
• 🎨 Modern UI - Glassmorphism effects, smooth animations

Tech Stack

Frontend:

• Next.js 15 with App Router
• TypeScript (strict mode)
• Tailwind CSS + shadcn/ui components
• React Hook Form + Zod validation
• Lucide React icons

Backend:

• Supabase - Database, Auth, Storage, Real-time subscriptions
• PostgreSQL with Row Level Security (RLS)
• Supabase Storage for image hosting

Performance & UX:

• Image optimization with next/image
• Component memoization for performance
• Loading states and skeleton components
• Error boundaries and proper error handling

Architecture Highlights

• Clean separation of concerns - hooks/, components/, lib/ structure
• Custom React hooks - Reusable business logic
• TypeScript interfaces - Full type safety throughout
• Performance optimized - Memoized components, lazy loading
• Real-time architecture - Supabase subscriptions for live updates

For Developers

For development setup, deployment instructions, and technical details, see DEVELOPMENT.md.

MIT LICENSE

⭐ Support

If this project helped you learn something new, please consider:

• ⭐ Starring this repository
• 💖 Sponsoring my open source works: