Skip to content

Latest commit

 

History

History
515 lines (442 loc) · 18.4 KB

ProjectAnalysis.md

File metadata and controls

515 lines (442 loc) · 18.4 KB

Google Drive Clone - Comprehensive Project Analysis

Project Overview

This is a Google Drive Clone built as a modern web application using Next.js 15 and React 19. The application provides cloud storage functionality with file upload, organization, sharing, and management capabilities. It serves as a full-stack solution with a beautiful UI, secure authentication, and scalable backend infrastructure.

Architecture & Technology Stack

Frontend Framework

  • Next.js 15.4.10 - React framework with App Router
  • React 19.1.0 - UI library with modern hooks and features
  • TypeScript 5 - Type-safe JavaScript

Backend & Database

  • Appwrite - Backend-as-a-Service platform
    • appwrite@18.2.0 (client-side)
    • node-appwrite@17.2.0 (server-side)
  • Database collections for files and user management
  • Storage buckets for file uploads

UI/UX & Styling

  • Tailwind CSS 4 - Utility-first CSS framework
  • Radix UI - Unstyled, accessible UI components
    • Dialog, Dropdown Menu, Navigation Menu, Progress, etc.
  • Lucide React - Modern icon library
  • Heroicons - Additional icon set
  • Shadcn/ui - Component library built on Radix UI
  • Next Themes - Dark/light theme support
  • Sonner - Toast notifications

Development Tools

  • ESLint 9 - Code linting
  • Turbopack - Fast bundler for development
  • TypeScript - Type checking

Project Structure & Directory Analysis

google-drive-clone/
├── components.json          # Shadcn/ui configuration
├── eslint.config.mjs        # ESLint configuration
├── next.config.ts          # Next.js configuration
├── package.json            # Dependencies and scripts
├── postcss.config.mjs      # PostCSS configuration
├── README.md               # Project documentation
├── tsconfig.json           # TypeScript configuration
└── src/
    ├── app/                # Next.js App Router
    │   ├── env.ts          # Environment variables
    │   ├── globals.css     # Global styles
    │   ├── layout.tsx      # Root layout component
    │   ├── middleware.ts   # Route protection middleware
    │   ├── page.tsx        # Landing page
    │   ├── (auth)/         # Authentication routes (grouped)
    │   │   ├── signin/
    │   │   │   └── page.tsx
    │   │   └── signup/
    │   │       └── page.tsx
    │   ├── (main)/         # Protected routes (grouped)
    │   │   ├── dashboard/
    │   │   │   └── page.tsx
    │   │   ├── files/
    │   │   │   └── page.tsx
    │   │   └── profile/
    │   │       └── page.tsx
    │   └── api/            # API routes
    │       ├── auth/
    │       │   ├── google/
    │       │   │   └── route.ts
    │       │   └── [..nextauth]/
    │       │       └── route.ts
    │       ├── profile/
    │       │   └── route.ts
    │       ├── signin/
    │       │   └── route.ts
    │       ├── signout/
    │       │   └── route.ts
    │       └── signup/
    │           └── route.ts
    ├── client/             # Client-side utilities
    │   ├── auth.ts         # Authentication client functions
    │   └── components/     # (Note: Structure shows this but files are in src/components/)
    ├── components/         # React components
    │   ├── ui/             # Reusable UI components (Shadcn/ui)
    │   │   ├── avatar.tsx
    │   │   ├── badge.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── dashboard-skeleton.tsx
    │   │   ├── dialog.tsx
    │   │   ├── dropdown-menu.tsx
    │   │   ├── google-signin-button.tsx
    │   │   ├── input.tsx
    │   │   ├── label.tsx
    │   │   ├── navigation-menu.tsx
    │   │   ├── progress.tsx
    │   │   ├── separator.tsx
    │   │   ├── sheet.tsx
    │   │   ├── skeleton.tsx
    │   │   └── sonner.tsx
    │   ├── Dashboard.tsx       # Main dashboard component
    │   ├── FileBrowser.tsx     # File browsing interface
    │   ├── FileMenu.tsx        # Context menu for files
    │   ├── FileUpload.tsx      # File upload component
    │   ├── MainContent.tsx     # Dashboard main content
    │   ├── Navbar.tsx          # Top navigation bar
    │   ├── Profile.tsx         # User profile component
    │   ├── Sidebar.tsx         # Left sidebar navigation
    │   ├── SigninPage.tsx      # Sign-in form
    │   └── SignupPage.tsx      # Sign-up form
    ├── config/             # Configuration files
    │   └── appwrite.ts     # Appwrite configuration constants
    ├── contexts/           # React contexts
    │   └── AuthContext.tsx # Authentication context provider
    ├── hooks/              # Custom React hooks
    │   └── useFiles.ts     # File management hooks
    ├── lib/                # Utility libraries
    │   ├── appwrite.ts     # Appwrite client instance
    │   ├── auth-utils.ts   # Authentication utilities
    │   ├── cookieSettings.ts # Cookie configuration
    │   └── utils.ts        # General utilities
    ├── server/             # Server-side utilities
    │   ├── auth.ts         # Server-side authentication
    │   ├── config.ts       # Server configuration
    │   └── services/       # Server-side services
    │       └── fileService.ts # File operations service
    ├── types/              # TypeScript type definitions
    │   └── files.ts        # File-related types
    └── utils/              # Utility functions
        ├── fileUtils.ts    # File utility functions
        └── (empty)

