Snaply is a modern, fast, and intuitive social media platform built for next-gen connection. Designed with a focus on a sleek user experience, Snaply lets users share moments, discover content, and interact with others — all in a clean, responsive interface.
Whether you're sharing your latest photo, exploring trending posts, or managing your profile, Snaply offers a smooth and delightful experience powered by a robust, scalable backend.
Built as a full-stack passion project to demonstrate real-world application architecture, modern React patterns, and cloud-native backend integration.
🔗 https://snaply-lime.vercel.app
- 🖼️ Rich Media Sharing — Upload and share photos with captions, tags, and location data
- ❤️ Real-time Interactions — Like, save, and engage with posts instantly
- 🔍 Explore & Discover — Browse trending posts and search for content and users
- 👤 User Profiles — Customizable profiles with bio, avatar, and post history
- 🔐 Secure Authentication — Email/password auth with protected routes and session management
- ♾️ Infinite Scroll — Seamless feed browsing with cursor-based pagination
- ✏️ Full Post Management — Create, edit, and delete your own posts
- 📱 Fully Responsive — Optimized for desktop, tablet, and mobile
- 🌑 Dark Mode UI — A polished dark-first design built with Tailwind CSS
| Layer | Technology |
|---|---|
| Frontend | React 19, TypeScript, Tailwind CSS, shadcn/ui |
| Routing | React Router v7 |
| State Management | Zustand |
| Server State / Caching | TanStack Query (React Query v5) |
| Backend / BaaS | Appwrite Cloud (Auth, Database, Storage) |
| Form Handling | React Hook Form, Zod |
| Notifications | Sonner |
| Deployment | Vercel |
| Home Feed | Explore |
 |
 |
| Profile | Sign Up |
 |
 |
Make sure you have the following installed:
- Node.js (v18 or higher)
- npm or yarn
- An Appwrite Cloud account and project
- Clone the repository
git clone https://github.com/yadawprodev/Snaply.git
cd snaply- Install dependencies
npm install
# or
yarn install- Set up environment variables
Create a .env.local file in the root of the project and add the following:
VITE_APPWRITE_URL=https://fra.cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=your_project_id
VITE_APPWRITE_DATABASE_ID=your_database_id
VITE_APPWRITE_STORAGE_ID=your_storage_bucket_id
VITE_APPWRITE_USER_COLLECTION_ID=your_user_collection_id
VITE_APPWRITE_POST_COLLECTION_ID=your_post_collection_id
VITE_APPWRITE_SAVES_COLLECTION_ID=your_saves_collection_id
⚠️ Never commit your.env.localfile. It is already included in.gitignore.
- Run the development server
npm run devOpen http://localhost:5173 in your browser.
npm run build
npm run previewContributions are welcome and appreciated! Here's how to get involved:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m 'feat: add your feature' - Push to your branch:
git push origin feature/your-feature-name - Open a Pull Request
Please make sure your code follows the existing style and that all linting passes before submitting. For major changes, open an issue first to discuss what you'd like to change.
Distributed under the MIT License. See LICENSE for more information.
Yadiel Tesfaye — yadawprodev@gmail.com
GitHub: [https://github.com/yadawprodev]
Project Link: [https://github.com/yadawprodev/Snaply]