Project Overview
Cloudsolem is a personal cloud storage solution designed for storing and streaming video content from any device. Built with Next.js 15 and React 19, it features a modern dark-themed interface, folder organization, and optimized mobile experience.
Key Features
-
File Management
- Upload videos and images via drag-and-drop
- Create nested folder hierarchies
- Rename and delete files with confirmation
- Real-time storage quota tracking
-
Video Streaming
- Direct video playback in browser
- Cloudinary-powered video hosting
- Automatic thumbnail generation
- Duration display on video cards
-
Folder System
- Tree navigation sidebar
- Breadcrumb path navigation
- Nested folder support
- File count per folder
-
User Experience
- Toast notifications for all actions
- Click-outside menu dismissal
- Mobile-optimized responsive design
- Dark theme with blue accents
-
Security
- Password-protected access
- Cookie-based authentication
- Secure file deletion from CDN
Technical Stack
- Frontend: Next.js 15, React 19, TypeScript
- Styling: SCSS with BEM methodology
- Database: MongoDB for file metadata
- Storage: Cloudinary (25GB free tier)
- Icons: Lucide React
- Auth: Cookie-based session management
Mobile Optimization
The interface is fully responsive with dedicated mobile breakpoints:
- Compact header with smaller buttons
- 2-column file grid on small screens
- Touch-friendly toast notifications
- Collapsible sidebar navigation
Live Demo
Access your personal cloud: avsolem.com/cloud