https://github.com/litpreet/vibesnap
https://github.com/litpreet/vibesnap
nextjs14 shadecn-ui supabase supabase-auth tailwindcss typescript zustandjs
Last synced: 29 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/litpreet/vibesnap
- Owner: LitPreet
- Created: 2024-12-19T16:56:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-23T14:25:10.000Z (over 1 year ago)
- Last Synced: 2025-05-19T15:11:46.439Z (about 1 year ago)
- Topics: nextjs14, shadecn-ui, supabase, supabase-auth, tailwindcss, typescript, zustandjs
- Language: TypeScript
- Homepage: https://vibe-snap-orpin.vercel.app
- Size: 1.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vibe Snap
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.
## 🌐Demo
Explore the live project - https://vibe-snap-orpin.vercel.app/
## 🚀 Key Features
- **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.
## 🛠️Tech Stack
- 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
## 🏁 Get Started
To get this project up and running in your development environment, follow these step-by-step instructions.
## 📝 Prerequisites
In order to install and run this project locally, you would need to have the following installed on your local machine.
- [Node js](https://nodejs.org/en/)
- [NPM](https://docs.npmjs.com/getting-started)
- [Git](https://git-scm.com/downloads)
## ⚙️ Installation and Run Locally
#### step 1
Download or clone this repo by using the link below:
```
https://github.com/LitPreet/VibeSnap.git
```
#### step 2
Execute the following command in the root directory of the downloaded repo in order to install dependencies:
```
npm install
```
### step 3
Execute the following command in order to run the development server locally:
```
npm run dev
```
### step 4
Open http://localhost:3000 with your browser to see the result.
## 📜 Scripts
| 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
## 🔒 Environment Variables
| 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 |
## 🚀 Deployment
You can create an optimized production build with the following command:
```
npm run build
```
#### Deploy on Vercel
The easiest way to deploy this Next.js app is to use the Vercel Platform.
[Vercel Platform](https://vercel.com)