Feat/social media webapp

examples/apps/social-media/web/react-tailwind/kochu-media/.env.sample

@@ -0,0 +1,23 @@
+# Appwrite Project ID
+VITE_APPWRITE_PROJECT_ID=''
+
+# Appwrite Endpoint URL
+VITE_APPWRITE_URL=''
+
+# Appwrite Storage ID for file uploads
+VITE_APPWRITE_STORAGE_ID=''
+
+# Appwrite Database ID for storing data
+VITE_APPWRITE_DATABASE_ID=''
+
+# Collection ID for saving user-related data
+VITE_APPWRITE_SAVE_COLLECTION_ID=''
+
+# Collection ID for managing user details
+VITE_APPWRITE_USER_COLLECTION_ID=''
+
+# Collection ID for blog posts or similar content
+VITE_APPWRITE_POST_COLLECTION_ID=''
+
+# Collection ID for storing comments
+VITE_APPWRITE_COMMENTS_COLLECTION_ID=''

examples/apps/social-media/web/react-tailwind/kochu-media/.gitignore

@@ -0,0 +1,64 @@
+# Node modules (both backend and frontend)
+node_modules/
+frontend/node_modules/
+backend/node_modules/
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Env files
+.env
+frontend/.env
+backend/.env
+
+# Build directories
+build/
+frontend/build/
+backend/build/
+
+# Dist directories (for backend)
+dist/
+backend/dist/
+
+# Appwrite related
+/appwrite/docker-compose.yml
+/appwrite/.env
+/appwrite/appwrite.json
+/appwrite/storage/
+/appwrite/volumes/
+
+# Coverage directory
+coverage/
+frontend/coverage/
+backend/coverage/
+
+# Debug files
+*.lock
+*.pid
+*.seed
+*.log
+
+# OS generated files
+.DS_Store
+Thumbs.db
+
+# Misc
+*.sublime-workspace
+*.vscode
+.idea/
+
+# Editor directories
+.vscode/
+*.sublime-project
+*.sublime-workspace
+*.vscode/
+
+# Compiled binary addons (if applicable)
+build/Release/
+
+# Appwrite-related backups
+appwrite_backups/

examples/apps/social-media/web/react-tailwind/kochu-media/README.md

