https://github.com/harjyoti12/social
🚀 Snapgram (FREE Version) – A modern social media web app built with React, TypeScript, Tailwind CSS, and Appwrite! Enjoy infinite scrolling, saved posts, user profiles, explore page, and more. Get started for free and upgrade to unlock premium features like Stories, Reels, and PWA support! 💙✨
https://github.com/harjyoti12/social
appwrite context-api react-router reacthookform reactjs shadcn-ui tailwindcss tanstack-query typescript vite zod
Last synced: 5 months ago
JSON representation
🚀 Snapgram (FREE Version) – A modern social media web app built with React, TypeScript, Tailwind CSS, and Appwrite! Enjoy infinite scrolling, saved posts, user profiles, explore page, and more. Get started for free and upgrade to unlock premium features like Stories, Reels, and PWA support! 💙✨
- Host: GitHub
- URL: https://github.com/harjyoti12/social
- Owner: harjyoti12
- Created: 2025-03-10T07:40:15.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-04-03T05:23:21.000Z (8 months ago)
- Last Synced: 2025-04-03T06:27:46.232Z (8 months ago)
- Topics: appwrite, context-api, react-router, reacthookform, reactjs, shadcn-ui, tailwindcss, tanstack-query, typescript, vite, zod
- Language: TypeScript
- Homepage: https://snapgram-one-kappa.vercel.app/
- Size: 2.42 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔥 Modern Social Media Web App (FREE Version)
# 👋 **Welcome to the free version of this modern social media web app!**
This version includes essential features to get started, but for the **full experience**, consider upgrading to the **PAID version**!
---
## 🎥 Watch the PAID Version Demo
📺 **YouTube Video Demo:**
👉 [Click Here to Watch](https://youtu.be/trRuVtJcN38)
---
## 🌍 Try the Live Demo (PAID Version)
🔗 **Check out the full version in action:**
👉 [PAID Version Live Demo](https://snapgram-one-kappa.vercel.app/)
---
## 📸 Preview of PAID Version Features
👀 **See what you unlock in the PAID version!**
📌 **Stories with auto-delete (Available in PAID version)**
📌 **Reels Page – Watch, Upload & Search Reels**
📌 **Full Profile Customization & Advanced User Search**
🚀 **Want full access?** Unlock the **PAID version** now!
👉 **[Get the FULL VERSION](https://buymeacoffee.com/horoji86v/build-your-own-social-media-app-just-5-full-source-code)**
---
## 📌 FREE vs. PAID Features
| Feature | FREE Version ✅ | PAID Version 🔥 |
|--------------------------------|---------------|----------------|
| **Basic Features** – Home, Posts, Profiles | ✅ | ✅ |
| **Infinite Scroll** – Smooth browsing | ✅ | ✅ |
| **Saved Posts** – Keep track of favorites | ✅ | ✅ |
| **Explore Page with Post Search** | ✅ | ✅ |
| **People Page** – Find and connect with users | ✅ | ✅ |
| **Stories with Auto-Delete** | ❌ | 🔥 Available |
| **Reels Page – Upload & Watch Reels** | ❌ | 🔥 Available |
| **Saved Reels Section** | ❌ | 🔥 Available |
| **Full Profile Customization** | ❌ | 🔥 Available |
| **Advanced User Search & Explore** | ❌ | 🔥 Available |
| **Installable PWA (Mobile App Experience)** | ❌ | 🔥 Available |
| **Exclusive Performance Optimizations** | ❌ | 🔥 Available |
| **Lifetime Access & Future Updates** | ❌ | 🔥 Available |
🚀 **Want the full version?** 👉 [Upgrade Now](https://buymeacoffee.com/horoji86v/build-your-own-social-media-app-just-5-full-source-code)
---
## 💎 How to Get the Full Source Code?
📌 **Step 1:** Go to **Buy Me a Coffee** and purchase access:
👉 **[Buy Now](https://buymeacoffee.com/horoji86v/build-your-own-social-media-app-just-5-full-source-code)**
📌 **Step 2:** After payment, you'll get a **private repo invite** to the PAID version.
📌 **Step 3:** Clone the repo & start building! 🚀
---
## 📜 Installation & Setup
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
VITE_APPWRITE_URL=
VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_STORAGE_ID=
VITE_APPWRITE_USER_COLLECTION_ID=
VITE_APPWRITE_POST_COLLECTION_ID=
VITE_APPWRITE_SAVES_COLLECTION_ID=
VITE_APPWRITE_FOLLOWERS_COLLECTION_ID =
VITE_APPWRITE_STORIES_COLLECTION_ID =
VITE_APPWRITE_COMMENT_COLLECTION_ID =
VITE_APPWRITE_REELS_COLLECTION_ID =
VITE_APPWRITE_REELSLIKES_COLLECTION_ID =
VITE_APPWRITE_REELSCOMMENTS_COLLECTION_ID =
VITE_APPWRITE_REELSAVES_COLLECTION_ID =
```
Replace the placeholder values with your actual Appwrite credentials. You can obtain these credentials by signing up on the [Appwrite website](https://appwrite.io/).
**Running the Project**
```bash
npm start
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
---
## 🛠 Contribution Guidelines
- We welcome contributions to improve the project! To contribute, please follow these guidelines:
1. Fork the Repository:
Click the "Fork" button on the top right corner of the repository page on GitHub to create your own copy of the repository.
2. Clone Your Fork:
```bash
git clone https://github.com/harjyoti12/social.git
cd Social_media_app
```
3.Create a New Branch:
- It's best to create a new branch for your changes.
```bash
git checkout -b feature/your-feature-name
```
4. Make Your Changes:
- Implement your changes or additions to the project. Be sure to test your changes thoroughly.
5. Commit Your Changes:
```bash
git add .
git commit -m "Add a descriptive message about your changes"
```
6. Push to Your Fork:
```bash
git push origin feature/your-feature-name
```
7. Create a Pull Request:
- Go to the original repository on GitHub and click "New Pull Request."
- Select your branch and provide a detailed description of the changes you made.
- Submit the pull request for review.
---
## ☕ Support My Work!
If this free version helped you, consider **buying me a coffee** to support future projects! 💙
[](https://www.buymeacoffee.com/horoji86v)
🤝 Collaborators
Special thank you for all people that contributed for this project.
