🔥 Modern Social Media Web App (FREE Version)

<div align="center"> <a href="https://youtu.be/trRuVtJcN38" target="_blank"> <img src="https://github.com/user-attachments/assets/105da6b7-b296-45fa-9e56-b1d21f0a5383"></p> </a> <div> <img src="https://img.shields.io/badge/-React_JS-black?style=for-the-badge&logoColor=white&logo=react&color=61DAFB" alt="react.js" /> <img src="https://img.shields.io/badge/-Appwrite-black?style=for-the-badge&logoColor=white&logo=appwrite&color=FD366E" alt="appwrite" /> <img src="https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" /> <img src="https://img.shields.io/badge/ShadCN-%232E3440.svg?style=for-the-badge&amp;logo=shadcn&amp;logoColor=white" alt="shields"> <img src="https://img.shields.io/badge/TanStack_Query-%23FF4154.svg?style=for-the-badge&logo=reactquery&logoColor=white" alt="reactquery" /> <img src="https://img.shields.io/badge/-Typescript-black?style=for-the-badge&logoColor=white&logo=typescript&color=3178C6" alt="typescript" /> <img src='https://img.shields.io/badge/PWA-%235A0FC8.svg?style=for-the-badge&logo=pwa&logoColor=white' alt='pwa' /> </div> </div> <br/>

👋 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

---

🌍 Try the Live Demo (PAID Version)

🔗 Check out the full version in action:
👉 PAID Version Live Demo

---

📸 Preview of PAID Version Features

👀 See what you unlock in the PAID version!

<img src='https://github.com/user-attachments/assets/2e63cdfa-b7db-430f-8077-ef86b0593b7a' alt='story' />

📌 Stories with auto-delete (Available in PAID version)

<img src='https://github.com/user-attachments/assets/ceb20923-9afe-4233-80ab-b29177f9a406' alt='reels'>

📌 Reels Page – Watch, Upload & Search Reels

<img src='https://github.com/user-attachments/assets/ce917767-f1c3-4ed7-927f-13b8893f2915' alt='profile'>

📌 Full Profile Customization & Advanced User Search

🚀 Want full access? Unlock the PAID version now!
👉 Get the FULL VERSION

---

📌 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

---

💎 How to Get the Full Source Code?

📌 Step 1: Go to Buy Me a Coffee and purchase access:
👉 Buy Now

📌 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
• Node.js
• npm (Node Package Manager)

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

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.

Running the Project

npm start

Open 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:

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.

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:

git add .
git commit -m "Add a descriptive message about your changes"

6. Push to Your Fork:

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! 💙

<h2 id="colab">🤝 Collaborators</h2> <p>Special thank you for all people that contributed for this project. </p> <table> <tr> <td align="center"> <a href="https://github.com/harjyoti12"> <img src="https://avatars.githubusercontent.com/u/157897673?s=400&u=abe13b8c5228f5fafa4d3f69ffaaec3c1c65de07&v=4" width="100px" alt="Harjyoti Profile Picture"/><br> _{<b>Harjyoti Kalita</b>} </a> </td> </tr> </table>