Store. Share. Collaborate. A robust, Google Drive-inspired cloud storage platform built with Next.js 15, Appwrite, and React Query.
ByteBox is a modern storage solution designed to demonstrate the power of the Next.js ecosystem combined with Appwrite's Backend-as-a-Service capabilities.
What started as a challenge to migrate from a Django backend evolved into a full-featured production application. ByteBox handles complex file management, secure sharing, and persistent authentication with a focus on performance, clean architecture, and delightful UX.
Users get a dedicated 2GB workspace to upload images, documents, and media. The system enforces strict file type validation and storage quotas.
Share files with other registered users via email. A dedicated "Shared with Me" page allows users to view files granted to them by others.
A powerful command-palette style search experience. Find files instantly by name or type using Appwrite's Full-Text Search, complete with filters and sorting.
Accidentally deleted a file? No problem. Files are soft-deleted to a "Trash" bin where they can be Restored or Permanently Deleted (individually or in bulk).
Features "Lumi", a reactive mascot built with SVG and Framer Motion that visually reacts to your input (peeking at passwords, following your typing).
A fully responsive, mobile-first design ensuring file management is seamless on desktops, tablets, and phones.
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Backend: Appwrite (Auth, Database, Storage)
- State Management: React Query (TanStack Query)
- Styling: Tailwind CSS, Shadcn UI
- Animations: Framer Motion
- Forms: React Hook Form + Zod
- Tables: TanStack Table (React Table)
To run this project, you need to set up an Appwrite project and configure the following environment variables in a .env.local file:
# Appwrite Configuration
NEXT_PUBLIC_APPWRITE_ENDPOINT="[https://cloud.appwrite.io/v1](https://cloud.appwrite.io/v1)"
NEXT_PUBLIC_APPWRITE_PROJECT="<YOUR_PROJECT_ID>"
NEXT_APPWRITE_KEY="<YOUR_API_KEY>"
# Database & Collections
NEXT_PUBLIC_APPWRITE_DATABASE="<YOUR_DATABASE_ID>"
NEXT_PUBLIC_APPWRITE_USER_COLLECTION="<YOUR_USER_COLLECTION_ID>"
NEXT_PUBLIC_APPWRITE_FILES_COLLECTION="<YOUR_FILES_COLLECTION_ID>"
# Storage Bucket
NEXT_PUBLIC_APPWRITE_BUCKET="<YOUR_BUCKET_ID>"Server Actions: All mutations (Upload, Rename, Delete, Share) are handled via Next.js Server Actions for security and speed.
Custom Hooks: Logic is abstracted into hooks like useFileHandlers, useMyFiles, and useTrashHandlers to keep UI components clean.
Optimistic Updates: React Query is used to update the UI immediately while the server processes the request in the background.
Contributions are welcome! Please feel free to submit a Pull Request.
Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request
This project is open source and available under the MIT License.