A modern, responsive Instagram clone built with Next.js 15, React 19, and Tailwind CSS. This project replicates the core Instagram experience with a clean, mobile-first design.
🌐 Live Demo: instagram-clone-prod.vercel.app
- Responsive post feed with stories
- Post display with like counts and descriptions
- Instagram-style layout and navigation
- Login and signup page UI
- Form handling with custom hooks
- Grid layout of random posts
- Click to view individual posts
- Responsive design
- Inbox page with message interface
- User chat list display
- Message placeholder UI
- User profile page with stats
- Post grid layout
- Profile image and bio display
- Mobile-first approach
- Tablet and desktop optimized
- Instagram-like navigation
- Framework: Next.js 15 - React framework with App Router
- UI Library: React 19 - Latest React with concurrent features
- Styling: Tailwind CSS - Utility-first CSS framework
- Icons: Custom SVG icons for authentic Instagram feel
- Deployment: Vercel - Optimized for Next.js
instagram-clone/
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication routes
│ │ └── accounts/ # Login & signup pages
│ ├── (main)/ # Main app routes
│ │ ├── explore/ # Explore page
│ │ ├── inbox/ # Messages
│ │ ├── profile/ # User profile
│ │ └── p/[id]/ # Individual post pages
│ └── api/ # API routes
├── components/ # Reusable components
│ ├── Navbar/ # Navigation bar
│ ├── Post/ # Post component
│ ├── Stories/ # Stories component
│ ├── Sidebar/ # Sidebar with suggestions
│ └── Footer/ # Footer component
├── hooks/ # Custom React hooks
├── public/ # Static assets
│ ├── navbar/ # Navigation icons
│ ├── post/ # Post interaction icons
│ └── profile/ # Profile icons
└── styles/ # Global styles
-
Clone the repository
git clone https://github.com/ganbold-adilbish/instagram-clone.git cd instagram-clone -
Install dependencies
npm install # or yarn install # or pnpm install # or bun install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open your browser
Navigate to http://localhost:3000 to see the application.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
- Navbar: Instagram-style navigation with icons
- Sidebar: User suggestions and navigation links
- Posts: Individual post components with interactions
- Stories: Story carousel at the top of the feed
- Feed: Main content area with posts
- Responsive Design: Works on all device sizes
- Instagram-like theming: Clean, modern design
- Smooth layout: Professional user experience
- Clean login and signup forms
- Form state management with custom hooks
- Basic API integration
- Post display with like counts
- Comment and share button UI
- Save post functionality UI
- Responsive design across devices
- Clean navigation between pages
- Professional Instagram-like interface
This project is optimized for deployment on Vercel:
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically on every push
Live Demo: instagram-clone-prod.vercel.app
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- Inspired by Instagram's design and functionality
- Built with modern web technologies for optimal performance
- Optimized for performance and user experience
- Special thanks to the open source community
⭐ Star this repository if you found it helpful!
Made with ❤️ by Ganbold Adilbish