📸 Ecogram – Instagram Clone

Ecogram is a modern full-stack Instagram-style social media platform built with React, Appwrite, and Tailwind CSS. It enables users to create, like, and explore posts in a sleek, responsive UI while leveraging powerful features like authentication, real-time updates, and content bookmarking.

🗂 Screenshots

---

🗂 Table of Contents

1. 📖 Overview
2. ✨ Features
3. ⚙️ Tech Stack
4. 📁 Project Structure
5. 🚀 Getting Started
6. 📦 Deployment
7. 📄 License
8. 🔮 Future Improvements

---

📖 Overview

Ecogram allows users to:

• Sign in securely with Appwrite Auth
• Post images with captions
• Like, bookmark, and explore posts
• Edit or delete personal posts
• View other user profiles
• Enjoy a mobile-friendly, modern UI

---

✨ Features

• 🔐 Secure Auth – Appwrite handles sign-in, sign-up, and sessions
• 📝 Create/Edit Posts – Upload images with captions
• 🏠 Home Feed – Displays posts from all users
• 🔍 Explore Page – Discover trending posts
• ❤️ Like & Bookmark – Interact and save posts
• 👤 User Profiles – View user-specific posts
• 📷 Media Uploads – Image storage with Appwrite
• 📱 Responsive UI – Works beautifully on all screen sizes

---

⚙️ Tech Stack

Area	Tech Used
⚛️ Frontend
⏱ Build Tool
🎨 Styling
🔐 Auth & Backend
📦 Forms & Validation	React Hook Form + Zod
🔄 State Management
🧩 UI Components	Radix UI + Lucide Icons

---

📁 Project Structure

Ecogram/
├── public/                  # Static assets
│   └── screenshots/         # Project screenshots
├── src/
│   ├── _auth/               # Auth pages and logic
│   ├── components/
│   │   ├── forms/           # Forms like PostForm
│   │   └── ui/shared/       # Header, Sidebar, Loader, etc.
│   ├── constants/           # App-wide constants
│   ├── context/             # React contexts
│   ├── hooks/               # Custom hooks
│   ├── lib/
│   │   ├── appwrite/        # Appwrite integration
│   │   └── react-query/     # React Query setup
│   ├── root/pages/          # Page-level components
│   └── types/               # TypeScript types
├── index.html
├── package.json
├── tailwind.config.js
└── README.md

---

🚀 Getting Started

Prerequisites

• Node.js v18+
• pnpm, npm, or yarn

Installation

git clone https://github.com/your-username/ecogram.git
cd ecogram
pnpm install
pnpm dev

Then open your browser at: http://localhost:5173

---

📦 Deployment

1. Build for production:

pnpm build

2. Preview locally:

pnpm preview

3. Deploy on platforms like:

• Vercel
• Netlify
• Docker or custom server

---

📄 License

This project is open-source. Please review or add your contribution as you want.

🔮 Future Improvements

• Real-time chat
• Push notifications
• Dark mode & theme switch
• Advanced analytics & engagement stats
• Progressive Web App (PWA) support

---

Built with 💖 using cutting-edge web tech to bring a pixel-perfect social experience to life. Share, explore, connect!