ByteSphere Cloud is a modern cloud storage solution built with Next.js and Appwrite. It provides a secure and user-friendly platform for storing, managing, and sharing various types of files.
- Secure Authentication: Email-based OTP authentication system
- File Management: Upload, view, rename, and delete files
- File Sharing: Share files with other users via email
- File Organization: Files are automatically categorized by type (documents, images, media, others)
- Storage Analytics: Visual representation of storage usage with charts
- Responsive Design: Works seamlessly on desktop and mobile devices
- Frontend: Next.js 15.3.0, React 19, TypeScript
- Styling: Tailwind CSS, shadcn/ui components
- Authentication & Storage: Appwrite
- State Management: React Hooks
- Form Handling: React Hook Form with Zod validation
- Charts: Recharts
- File Handling: React Dropzone
- Node.js 18.x or higher
- npm or yarn
- Appwrite account and project setup
Create a .env.local file in the root directory with the following variables:
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT=your-project-id
NEXT_PUBLIC_APPWRITE_DATABASE=your-database-id
NEXT_PUBLIC_APPWRITE_USERS_COLLECTION=your-users-collection-id
NEXT_PUBLIC_APPWRITE_FILES_COLLECTION=your-files-collection-id
NEXT_PUBLIC_APPWRITE_BUCKET=your-bucket-id
NEXT_APPWRITE_KEY=your-appwrite-api-key
-
Clone the repository
git clone https://github.com/mayurk224/bytesphere_cloud.git cd bytesphere_cloud -
Install dependencies
npm install # or yarn install -
Run the development server
npm run dev # or yarn dev -
Open http://localhost:3000 with your browser to see the application
- Create an Appwrite project
- Set up a database with collections for users and files
- Create a storage bucket for file uploads
- Configure authentication methods (email/password)
- Set up appropriate security rules and permissions
bytesphere_cloud/
├── app/ # Next.js app directory
│ ├── (auth)/ # Authentication routes
│ ├── (root)/ # Main application routes
│ ├── components/ # React components
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── components/ # Shared UI components
├── lib/ # Utility functions and API
│ ├── actions/ # Server actions
│ ├── appwrite/ # Appwrite configuration
│ └── utils.ts # Helper functions
├── public/ # Static assets
├── next.config.ts # Next.js configuration
├── tailwind.config.js # Tailwind CSS configuration
└── package.json # Project dependencies
ByteSphere Cloud uses Appwrite's authentication system with email OTP (One-Time Password) for secure login and registration.
- Upload: Drag and drop or select files to upload
- View: Preview files directly in the browser
- Organize: Files are automatically categorized by type
- Share: Share files with other users via email
- Delete: Remove files you no longer need
The dashboard provides visual analytics of your storage usage, showing:
- Total space used vs. available
- Breakdown by file types
- Recent activity
The easiest way to deploy ByteSphere Cloud is using the Vercel Platform.
- Push your code to a GitHub repository
- Import the project to Vercel
- Add your environment variables
- Deploy
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.