StoreIt - It's a cloud vault. YOUR cloud vault.

🌟 Overview

StoreIt is a modern cloud storage solution built with Next.js 14, offering a secure and intuitive way to store and manage digital files. This project was created following the tutorial by JavaScript Mastery.

⚡ Key Features

• 📁 File Management (Upload, Download, Share)
• 🔍 Advanced Search Capabilities
• 📊 Storage Analytics & Visualization
• 🎯 File Type Categorization
• 🔐 Secure Authentication
• 📱 Responsive Design
• 💫 Modern UI/UX
• 🚀 Real-time Updates

🛠️ Tech Stack

• Framework: Next.js 14
• Styling: Tailwind CSS
• Authentication: Appwrite
• File Storage: Appwrite Storage
• UI Components: Shadcn/ui
• Charts: Recharts
• State Management: React Hooks
• Icons: Custom SVG Icons

📋 Prerequisites

Before you begin, ensure you have:

• Node.js 18+ installed
• Appwrite account and server setup
• npm or yarn package manager

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/pakagronglb/google-drive-clone-storeit.git
cd google-drive-clone-storeit

2. Install Dependencies

3. Environment Setup

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

NEXT_PUBLIC_APPWRITE_ENDPOINT="https://cloud.appwrite.io/v1"
NEXT_PUBLIC_APPWRITE_PROJECT=""
NEXT_PUBLIC_APPWRITE_DATABASE=""
NEXT_PUBLIC_APPWRITE_USERS_COLLECTION=""
NEXT_PUBLIC_APPWRITE_FILES_COLLECTION=""
NEXT_PUBLIC_APPWRITE_BUCKET=""
NEXT_APPWRITE_KEY=""

4. Appwrite Setup

1. Create a new project in Appwrite Console
2. Create a new database
3. Set up storage bucket
4. Configure authentication methods
5. Update security settings and CORS

5. Run Development Server

npm run dev
# or
yarn dev

📁 Project Structure

storeit/
├── app/
│   ├── (auth)/
│   │   ├── sign-in/
│   │   └── sign-up/
│   ├── (root)/
│   │   ├── [type]/
│   │   └── page.tsx
│   └── layout.tsx
├── components/
├── constants/
├── lib/
│   ├── actions/
│   └── utils/
├── public/
│   ├── assets/
│   └── fonts/
└── types/

🎯 Core Features Explained

Authentication

• Secure sign-up and sign-in
• OAuth integration
• Session management

File Management

• Multi-file upload support
• Progress tracking
• File type validation
• Secure sharing mechanisms

Dashboard Analytics

• Storage usage visualization
• File type distribution
• Upload history
• Space management

Search Functionality

• Real-time search
• File type filtering
• Advanced sorting options

🔧 Configuration Options

Customizing File Types

// constants/index.ts
export const allowedFileTypes = {
  documents: ['pdf', 'doc', 'docx', 'txt'],
  images: ['png', 'jpg', 'jpeg', 'gif'],
  media: ['mp4', 'mp3', 'wav'],
  others: ['zip', 'rar']
};

Storage Limits

export const STORAGE_LIMITS = {
  free: 5 * 1024 * 1024 * 1024, // 5GB
  premium: 50 * 1024 * 1024 * 1024 // 50GB
};

🎨 Styling Customization

The project uses Tailwind CSS with custom configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {...},
        dark: {...},
        light: {...}
      }
    }
  }
};

📱 Responsive Design

• Mobile-first approach
• Breakpoints:
  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px

⚡ Performance Optimizations

• Image optimization
• Lazy loading
• Code splitting
• API response caching
• Static site generation where applicable

🔐 Security Features

• Encrypted file storage
• Secure file sharing
• Authentication tokens
• Rate limiting
• Input sanitization

🧪 Testing

# Run tests
npm run test

# Run tests with coverage
npm run test:coverage

📦 Deployment

1. Build the project:

npm run build

2. Start production server:

npm start

🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a pull request

📄 License

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

🙏 Acknowledgments

• JavaScript Mastery for the excellent tutorial and frontend assets
• Appwrite for backend services
• Shadcn/ui for UI components
• Tailwind CSS for styling

🔄 Updates

Stay tuned for updates:

• Team collaboration features
• Advanced file preview
• Mobile apps
• API access

Created with 💙 by Pakagrong Lebel