S-Files - Modern File Management System

S-Files is an innovative educational platform that helps students store files, collaborate, and work as a team in a modern cloud environment. The platform enables seamless file sharing and intelligent content analysis, making it perfect for academic projects, research collaboration, and group assignments.

S-Files - Video Demo

Demo.mp4

Built with cutting-edge technologies including Next.js, Supabase PostgreSQL, S3-compatible storage, Cloudflare R2 objects, Google Gemini AI, RAG (Retrieval-Augmented Generation), and comprehensive database management - providing students with hands-on experience using industry-standard tools while fostering collaborative learning.

�🚀 Live Demo

🌐 Production URL: https://s-files.vercel.app

✨ Try it now: Sign in with your Google account and experience seamless file management with AI-powered insights!

🎓 Purpose & Vision

S-Files is designed as an educational file management platform where students can:

📚 Store and organize files collectively - Create a collaborative learning environment
🤖 Understand file content with AI - Get intelligent insights about uploaded documents
🎯 Learn modern web development - Built with industry-standard technologies
☁️ Experience cloud storage - Hands-on experience with S3-compatible storage solutions

✨ Features

🔐 Secure Authentication - Google OAuth integration with NextAuth.js v5 (JWT sessions)
☁️ Dual Cloud Storage - S3-compatible MinIO for development, Cloudflare R2 object storage for production
🤖 AI-Powered File Analysis - Understand and analyze file content using advanced AI integration
👥 Collaborative File Clusters - Students can store and share files in organized clusters
📤 Advanced File Upload - S3 Presigned URLs with CORS support for direct browser uploads
🎨 Beautiful UI - Modern glass-morphism design with animated backgrounds
📁 Complete File Management - Upload, download, view, and delete files with real-time feedback
🗄️ Database Integration - PostgreSQL with Prisma ORM and Prisma Accelerate
🌐 Production Optimized - Deployed on Vercel with automatic CI/CD
📱 Responsive Design - Works perfectly on desktop, tablet, and mobile

🛠️ Tech Stack

Frontend

Next.js 15 - Latest React framework with App Router
React 19 - Modern React with latest features
TypeScript - Full type safety
Tailwind CSS v4 - Utility-first styling with custom animations

Authentication

NextAuth.js v5 - Modern authentication with JWT sessions
Google OAuth - Secure Google Sign-In integration

Database & Storage

Supabase PostgreSQL - Robust relational database with real-time capabilities
Prisma ORM - Type-safe database client with Accelerate for advanced database management
MinIO - S3-compatible local development storage for hands-on learning
Cloudflare R2 Object Storage - Production-grade S3-compatible cloud storage with global CDN
AWS S3 SDK - Universal interface for S3-compatible storage systems

AI & Intelligence

Google Gemini AI - Advanced AI model for content analysis and understanding
RAG (Retrieval-Augmented Generation) - Intelligent document search and content generation
Content Recognition - Automated file categorization and insights
Educational Analytics - Learning-focused file organization and collaboration metrics

Deployment & DevOps

Vercel - Serverless deployment with automatic builds
Docker - Containerized MinIO for local development
S3-Compatible Architecture - Learn industry-standard object storage patterns

📋 Prerequisites

Node.js 18+ and npm/yarn
PostgreSQL database (Supabase recommended)
Google Cloud Console account for OAuth
Cloudflare account for R2 storage
Vercel account for deployment
Docker (optional, for local MinIO)

🎓 Educational Benefits

Learn Object Storage Patterns

S-Files provides hands-on experience with S3-compatible object storage, the industry standard used by:

Amazon S3 - The original cloud object storage
Cloudflare R2 - Cost-effective S3-compatible storage
MinIO - Self-hosted S3-compatible storage
Google Cloud Storage - S3-compatible APIs
Digital Ocean Spaces - S3-compatible object storage

AI-Powered Learning

📄 Document Analysis - AI understands PDF, Word, and text file contents
🔍 Smart Search - Find files based on content, not just filenames
📊 Content Insights - Get summaries and key points from uploaded documents
🏷️ Auto-categorization - Files automatically organized by AI analysis
💡 Learning Assistance - AI helps students understand complex documents

