📦 Storix

A Modern Cloud Storage Management Platform

Secure, fast, and intuitive file storage solution built with Next.js 15 and Appwrite

✨ Features

🔐 Authentication & Security

Email-based Authentication with OTP verification
Secure session management using Appwrite
Protected routes with middleware
User account creation and sign-in flows

📂 File Management

Upload Files - Support for multiple file types (up to 50MB)
Download Files - Quick access to your stored files
Rename Files - Easy file renaming with extension preservation
Delete Files - Permanent file removal from storage
File Sharing - Share files with other users via email
Search & Filter - Find files quickly with advanced search
Sort Options - Organize by name, date, or size

📊 Dashboard Analytics

Storage Usage Chart - Visual representation of storage consumption
File Type Categorization - Separate views for Documents, Images, Videos, Audio, and Others
Recent Files - Quick access to recently uploaded files
Storage Statistics - Track usage across different file types
Real-time Updates - Dynamic data with automatic revalidation

🎨 User Experience

Responsive Design - Works seamlessly on desktop, tablet, and mobile
Dark Mode UI - Modern, eye-friendly interface
Drag & Drop Upload - Intuitive file upload experience
Real-time Feedback - Loading states and error handling
Toast Notifications - User-friendly alerts and confirmations

🛠️ Tech Stack

Frontend

Next.js 15 - React framework with App Router
React 19 - UI library
TypeScript - Type safety
Tailwind CSS - Utility-first CSS framework
Radix UI - Headless UI components
Lucide React - Beautiful icons
Recharts - Data visualization

Backend & Database

Appwrite - Backend-as-a-Service
- Authentication
- Database (Collections)
- Storage (File buckets)
- Server-side SDK

Form & Validation

React Hook Form - Form state management
Zod - Schema validation
Input OTP - OTP input component

Developer Tools

ESLint - Code linting
Prettier - Code formatting
TypeScript - Static type checking

📁 Project Structure

storix/
├── app/                          # Next.js App Router
│   ├── (auth)/                  # Authentication routes
│   │   ├── sign-in/            # Sign-in page
│   │   └── sign-up/            # Sign-up page
│   ├── (root)/                 # Main application routes
│   │   ├── [type]/             # Dynamic file type pages
│   │   └── page.tsx            # Dashboard
│   ├── globals.css             # Global styles
│   └── layout.tsx              # Root layout
│
├── components/                  # React components
│   ├── ui/                     # Reusable UI components (Radix)
│   ├── ActionDropdown.tsx      # File action menu
│   ├── ActionsModalContent.tsx # Modal for file actions
│   ├── AuthForm.tsx            # Authentication form
│   ├── Card.tsx                # Card component
│   ├── Chart.tsx               # Storage usage chart
│   ├── FileUploader.tsx        # Drag & drop file upload
│   ├── Header.tsx              # Page header
│   ├── MobileNavigation.tsx    # Mobile sidebar
│   ├── OTPModal.tsx            # OTP verification modal
│   ├── Search.tsx              # Search component
│   ├── Sidebar.tsx             # Desktop sidebar
│   ├── Sort.tsx                # Sort dropdown
│   └── Thumbnail.tsx           # File preview thumbnails
│
├── lib/                        # Utility functions & actions
│   ├── actions/               # Server actions
│   │   ├── file.actions.ts   # File CRUD operations
│   │   └── user.actions.ts   # User authentication
│   ├── appwrite/             # Appwrite configuration
│   │   ├── config.ts        # Environment variables
│   │   └── index.ts         # Client initialization
│   └── utils.ts             # Helper functions
│
├── constants/                 # Application constants
│   └── index.ts             # Navigation items, sort types
│
├── types/                    # TypeScript type definitions
│   └── index.d.ts          # Global types
│
├── hooks/                   # Custom React hooks
│   └── use-toast.ts        # Toast notifications hook
│
└── public/                 # Static assets
    └── assets/            # Icons and images

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher)
npm, yarn, pnpm, or bun
Appwrite account (for backend services)

Installation

Clone the repository

git clone https://github.com/Prince-695/storix.git
cd storix

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Set up environment variables

Create a .env.local file in the root directory:

# Appwrite Configuration
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_api_secret_key

Configure Appwrite
- Create a new project in Appwrite Console
- Create a database with two collections:
  - Users Collection (for user data)
  - Files Collection (for file metadata)
- Create a storage bucket for file uploads
- Set up authentication (Email/Password)
- Configure file size limits (default: 50MB)
Run the development server
```
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open your browser

Navigate to http://localhost:3000

📝 Usage

Authentication

Navigate to /sign-up to create a new account
Enter your full name and email
Verify your email with the OTP sent to your inbox
Sign in using your email at /sign-in

Upload Files

Click the upload button or drag files into the upload area
Files are automatically categorized by type
View uploaded files in the dashboard

Manage Files

Rename: Click the action menu → Rename
Share: Click the action menu → Share → Enter recipient emails
Download: Click the action menu → Download
Delete: Click the action menu → Delete (requires confirmation)

Browse by Type

Navigate using the sidebar to view specific file types:
- 📄 Documents (.pdf, .doc, .txt, etc.)
- 🖼️ Images (.jpg, .png, .gif, etc.)
- 🎥 Media (.mp4, .avi, .mp3, etc.)
- 📦 Others (all other file types)

🔧 Available Scripts

# Development
npm run dev          # Start development server

# Production
npm run build        # Build for production
npm run start        # Start production server

# Code Quality
npm run lint         # Run ESLint

🎨 Key Features Breakdown

File Actions System

The ActionDropdown component provides comprehensive file management:

Dynamic action menu based on user permissions
Modal-based interfaces for complex actions
Real-time updates using Next.js revalidation

Storage Analytics

The Chart component visualizes:

Total storage used vs. available (2GB limit)
Breakdown by file type
Latest upload dates per category

Authentication Flow

User enters email (and name for sign-up)
OTP is sent via Appwrite email service
User verifies OTP in modal
Session is created and user is redirected to dashboard

File Upload Process

User selects files via drag-drop or file picker
Files are validated (size, type)
Upload to Appwrite storage bucket
Metadata stored in database
Real-time UI update with new files

🌐 Deployment

Deploy on Vercel

The easiest way to deploy Storix is using Vercel:

Push your code to GitHub
Import your repository in Vercel
Add environment variables
Deploy!

Other Platforms

Netlify: Configure build command as npm run build
Railway: Auto-detects Next.js configuration
AWS Amplify: Use the Next.js SSR preset

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a 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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Prince

GitHub: @Prince-695

🙏 Acknowledgments

📧 Support

If you have any questions or need help, feel free to:

Open an issue on GitHub
Contact via email: [[email protected]]

Made with ❤️ by Prince

⭐ Star this repo if you find it useful!

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
app		app
components		components
constants		constants
hooks		hooks
lib		lib
public		public
types		types
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Prince-695/storix

Folders and files

Latest commit

History

Repository files navigation