Up Down Cloud

A modern, full-stack cloud storage application built with Qwik and QwikCity. This project provides a user-friendly interface for file management, including upload, organization, and trash functionality.

Features

• File Management: Upload, organize, rename, and delete files and folders
• Cloud Storage: Secure file storage with S3 integration
• User Authentication: Login and registration system
• Trash System: Soft delete with restore and permanent delete options
• Responsive UI: Built with Tailwind CSS for a modern, mobile-friendly experience
• Real-time Uploads: Progress tracking and resumable uploads

Tech Stack

• Frontend: Qwik, TypeScript, Tailwind CSS
• Backend: QwikCity API routes (integrates with external services)
• Build Tool: Vite
• Icons: Qwikest Icons (Lucide)

Getting Started

Prerequisites

• Bun v1.3 or higher
• npm or bun package manager
• Two backend services (Auth Service and Files Service) - see below

Required Services

This application requires two backend services:

1. Auth Service: Handles user authentication (login, registration, token management)

   • GitHub: Medo-ID/auth-service

2. Files Service: Manages file operations (upload, download, delete, rename, etc.)

   • GitHub: Medo-ID/files-service

Options:

• Use the pre-built services above
• Build your own services and implement the expected API contracts
• Build a backend directly using QwikCity API routes in /src/routes/api/ (replace the proxy routes with direct implementations)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/up-down-cloud.git
   cd up-down-cloud

2. Install dependencies:

   npm install
   # or
   bun install

3. Set up environment variables: Create a .env file in the root directory with the following variables:

   AUTH_SERVICE_ENDPOINT=your-auth-service-url
   FILES_SERVICE_ENDPOINT=your-files-service-url
   

   Replace with your actual service endpoints.

4. Start the development server:

   npm start
   # or
   bun start

   The app will be available at http://localhost:5173.

Build for Production

npm run build
# or
bun run build

Preview Production Build

npm run preview
# or
bun run preview

Project Structure

src/
├── components/          # Reusable UI components
├── routes/             # Page routes and API endpoints
│   ├── (app)/          # Protected app routes
│   └── api/            # API routes for uploads, etc.
├── context/            # Qwik context providers
├── hooks/              # Custom Qwik hooks
└── utils/              # Utility functions

Extending the Project

This project is designed to be easily extensible. Here are some ways to add new features:

Adding New Components

Create components in src/components/ and import them into your routes or other components.

Adding New Routes

• Add new pages in src/routes/
• Use QwikCity's directory-based routing
• For protected routes, place them under src/routes/(app)/

Adding API Endpoints

Add new API routes in src/routes/api/. Use QwikCity's RequestHandler for server-side logic.

Integrating with External Services

The app uses environment variables for service endpoints. Add new services by:

1. Adding new env vars
2. Creating API routes to proxy requests
3. Updating components to use the new endpoints

Database and Storage

Currently integrates with external auth and file services. To add local database support:

• Add a database ORM (e.g., Prisma)
• Create database models
• Update API routes to interact with the database

Features in Development

The following features are planned or partially implemented:

• Share Feature: Not yet implemented in the files service. Requires:

  • Share API endpoints in the backend
  • Frontend UI for managing file shares
  • Permission management system

• Move File Feature: Built in the files service but not yet in the frontend. Requires:

  • UI component for move actions
  • Integration with the move endpoint in the files service

Deployment

This app can be deployed to various platforms:

• Vercel: Use npm run build and deploy the dist/ folder
• Netlify: Add as a static site with serverless functions
• Node.js servers: Use Express or other adapters via qwik add

For more deployment options, see the Qwik deployment docs.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source. Feel free to use and modify it for your own projects.

Links

• Qwik Documentation
• QwikCity Guide
• Tailwind CSS
• Vite