Real-World Skills

Cloud Storage Architecture - Learn how modern applications handle file storage
Authentication Systems - Understanding OAuth and JWT tokens
API Design - RESTful endpoints and presigned URL patterns
Database Design - Relational data modeling with Prisma
Modern Web Development - Next.js, React, and TypeScript best practices

🚀 Quick Start

1. Clone and Install

git clone https://github.com/Krishnadev-cmd/S-files.git
cd S-files
npm install

2. Environment Setup

Create .env.local file:

# Database (Supabase with Prisma Accelerate)
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=YOUR_ACCELERATE_API_KEY"

# NextAuth Configuration
NEXTAUTH_SECRET="your-generated-secret"
NEXTAUTH_URL="http://localhost:3000"

# Google OAuth Credentials
AUTH_GOOGLE_ID="your-google-client-id.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET="GOCSPX-your-google-client-secret"

# Development Storage (MinIO)
S3_ENDPOINT_LOCAL="localhost"
S3_PORT="9000"
S3_ACCESS_KEY="minioadmin"
S3_SECRET_KEY="minioadmin"
S3_BUCKET_NAME="sfiles"
S3_USE_SSL="false"

# Production Storage (Cloudflare R2) - uncomment for production
# AWS_ACCESS_KEY_ID="your-r2-access-key"
# AWS_SECRET_ACCESS_KEY="your-r2-secret-key"
# AWS_REGION="auto"
# AWS_S3_BUCKET="sfiles"
# S3_ENDPOINT="https://your-account-id.r2.cloudflarestorage.com"

3. Database Setup

# Push database schema to your PostgreSQL database
npx prisma db push

# Generate Prisma client
npx prisma generate

4. Start Development Storage (MinIO)

docker run -d \
  --name minio-dev \
  -p 9000:9000 -p 9001:9001 \
  -e "MINIO_ROOT_USER=minioadmin" \
  -e "MINIO_ROOT_PASSWORD=minioadmin" \
  minio/minio server /data --console-address ":9001"

5. Run Development Server

npm run dev

Visit http://localhost:3000 to see your application!

🔧 Detailed Configuration

Google OAuth Setup

Go to Google Cloud Console: https://console.cloud.google.com/
Create a new project or select existing one
Enable Google+ API in APIs & Services
Create OAuth 2.0 credentials:
- Application type: Web application
- Authorized redirect URIs:
  - http://localhost:3000/api/auth/callback/google (development)
  - https://your-domain.vercel.app/api/auth/callback/google (production)
Copy Client ID and Secret to your .env file

Supabase Database Setup

Create account at https://supabase.com/
Create new project and wait for setup
Get connection string from Settings → Database
Set up Prisma Accelerate (optional but recommended):
- Go to https://accelerate.prisma.io/
- Connect your database
- Get Accelerate connection string

Cloudflare R2 Configuration

Create Cloudflare account and enable R2
Create R2 bucket named sfiles
Generate R2 tokens:
- Go to R2 → Manage R2 API tokens
- Create token with Object Read & Write permissions
Configure CORS policy in bucket settings:

[
  {
    "AllowedOrigins": [
      "https://your-domain.vercel.app",
      "https://*.vercel.app",
      "http://localhost:3000"
    ],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag", "x-amz-version-id"],
    "MaxAgeSeconds": 3600
  }
]

🚀 Production Deployment

Vercel Deployment

Connect to Vercel:

npm install -g vercel
vercel login
vercel

Set Environment Variables in Vercel Dashboard:

# Database
DATABASE_URL=prisma+postgres://accelerate.prisma-data.net/?api_key=...

# Authentication
NEXTAUTH_SECRET=your-production-secret
NEXTAUTH_URL=https://your-app.vercel.app
AUTH_GOOGLE_ID=your-google-client-id
AUTH_GOOGLE_SECRET=your-google-client-secret

