https://github.com/ashbuk/pic-share
Image sharing instagram-like app
https://github.com/ashbuk/pic-share
nextjs shadcn-ui supabase typescript vercel webapp
Last synced: about 2 months ago
JSON representation
Image sharing instagram-like app
- Host: GitHub
- URL: https://github.com/ashbuk/pic-share
- Owner: AshBuk
- Created: 2025-08-19T18:27:32.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-28T12:03:03.000Z (10 months ago)
- Last Synced: 2025-08-28T19:26:38.943Z (10 months ago)
- Topics: nextjs, shadcn-ui, supabase, typescript, vercel, webapp
- Language: TypeScript
- Homepage: https://pics-share.vercel.app
- Size: 347 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> A Demo Project – Instagram-like photo sharing application built in 24 hours as part of a coding challenge
[](https://pics-share.vercel.app)
[](https://supabase.com/)
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](https://ui.shadcn.com/)
## 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](https://pics-share.vercel.app)**
_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](./DEVELOPMENT.md).
## MIT [LICENSE](LICENSE)
## ⭐ Support
If this project helped you learn something new, please consider:
- ⭐ **Starring this repository**
- 💖 **Sponsoring** my open source works:
[](https://github.com/sponsors/AshBuk) [](https://www.paypal.com/donate/?hosted_button_id=R3HZH8DX7SCJG)