Cloud-Storage-Hub

A modern, full-featured cloud storage management solution built with Next.js, TypeScript, and Appwrite.

🌐 Live Demo · ✨ Features · 📸 Screenshots · 🚀 Deployment

📋 Table of Contents

• Project Overview
• Features
• Screenshots
• Technologies Used
• Installation
• Configuration
• Running the Application
• Folder Structure
• Deployment
  • Deploy to Vercel
• Appwrite Setup
• Contributing
• License

---

📖 Project Overview

Cloud-Storage-Hub is a modern web application built with Next.js and TypeScript, designed to provide efficient and user-friendly file storage and management capabilities. The project leverages Appwrite as a backend service for authentication, file storage, and database management, combined with a sleek and responsive UI built using React and Tailwind CSS.

Whether you need to upload, download, organize, or share files, Cloud-Storage-Hub offers a seamless experience with real-time updates, search functionality, and a visually intuitive interface.

---

✨ Features

• ✅ User Authentication & Authorization — Secure sign-up, login, and OTP verification via Appwrite
• ✅ File Upload & Download — Drag-and-drop file uploads with progress feedback
• ✅ File Management — Organize, rename, delete, and preview files
• ✅ Responsive Design — Fully responsive UI that works on desktop, tablet, and mobile
• ✅ Search & Sort — Quickly find files with search and sort by name, date, size, or type
• ✅ File Type Support — Dedicated icons and thumbnails for images, videos, documents, audio, and more
• ✅ Storage Analytics — Visual charts showing storage usage by file category
• ✅ Real-Time Updates — Instant notifications via toast messages for actions
• ✅ Modular Architecture — Reusable, well-structured React components for easy maintenance

---

📸 Screenshots

Dashboard View	File Management