# Cloudflare R2 Storage
AWS_ACCESS_KEY_ID=your-r2-access-key
AWS_SECRET_ACCESS_KEY=your-r2-secret-key
AWS_REGION=auto
AWS_S3_BUCKET=sfiles
S3_ENDPOINT=https://your-account-id.r2.cloudflarestorage.com
S3_BUCKET_NAME=sfiles
S3_PORT=443

Deploy:
```
vercel --prod
```

Update OAuth Redirect URIs

After deployment, update your Google OAuth configuration:

Add your production URL: https://your-app.vercel.app/api/auth/callback/google

📁 Project Structure

S-Files/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── auth/          # NextAuth endpoints
│   │   ├── files/         # File management endpoints
│   │   └── test-db/       # Database testing
│   ├── auth/              # Authentication pages
│   ├── components/        # Reusable UI components
│   ├── server/            # Server-side utilities
│   └── utils/             # Client-side utilities
├── prisma/                # Database schema and migrations
├── public/                # Static assets
└── README.md             # This file

🔄 Key Workflows

File Upload Process

User selects files in the UI
Frontend requests presigned URLs from /api/files/upload/presignedUrl
Files upload directly to storage (MinIO/R2) using presigned URLs
Metadata saves to database via /api/files/upload/saveInfo
UI updates with upload progress and completion

Authentication Flow

User clicks "Sign in with Google"
NextAuth.js redirects to Google OAuth
Google redirects back with authorization code
NextAuth.js exchanges code for user profile
JWT token created and stored in secure cookie
User gains access to protected routes

🛡️ Security Features

JWT Sessions - Stateless, secure authentication
CORS Protection - Properly configured for cross-origin requests
Environment Variables - Sensitive data stored securely
Presigned URLs - Direct uploads without exposing credentials
HTTPS Only - Production enforces secure connections

🎨 UI/UX Features

Glass-morphism Design - Modern translucent interfaces
Animated Backgrounds - Floating gradient blobs
Smooth Transitions - Butter-smooth hover effects and animations
Responsive Layout - Works on all device sizes
Real-time Feedback - Upload progress and error handling
Accessibility - Proper ARIA labels and keyboard navigation

🔧 Development Commands

# Development
npm run dev              # Start dev server
npm run build           # Build for production
npm run start           # Start production server

# Database
npx prisma db push      # Push schema changes
npx prisma generate     # Generate Prisma client
npx prisma studio       # Open database GUI

# Deployment
vercel                  # Deploy to preview
vercel --prod          # Deploy to production

🐛 Troubleshooting

Common Issues

Authentication Error:

Check Google OAuth redirect URIs match your domain
Verify NEXTAUTH_URL matches your deployment URL
Ensure NEXTAUTH_SECRET is set and consistent

File Upload CORS Error:

Verify R2 bucket CORS policy includes your domain
Check all required environment variables are set
Confirm S3_PORT is set to 443 for HTTPS endpoints

Database Connection Error:

Verify DATABASE_URL is correct
Check if Prisma schema is pushed to database
Ensure database is accessible from your deployment

Getting Help

Issues: Open an issue on GitHub
Discussions: Use GitHub Discussions for questions
Documentation: Check individual tool documentation (Next.js, Prisma, etc.)

📄 License

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

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

⭐ Acknowledgments

Next.js - The React framework for production
Vercel - Deployment and hosting platform
Supabase - Backend-as-a-Service for PostgreSQL
Cloudflare - R2 object storage and global CDN
Prisma - Next-generation ORM for TypeScript
NextAuth.js - Complete open-source authentication solution

Built with ❤️ by Krishnadev

A modern file management system for the cloud-native world.

Name		Name	Last commit message	Last commit date
Latest commit History 31 Commits
app		app
contexts		contexts
lib		lib
prisma		prisma
public		public
.env.production.example		.env.production.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
Dockerfile		Dockerfile
R2_CORS_SETUP.md		R2_CORS_SETUP.md
README.md		README.md
README_NEW.md		README_NEW.md
auth.ts		auth.ts
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Krishnadev-cmd/S-files

Folders and files

Latest commit

History

Repository files navigation