Snapgram-Social-Media-App

Snapgram – Social Media App A modern social media application inspired by Instagram, built using React.js, TypeScript, Tailwind CSS, and Appwrite. The project focuses on building a scalable and production-like frontend architecture with responsive UI, optimized data fetching, authentication, reusable components, and smooth user experience. 🚀 Live Demo: https://snapgram-social-media-app-okov.vercel.app/ 📌 Features * Authentication system (Sign up / Login / Logout) * Create, edit, and delete posts * Like & save functionality * Infinite scrolling feed * Debounced search * Image upload system * User profile pages * Responsive design across devices * Optimized API caching using React Query 🛠️ Tech Stack Frontend: * React.js * TypeScript * Tailwind CSS State & Data Handling: * TanStack Query (React Query) Backend (BaaS): * Appwrite Libraries: * React Router DOM * React Dropzone * Lucide Icons * React Intersection Observer 📁 Project Structure The project follows a modular and scalable architecture with separated folders for: * Reusable components * Pages * Custom hooks * API & Appwrite configuration * Utilities * Global styles 🧠 Key Concepts Implemented * React Query caching & performance optimization * Infinite scrolling using Intersection Observer * Authentication & database integration with Appwrite * Debounced search for reducing unnecessary API calls * Reusable component-based architecture * Responsive UI implementation 🚧 Challenges Faced * Managing application state efficiently * Organizing scalable frontend architecture * Handling image uploads & storage * Optimizing performance and user experience 📈 Future Improvements * Dark mode * Comments system * Notifications * Follow / Unfollow feature * Better loading states & skeleton UI GitHub: github.com/CodeHanaa/Snapgram-Social-Media-App