Detailed File Analysis

Core Application Files

src/app/layout.tsx

  • Purpose: Root layout component for the entire application
  • Features:
    • Sets up Geist font family
    • Wraps app with AuthProvider for global authentication state
    • Includes Toaster for notifications
    • Provides metadata for SEO
  • Key Dependencies: AuthContext, Sonner

src/app/page.tsx

  • Purpose: Landing/marketing page
  • Features:
    • Hero section with call-to-action
    • Feature showcase (upload, security, sharing, etc.)
    • Benefits section
    • Footer with navigation
  • UI Components: Card, Button, Icons from Lucide React

src/app/(auth)/signin/page.tsx & src/app/(auth)/signup/page.tsx

  • Purpose: Authentication pages with suspense loading
  • Features:
    • Wrapped in Suspense for loading states
    • Centered layout with SigninPage/SignupPage components

Authentication System

src/contexts/AuthContext.tsx

  • Purpose: Global authentication state management
  • Features:
    • React Context for user state
    • Automatic user fetching on mount
    • Refetch capability for state updates
  • State: user (Appwrite User object), loading, refetch function

src/client/auth.ts

  • Purpose: Client-side authentication functions
  • Functions:
    • registerUser() - User registration via API
    • loginUser() - User login via API
    • logoutUser() - Client-side logout
    • getCurrentUser() - Fetch current user
    • initiateGoogleAuth() - Start Google OAuth flow
    • updateUserProfile() - Update user profile

src/server/auth.ts

  • Purpose: Server-side authentication operations
  • Functions:
    • createUserSession() - Create login session
    • createUser() - Register new user
    • getCurrentUser() - Get user by session
    • createGoogleOAuthSession() - Google OAuth setup
    • deleteCurrentSession() - Logout
    • updateUserProfile() - Update user details