@@ -0,0 +1,126 @@
+# Kochu-Media - Social Media Example
+link to the project: [Kochu-Media](https://kochugram.rajislab.com/)
+
+## Overview
+
+**Kochu-Media** is a dynamic, open-source social media web application built to demonstrate the integration of **FreeAPI.app** APIs into a modern social media platform. This project aims to showcase API handling and practical implementation for users looking to expand their API integration skills while contributing to the FreeAPI community.
+
+## 🌐 Project Purpose
+
+The primary objective of Kochu-Media is to provide developers with a robust and interactive example of how to build a social media platform using open-source APIs. With its responsive design and comprehensive backend infrastructure, this project is an ideal reference for developers exploring API integration, user authentication, and real-time data handling. Kochu-Media aligns with FreeAPI.app’s mission of providing free, diverse, and accessible APIs for developers to experiment, learn, and grow.
+
+---
+
+## 🛠️ Tech Stack
+
+### **Frontend**
+- **React**: Core library for building a dynamic user interface.
+- **Framer Motion**: Powers smooth, engaging animations.
+- **Radix UI**: Accessible components (dialogs, dropdowns, etc.).
+- **Tailwind CSS**: Utility-first framework for responsive and efficient styling.
+- **Lucide & Tabler Icons**: Scalable, high-quality icon sets.
+- **React Router**: Client-side routing for seamless navigation.
+- **React Hook Form**: Efficient form handling with built-in validation.
+- **Zod**: Schema-based form validation for improved data integrity.
+
+### **Backend & Database**
+- **Appwrite**: Comprehensive backend-as-a-service for user authentication, database management, and real-time data syncing.
+- **Tanstack React Query**: Data-fetching and caching solution for smooth updates and interactions.
+
+### **Additional Tools**
+- **React Dropzone**: Simplified file upload mechanism for photos and media.
+- **Class Variance Authority (CVA)**: Centralized management of conditional component styling.
+- **Tailwind Merge**: Optimizes the merging of Tailwind classes.
+- **Clsx**: Efficient class name management in React components.
+
+---
+
+## 📚 Key Features
+
+1. **API Integration**: Leverages the **FreeAPI.app** APIs for handling data, including posts, user profiles, and media.
+2. **Social Media Essentials**: Supports user activities like media uploads, captions, and post saving, mirroring core social media functionality.
+3. **Responsive UI**: Ensures a mobile-friendly and responsive interface for optimal user experience across devices.
+4. **Real-Time Updates**: Powered by **Appwrite**, the platform provides real-time synchronization of posts and user activities.
+5. **Secure Authentication**: Implements Appwrite’s authentication system to securely manage user logins and sessions.
+6. **Efficient Media Uploads**: Integrated with **React Dropzone** to handle smooth photo and media uploads.
+7. **Fast & Interactive**: Utilizes **React Query** for efficient data caching and seamless API communication.
+
+---
+
+## 🔥 Why Contribute?
+
+Contributing to **Kochu-Media** allows you to:
+- Enhance your **API integration** skills by working with real-world scenarios.
+- Understand the **Appwrite** backend and database integration for scalable applications.
+- Learn how to create a **responsive social media UI** with modern frontend technologies.
+- Collaborate with a growing community of developers in the **FreeAPI.app** ecosystem.
+
+---
+
+## 🛠️ How to Use
+
+### Step 1: Clone the Repository
+
+```bash
+git clone https://github.com/[username]/kochu-media.git
+cd kochu-media
+```
+
+### Step 2: Install Dependencies
+
+```bash
+yarn install
+```
+
+### Step 3: Set Up Appwrite
+
+Configure your **Appwrite** project by adding the following environment variables to your `.env` file:
+
+```bash
+VITE_APPWRITE_PROJECT_ID=''
+VITE_APPWRITE_URL=''
+VITE_APPWRITE_STORAGE_ID=''
+VITE_APPWRITE_DATABASE_ID=''
+VITE_APPWRITE_USER_COLLECTION_ID=''
+VITE_APPWRITE_POST_COLLECTION_ID=''
+VITE_APPWRITE_COMMENTS_COLLECTION_ID=''
+```
+
+### Step 4: Start the Development Server
+
+```bash
+yarn dev
+```
+
+This will launch the application locally on your machine.
+
+### Step 5: Test API Integration
+
+Use the **FreeAPI.app** endpoints to explore API handling and practice data integration within the social media platform.
+
+---
+
+## 🌐 Contribution Guidelines
+
+We welcome contributions to **Kochu-Media**! Here's how you can contribute:
+
+1. **Fork the repository** and create your own branch.
+2. **Add new features**, fix bugs, or improve the documentation.
+3. Submit a **pull request** for review.
+
+Ensure to follow the guidelines outlined in [CONTRIBUTING.md](../CONTRIBUTING.md) for a smooth collaboration process.
+
+---
+
+## 💡 Learn More
+
+For more information on how to work with **FreeAPI.app** APIs or how to contribute to the **FreeAPI** project, visit the official [FreeAPI.app documentation](https://freeapi.app/docs).
+
+---
+
+## 🤝 Acknowledgments
+
+- **FreeAPI.app**: For providing a comprehensive and diverse set of APIs that fuel this project.
+- **Appwrite**: For offering a robust backend solution for managing user data and real-time updates.
+
+---

examples/apps/social-media/web/react-tailwind/kochu-media/components.json

@@ -0,0 +1,18 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": false,
+ "tsx": true,
+ "tailwind": {
+ "config": "tailwind.config.js",
+ "css": "src/globals.css",
+ "baseColor": "slate",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui"
+ }
+}

examples/apps/social-media/web/react-tailwind/kochu-media/eslint.config.js

@@ -0,0 +1,28 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+ { ignores: ["dist"] },
+ {
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
+ files: ["**/*.{ts,tsx}"],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ plugins: {
+ "react-hooks": reactHooks,
+ "react-refresh": reactRefresh,
+ },
+ rules: {
+ ...reactHooks.configs.recommended.rules,
+ "react-refresh/only-export-components": [
+ "warn",
+ { allowConstantExport: true },
+ ],
+ },
+ }
+);

examples/apps/social-media/web/react-tailwind/kochu-media/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="shortcut icon" href="favicon.svg" type="image/x-icon">
+ <title>kochugram</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="./src/mian.tsx"></script>
+ </body>
+</html>