Vibe Snap is a dynamic social media platform designed to help users easily share their selfies, images, and videos with friends, family, and followers. Whether you're capturing life’s special moments, creating fun content, or sharing your creative projects, Vibe Snap makes it simple to upload, explore, and engage with content.
Explore the live project - https://vibe-snap-orpin.vercel.app/
- Selfie Capture: Take and upload selfies directly from the app to share your moments instantly.
- Image and Video Sharing: Upload your photos and videos to share with your followers.
- Interactive Feeds: Scroll through personalized feeds to stay updated with posts from friends and people.
- Infinite Scrolling: Enjoy seamless browsing with infinite scrolling, where new posts are automatically loaded as you scroll.
- Mute and Play Video on Viewport: Videos automatically mute when not in view and play/mute when clicked, just like Instagram’s video feature.
- Like and Share: Engage with posts by liking and sharing them with your network.
- User Profiles: Create and customize your own profile to showcase your uploaded content and interact with others.
- Responsive Design: Access Vibe Snap seamlessly from any device, whether you're on mobile, tablet, or desktop.
- Next.js 14.2.20
- TypeScript
- Tailwind CSS
- Supabase
- Node js
- Shadcn UI for reusable components
- Zustand
- Zod for Form validation
- Vercel for deployment
- Supabase and Google Authentication
To get this project up and running in your development environment, follow these step-by-step instructions.
In order to install and run this project locally, you would need to have the following installed on your local machine.
Download or clone this repo by using the link below:
https://github.com/LitPreet/VibeSnap.git
Execute the following command in the root directory of the downloaded repo in order to install dependencies:
npm install
Execute the following command in order to run the development server locally:
npm run dev
Open http://localhost:3000 with your browser to see the result.
| Script | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run start |
Start your production site locally |
| Variables | Values |
|---|---|
NEXT_PUBLIC_SUPABASE_URL |
your Supabase URL |
SUPABASE_JWT_SECRET |
your Supabase secret |
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET |
your Google client secret |
NEXT_PUBLIC_GOOGLE_CLIENT_ID |
your Google client ID |
You can create an optimized production build with the following command:
npm run build
The easiest way to deploy this Next.js app is to use the Vercel Platform. Vercel Platform