src/app/api/auth/*/route.ts

  • Purpose: API routes for authentication
  • Routes:
    • /api/signin - Handle login requests
    • /api/signup - Handle registration
    • /api/signout - Handle logout
    • /api/auth/google - Google OAuth callback
    • /api/profile - Profile updates

File Management System

src/services/fileService.ts

  • Purpose: Core file operations service
  • Features:
    • File CRUD operations
    • Folder management
    • Storage statistics
    • File upload with size limits
    • Permission management
  • Key Methods:
    • getUserFiles() - Fetch user's files
    • uploadFile() - Upload file to storage
    • createFolder() - Create new folder
    • deleteFile() - Delete file/folder
    • moveFile() - Move file to different folder
    • getStorageStats() - Calculate storage usage

src/hooks/useFiles.ts

  • Purpose: Custom hooks for file operations
  • Hooks:
    • useUserFiles() - Fetch files for user/folder
    • useRecentFiles() - Get recent files
    • useStorageStats() - Get storage statistics
    • useAllFolders() - Get all user folders
    • useFileUpload() - Handle file uploads with progress
    • useCreateFolder() - Folder creation
    • useFileOperations() - File actions (delete, move, open)

src/components/FileBrowser.tsx

  • Purpose: Main file browsing interface
  • Features:
    • Folder navigation with breadcrumbs
    • Grid/List view modes
    • Search functionality
    • Folder creation
    • File operations menu
    • Drag & drop upload (via FileUpload component)

src/components/FileUpload.tsx

  • Purpose: File upload component with progress
  • Features:
    • Multiple file selection
    • Progress tracking
    • Size validation
    • Error handling
    • Success notifications

UI Components

Dashboard Components

  • Dashboard.tsx: Main dashboard layout
  • MainContent.tsx: Dashboard content with recent files and stats
  • Navbar.tsx: Top navigation with user menu
  • Sidebar.tsx: Left navigation sidebar
  • Profile.tsx: User profile management

UI Library (Shadcn/ui)

  • button.tsx: Customizable button component
  • card.tsx: Card container component
  • dialog.tsx: Modal dialog component
  • input.tsx: Form input component
  • badge.tsx: Status/label badges
  • dropdown-menu.tsx: Dropdown menus
  • skeleton.tsx: Loading skeleton components
  • progress.tsx: Progress bars
  • And more...

Configuration & Utils

src/config/appwrite.ts

  • Purpose: Appwrite configuration constants
  • Constants:
    • Database IDs
    • Collection IDs
    • Storage bucket IDs
    • File size limits (50MB per file, 500MB total)
    • Supported file types (images, videos, documents)

src/lib/appwrite.ts

  • Purpose: Appwrite client initialization
  • Exports: account, OAuthProvider, client instance

src/utils/fileUtils.ts

  • Purpose: File-related utility functions
  • Functions:
    • formatFileSize() - Format bytes to human readable
    • formatDate() - Format dates
    • getFileIcon() - Get appropriate icon for file type

src/types/files.ts

  • Purpose: TypeScript interfaces
  • Types:
    • FileItem - File/folder data structure
    • StorageStats - Storage usage statistics
    • CreateFileData - File creation payload
    • UploadProgress - Upload progress tracking

Application Flow & User Journey

1. Landing & Authentication

  1. Landing Page (/)

    • User sees marketing content
    • Options to sign in or sign up
    • Responsive design with feature highlights

  2. Authentication Flow

    • Sign Up: Email/password or Google OAuth
    • Sign In: Email/password or Google OAuth
    • Middleware redirects authenticated users from auth pages
    • AuthContext manages global user state

2. Dashboard Experience

  1. Dashboard (/dashboard)

    • Welcome message with user name
    • Recent files overview
    • Storage usage statistics
    • Quick actions (upload, create folder)

  2. File Management (/files)

    • Full file browser with navigation
    • Breadcrumb navigation
    • Search and filter capabilities
    • Grid/List view options
    • Context menus for file operations

  3. Profile Management (/profile)

    • View and update user information
    • Change password
    • Account settings

3. File Operations

  1. Upload Flow

    • Drag & drop or click to select
    • Progress indicators
    • Size and type validation
    • Automatic categorization

  2. Organization

    • Create folders
    • Move files between folders
    • Hierarchical navigation

  3. File Actions

    • Open/view files
    • Download files
    • Delete files
    • Share files (UI ready, backend implementation needed)

Key Features Implemented

✅ Core Features

  • User Authentication: Email/password + Google OAuth
  • File Upload: Drag & drop with progress tracking
  • File Organization: Folders, navigation, breadcrumbs
  • File Operations: View, download, delete, move
  • Storage Management: Usage tracking and limits
  • Search: File and folder search
  • Responsive Design: Mobile-friendly interface
  • Dark/Light Theme: Theme switching support

🔄 Partially Implemented

  • File Sharing: UI components ready, backend logic needed
  • Real-time Sync: Architecture supports it, not fully implemented

❌ Missing Features

  • File Preview: Basic view/download, no rich previews
  • Collaboration: Multi-user file sharing
  • Version History: No file versioning
  • Advanced Search: Basic text search only
  • Offline Support: No offline file access

Security & Architecture

Authentication Security

  • Session Management: Secure cookies with HttpOnly
  • OAuth Integration: Google OAuth 2.0
  • Route Protection: Middleware for authenticated routes
  • API Security: Server-side validation

Data Security

  • File Permissions: User-scoped file access
  • Storage Security: Appwrite's built-in security
  • Input Validation: Client and server-side validation

Performance Optimizations

  • Code Splitting: Next.js automatic splitting
  • Image Optimization: Next.js Image component (not used in this project)
  • Caching: React state management
  • Lazy Loading: Component-based loading

Dependencies Analysis

Production Dependencies

Core Framework

  • next@15.4.10 - React framework
  • react@19.1.0 - UI library
  • react-dom@19.1.0 - React DOM rendering

Backend Services

  • appwrite@18.2.0 - Client-side Appwrite SDK
  • node-appwrite@17.2.0 - Server-side Appwrite SDK

UI Components & Styling

  • @radix-ui/* (11 packages) - Headless UI components
  • lucide-react@0.539.0 - Icon library
  • @heroicons/react@2.2.0 - Additional icons
  • heroicons@2.2.0 - Icon library
  • tailwind-merge@3.3.1 - Tailwind utility merging
  • class-variance-authority@0.7.1 - Component variant utilities
  • clsx@2.1.1 - Conditional CSS classes

Utilities

  • sonner@2.0.7 - Toast notifications
  • next-themes@0.4.6 - Theme management

Development Dependencies

  • @eslint/* - ESLint configuration
  • @tailwindcss/postcss@4 - Tailwind CSS processing
  • @types/* - TypeScript type definitions
  • eslint@9 - Code linting
  • eslint-config-next@15.4.6 - Next.js ESLint config
  • tailwindcss@4 - CSS framework
  • tw-animate-css@1.3.6 - Animation utilities
  • typescript@5 - TypeScript compiler

Database Schema (Appwrite Collections)

Files Collection

{
  $id: string;           // Unique document ID
  name: string;          // File/folder name
  type: 'file' | 'folder'; // Item type
  mimeType?: string;     // MIME type (files only)
  size: number;          // Size in bytes
  parentId?: string;     // Parent folder ID
  userId: string;        // Owner user ID
  bucketFileId?: string; // Storage file ID
  $createdAt: string;    // Creation timestamp
  $updatedAt: string;    // Update timestamp
}

Users (Appwrite Built-in)

  • Managed by Appwrite authentication
  • Includes email, name, preferences
  • OAuth provider data

API Endpoints

Authentication APIs

  • POST /api/signup - User registration
  • POST /api/signin - User login
  • POST /api/signout - User logout
  • PUT /api/profile - Update profile
  • GET /api/auth/google - Google OAuth callback

File Management (via Appwrite SDK)

  • Direct database queries through fileService
  • Storage operations through Appwrite Storage

Deployment & Environment

Environment Variables Required

NEXT_PUBLIC_APPWRITE_HOST_URL=your-appwrite-endpoint
NEXT_PUBLIC_APPWRITE_PROJECT_ID=your-project-id
NEXT_PUBLIC_APPWRITE_DATABASE_ID=your-database-id
NEXT_PUBLIC_APPWRITE_FILES_COLLECTION_ID=your-files-collection-id
NEXT_PUBLIC_APPWRITE_STORAGE_BUCKET_ID=your-storage-bucket-id
APPWRITE_API_KEY=your-api-key

Build & Development

  • Development: npm run dev (with Turbopack)
  • Build: npm run build
  • Start: npm run start
  • Lint: npm run lint

Strengths & Architecture Quality

✅ Well-Architected Aspects

  1. Separation of Concerns: Clear separation between client/server/auth logic
  2. Type Safety: Comprehensive TypeScript usage
  3. Component Reusability: Modular component design
  4. Custom Hooks: Clean data fetching and state management
  5. Error Handling: Proper error boundaries and user feedback
  6. Security: Proper authentication and authorization
  7. Scalability: Service-based architecture ready for expansion

🔄 Areas for Improvement

  1. Error Boundaries: Add React error boundaries
  2. Testing: No test files visible
  3. Documentation: Limited inline documentation
  4. Performance: Could add React.memo, lazy loading
  5. Accessibility: ARIA labels and keyboard navigation
  6. Internationalization: No i18n support

Conclusion

This Google Drive Clone represents a well-architected, modern web application that demonstrates proficiency in:

  • Full-Stack Development: Next.js, React, TypeScript
  • Backend Integration: Appwrite BaaS
  • UI/UX Design: Modern, responsive design with Shadcn/ui
  • State Management: React Context + Custom Hooks
  • File Management: Complete CRUD operations
  • Authentication: Secure user management
  • Performance: Optimized React patterns

The codebase is production-ready with proper error handling, security measures, and scalable architecture. It successfully implements core cloud storage features and provides a solid foundation for additional features like real-time collaboration, advanced sharing, and file versioning.

Project Status: MVP Complete - Ready for production deployment with proper Appwrite configuration.