Live Demo: [https://google-drive-neon-chi.vercel.app/

---

🛠️ Technologies Used

Technology	Purpose
Next.js 15	React framework with server-side rendering & Turbopack
React 19	JavaScript library for building user interfaces
TypeScript	Typed superset of JavaScript for improved DX
Tailwind CSS	Utility-first CSS framework for rapid UI development
Appwrite	Open-source backend for auth, database, and storage
Recharts	Composable charting library for React
React Dropzone	Drag-and-drop file upload component
React Hook Form	Performant form validation
Zod	Schema validation
Radix UI	Accessible, unstyled UI primitives
Lucide Icons	Beautiful open-source icons

---

⚙️ Installation

Prerequisites

• Node.js v18+ (recommended: v20 LTS)
• npm v9+ or yarn or pnpm
• An Appwrite account (free tier available at cloud.appwrite.io)

Steps

1. Clone the repository:

   git clone https://github.com/yourusername/Cloud-Storage-Hub.git
   cd Cloud-Storage-Hub

2. Install dependencies:

   npm install

3. Set up environment variables (see Configuration below)

4. Run the development server:

   npm run dev

5. Open your browser:

   Navigate to http://localhost:3000 to see the app in action.

---

🔧 Configuration

Create a .env.local file in the root directory with the following environment variables:

# Appwrite Configuration
NEXT_PUBLIC_APPWRITE_ENDPOINT="https://cloud.appwrite.io/v1"
NEXT_PUBLIC_APPWRITE_PROJECT="your_appwrite_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"

⚠️ Important: Keep your NEXT_APPWRITE_KEY secret. Never commit it to version control. Add .env.local to your .gitignore file.

---

🚀 Running the Application

Development Mode

Start the development server with hot-reloading (Turbopack enabled):

npm run dev

Open http://localhost:3000 to view the app. Changes to files will automatically reload the browser.

Production Build

Build the application for production:

npm run build

Start the production server:

npm start

Lint

Run ESLint to check code quality:

npm run lint

---

📁 Folder Structure

Cloud-Storage-Hub/
├── .eslintrc.json          # ESLint configuration
├── .gitignore              # Git ignore rules
├── components.json         # shadcn/ui components config
├── next.config.ts          # Next.js configuration
├── package.json            # Project dependencies & scripts
├── postcss.config.mjs      # PostCSS configuration
├── tailwind.config.ts      # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
├── app/                    # Next.js App Router (pages & layouts)
│   ├── (auth)/             # Authentication pages (login, signup, OTP)
│   ├── (root)/             # Main app pages (dashboard, files, etc.)
│   ├── favicon.ico         # Site favicon
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   └── fonts/              # Custom fonts
├── components/             # Reusable React components
│   ├── ui/                 # shadcn/ui primitives (button, dialog, etc.)
│   ├── AuthForm.tsx        # Authentication form
│   ├── Card.tsx            # File card component
│   ├── Chart.tsx           # Storage analytics chart
│   ├── FileUploader.tsx    # Drag-and-drop upload component
│   ├── Header.tsx          # App header
│   ├── MobileNavigation.tsx
│   ├── OTPModal.tsx        # OTP verification modal
│   ├── Search.tsx          # File search
│   ├── Sidebar.tsx         # Navigation sidebar
│   ├── Sort.tsx            # Sort controls
│   └── Thumbnail.tsx       # File thumbnail/preview
├── constants/              # Application constants
│   └── index.ts
├── hooks/                  # Custom React hooks
│   └── use-toast.ts
├── lib/                    # Utility functions & Appwrite integration
│   ├── utils.ts            # Helper utilities
│   └── actions/            # Server actions
│       ├── file.actions.ts # File operations
│       └── user.actions.ts # User operations
├── public/                 # Static assets
│   ├── DEMO1.png           # Screenshot 1
│   ├── DEMO2.png           # Screenshot 2
│   ├── assets/
│   │   ├── icons/          # SVG icons
│   │   └── images/         # Static images
│   └── ...favicon, svgs
└── types/                  # TypeScript type definitions
    └── index.d.ts

---

🌐 Deployment

Deploy to Vercel (Recommended)

The easiest way to deploy Cloud-Storage-Hub is to use Vercel, the platform built by the creators of Next.js.

Step-by-Step Deployment Guide

1. Push your code to GitHub:

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/yourusername/Cloud-Storage-Hub.git
   git push -u origin main

2. Go to Vercel and sign in with your GitHub account.

3. Click "Add New" → "Project" from the Vercel dashboard.

4. Import your GitHub repository (Cloud-Storage-Hub).

5. Configure the project:

   • Framework Preset: Vercel will auto-detect Next.js.
   • Root Directory: Leave as ./ (default).
   • Build Command: npm run build (auto-detected).
   • Output Directory: .next (auto-detected).
   • Install Command: npm install (auto-detected).

6. Add Environment Variables:

   In the "Environment Variables" section, add all the variables from your .env.local file:

   Variable	Value
   NEXT_PUBLIC_APPWRITE_ENDPOINT	https://cloud.appwrite.io/v1
   NEXT_PUBLIC_APPWRITE_PROJECT	Your Appwrite Project ID
   NEXT_PUBLIC_APPWRITE_DATABASE	Your Appwrite 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 Storage Bucket ID
   NEXT_APPWRITE_KEY	Your Appwrite API Key

7. Click "Deploy" — Vercel will build and deploy your application.

8. Your app is live! 🎉

   Vercel will provide you with a URL (e.g., https://your-app.vercel.app). You can also configure a custom domain in the Vercel dashboard.

Pushing Updates

After your initial deploy, any updates pushed to your GitHub main branch will automatically trigger a new deployment on Vercel.

Manual Rebuild

You can also trigger a manual redeploy from the Vercel dashboard:

1. Go to your project on Vercel
2. Click "Deployments"
3. Click "Redeploy" on the latest deployment

---

🗄️ Appwrite Setup

Cloud-Storage-Hub uses Appwrite as its backend. Follow these steps to set up your own Appwrite instance:

1. Create an Appwrite Account

Go to cloud.appwrite.io and create a free account.

2. Create a New Project

• Click "Create Project"
• Name it (e.g., "Cloud-Storage-Hub")
• Note your Project ID — you'll need this for the environment variables

3. Set Up Authentication

• In your project dashboard, go to "Auth" → "Settings"
• Enable Email/Password authentication
• Optionally configure OTP verification

4. Create a Database

• Go to "Databases" → "Create Database"
• Name it (e.g., "Cloud-Storage-Hub-DB")
• Note your Database ID

5. Create Collections

Users Collection

• Collection ID: Note this for env variables
• Attributes:
  • email (string, required)
  • name (string, required)
  • avatar (string, optional)
  • accountId (string, required)

Files Collection

• Collection ID: Note this for env variables
• Attributes:
  • name (string, required)
  • type (string, required)
  • size (integer, required)
  • url (string, required)
  • extension (string, required)
  • bucketFileId (string, required)
  • owner (relation to Users collection)

6. Create a Storage Bucket

• Go to "Storage" → "Create Bucket"
• Name it (e.g., "File Storage")
• Set Maximum file size as needed
• Note your Bucket ID

7. Generate an API Key

• Go to "Auth" → "API Keys"
• Click "Create API Key"
• Give it a name and select the following scopes:
  • users.read
  • users.write
  • documents.read
  • documents.write
  • files.read
  • files.write
  • buckets.read
  • buckets.write
• Copy the generated API Key — this is your NEXT_APPWRITE_KEY

8. Update Environment Variables

Add all the IDs and keys to your .env.local file as shown in the Configuration section.

---

🤝 Contributing

Contributions are welcome! If you'd like to contribute, please follow these steps:

1. Fork the repository
2. Create a new branch (git checkout -b feature/amazing-feature)
3. Make your changes