Development Setup

Development Setup Overview

This guide will walk you through setting up a complete development environment for MegaVault, including all dependencies, databases, and development tools needed for productive development.

Prerequisites

Before setting up the development environment, ensure you have the required tools and accounts.

Required Software

Development Tools (Recommended)

Required Accounts & Services

• GitHub Account: For repository access and contributions
• Cloudflare Account: For R2 storage (or AWS for S3)
• Upstash Account: For Redis database (or local Redis)
• Email Service: SMTP for email notifications (optional)

Local Development Environment

Follow these steps to set up your local development environment from scratch.

Step-by-Step Setup

# Clone the repository
git clone https://github.com/iotserver24/S3-MegaVault.git
cd S3-MegaVault

# Check Node.js version (should be 18+ or 20+)
node --version
npm --version

# Install dependencies
npm install

# Or use yarn if preferred
yarn install

# Install development tools globally (optional)
npm install -g typescript@latest
npm install -g @next/codemod

# Copy environment template
cp .env.example .env.local

# Generate NextAuth secret
openssl rand -base64 32

# Edit .env.local with your editor
# Add the generated secret and other configuration

# Option 1: Local Redis with Docker
docker run --name redis-dev -p 6379:6379 -d redis:alpine

# Option 2: Use Upstash Redis (cloud)
# Sign up at upstash.com and get connection string

# Test Redis connection
redis-cli ping
# Should return: PONG

Development Workflow

• Hot Reload: Changes to code automatically refresh the browser
• TypeScript Checking: Real-time type checking in your editor
• ESLint Integration: Automatic code quality checks
• Prettier Formatting: Consistent code formatting on save
• Path Aliases: Simplified imports with @ prefix

Development Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linting
npm run lint

# Fix linting issues
npm run lint:fix

# Format code with Prettier
npm run format

# Type check
npm run type-check

# Run tests
npm run test

# Run tests in watch mode
npm run test:watch

Database Setup

MegaVault uses Redis as its primary database. Set up Redis locally or use a cloud service.

Local Redis Setup

# Start Redis container
docker run --name megavault-redis \
  -p 6379:6379 \
  -d redis:alpine

# Test connection
docker exec -it megavault-redis redis-cli ping

# macOS with Homebrew
brew install redis
brew services start redis

# Ubuntu/Debian
sudo apt update
sudo apt install redis-server
sudo systemctl start redis-server

Cloud Redis Setup

1. Sign up for Upstash: Create account at upstash.com
2. Create Database: Create a new Redis database
3. Get Connection String: Copy the Redis URL from dashboard
4. Update Environment: Add Redis URL to your .env.local file

Database Schema

MegaVault uses Redis for:

• Session Storage: User sessions and authentication tokens
• File Metadata: File information and directory structure
• User Data: User profiles and preferences
• Caching: API response caching and temporary data
• Upload Tracking: File upload progress and status

// User session
user:session:abc123 = {
  userId: "user_123",
  email: "user@example.com",
  expires: "2024-01-01T00:00:00Z"
}

// File metadata
file:user_123:path/to/file.txt = {
  id: "file_456",
  name: "file.txt",
  size: 1024,
  type: "text/plain",
  created: "2024-01-01T00:00:00Z",
  modified: "2024-01-01T00:00:00Z"
}

// Directory listing
dir:user_123:/documents = [
  "file_456",
  "file_789",
  "folder_abc"
]

Storage Configuration

Configure S3-compatible storage for file uploads and retrieval during development.

Cloudflare R2 Setup

1. Create R2 Account: Enable R2 in your Cloudflare dashboard
2. Create Bucket: Create a new R2 bucket for development
3. Generate API Tokens: Create API tokens with R2 permissions
4. Configure CORS: Set up CORS for web uploads

[
  {
    "AllowedOrigins": ["http://localhost:3001"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
    "AllowedHeaders": ["*"],
    "MaxAgeSeconds": 86400
  }
]

Local Storage Alternative

For development without cloud storage, you can use MinIO locally:

# Start MinIO server
docker run -p 9000:9000 -p 9001:9001 \
  --name minio \
  -e "MINIO_ROOT_USER=minioadmin" \
  -e "MINIO_ROOT_PASSWORD=minioadmin" \
  -v /tmp/minio:/data \
  minio/minio server /data --console-address ":9001"

# Access MinIO console at http://localhost:9001
# Create bucket and configure access keys

Storage Environment Variables

# Cloudflare R2
R2_ACCOUNT_ID=your-account-id
R2_ACCESS_KEY_ID=your-access-key
R2_SECRET_ACCESS_KEY=your-secret-key
R2_BUCKET_NAME=megavault-dev
R2_ENDPOINT=https://your-account-id.r2.cloudflarestorage.com

# Or MinIO Local
S3_ENDPOINT=http://localhost:9000
S3_ACCESS_KEY_ID=minioadmin
S3_SECRET_ACCESS_KEY=minioadmin
S3_BUCKET_NAME=megavault-dev
S3_REGION=us-east-1

Environment Variables

Complete .env.local configuration for development.

# Application
NEXTAUTH_URL=http://localhost:3001
NEXTAUTH_SECRET=your-secret-key-here

# Redis Database
REDIS_URL=redis://localhost:6379

# Cloudflare R2 Storage
R2_ACCOUNT_ID=your-account-id
R2_ACCESS_KEY_ID=your-access-key
R2_SECRET_ACCESS_KEY=your-secret-key
R2_BUCKET_NAME=megavault-dev

# Development
NODE_ENV=development
PORT=3001

Running the Application

Start the development server and verify everything works.

# Start the development server
npm run dev

# The application will be available at:
http://localhost:3001

Verification Steps

1. Open Browser: Navigate to http://localhost:3001
2. Test Registration: Create a test account
3. Upload Test: Try uploading a small file
4. Check Services: Verify Redis and storage connections

Development Tools

Essential tools and utilities for productive development.

Recommended VS Code Extensions

• TypeScript Hero: Auto import and organize imports
• ESLint: Real-time linting in editor
• Prettier: Code formatting on save
• Tailwind CSS IntelliSense: Tailwind class autocomplete
• GitLens: Git integration and history

# Type checking
npm run type-check

# Linting and formatting
npm run lint
npm run format

# Build for production
npm run build

Troubleshooting

Common development issues and their solutions.

Common Issues

# Kill process using port 3001
kill -9 $(lsof -ti:3001)

# Or use different port
PORT=3002 npm run dev

# Reinstall dependencies
rm -rf node_modules
npm install

# Clear Next.js cache
rm -rf .next