Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Functionality

• Login/Session management by Next Auth
• File upload and folder creation using the web app
• Hiariarchial files and folder permission management like Google drive
• Shared Drive
• Recycle bin
• Storage management
• Subscription model
• UI Enhancement
• Progressive Web App

Integration

• NextJs for Backend and Frontend (App router)
• Next Auth for user session handling and protect routes
• Third-party event scheduler integrated Qstash
• Validation using Yup
• File upload to s3/digitalocean Multipart
• Razorpay payment gateway

Optimization

• Image Optimization using Next Image, Sharp library
• Automatic image compression based on browser speed
• Video Streaming using HTML5 and http headers properties like Content-Type,Content-Range,Accept-Ranges More
• File upload by splitting the file into small chunks from Frontend to backend

Stack -

• React Js
• Next Js
• Redux
• Typescript
• Scss
• MongoDB
• Next Auth
• Vercel (Serverless)
• Razorpay (Payment gateway)

Demo

Link - Here username: mbox.test@yopmail.com password: Abcd@1234

Theme Desktop: https://dribbble.com/shots/13944002-JenxCloud-File-Management-Dashboard Theme Mobile: https://dribbble.com/shots/13957659-Cloud-Drive-App

Preview -