Spaces:

jojonocode
/

bucketmaster-cloud-storage-wizardry

Running

App Files Files Community

jojonocode commited on Nov 17, 2025

Commit

0c45221

verified ·

1 Parent(s): 5157def

Crée pour moi le frontend complet d’une application web appelée BucketMaster.

Browse files

Cette app permet à un utilisateur de :

créer un compte

créer des projets

créer des buckets dans chaque projet

envoyer, télécharger, visualiser et supprimer des fichiers

gérer les clés API

voir des dashboards simples sur l’espace utilisé

🎨 Charte graphique

Utilise les couleurs suivantes :

Jaune soleil (#F7D348)

Gris métallique (#6E6E6E)

Noir profond (#000000)

Blanc pur (#FFFFFF)

Style moderne, minimal, très propre, inspiré des dashboards pro (Linear, Supabase, Stripe).

🖥️ Pages à générer

Page Login / Register

Dashboard général

Page “Projects”

liste des projets

création d’un projet

Page “Project Detail”

liste des buckets

bouton “Créer un bucket”

Page “Bucket Detail”

upload de fichiers

aperçu des images

actions : télécharger, supprimer

Page “API Keys”

afficher, créer, supprimer une clé

Page “Settings”

🧠 Logique frontend

State global (store) pour : user, projects, buckets, files, API keys

Composants très modulaires

Système de notifications (success/error)

Composants réutilisables :

Button

Card

Modal

FileUploader

EmptyState

Table

NavBar + Sidebar

🪄 Attente

Génère :

les pages

les composants

la navigation

un design cohérent

une UI complète prête à connecter à un backend REST

Files changed (7) hide show

README.md +8 -5
components/sidebar.js +25 -0
index.html +58 -19
scripts/main.js +93 -0
scripts/router.js +232 -0
scripts/store.js +88 -0
styles/main.css +67 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Bucketmaster Cloud Storage Wizardry
-emoji: 🐨
-colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: BucketMaster - Cloud Storage Wizardry 🪄
+colorFrom: red
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/sidebar.js ADDED Viewed

	@@ -0,0 +1,25 @@

+class CloudVaultSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 280px;
+                    background-color: white;
+                    border-right: 1px solid #E4E7EB;
+                    height: 100vh;
+                }
+                .sidebar-item {
+                    transition: all 0.2s ease;
+                }
+                .sidebar-item:hover {
+                    background-color: #FFF2CC;
+                }
+                .sidebar-item.active {
+                    background-color: #FFE699;
+                    border-left: 4px solid #FFC000;
+                }

index.html CHANGED Viewed

@@ -1,19 +1,58 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BucketMaster - Cloud Storage</title>
+    <link rel="stylesheet" href="styles/main.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        sun: '#F7D348',
+                        metal: '#6E6E6E',
+                        deep: '#000000',
+                        pure: '#FFFFFF'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-pure text-deep min-h-screen">
+    <div id="app">
+        <!-- Auth pages will be rendered here initially -->
+        <div id="auth-container"></div>
+        <!-- Main app container (hidden until auth) -->
+        <div id="app-container" class="hidden">
+            <bucketmaster-navbar></bucketmaster-navbar>
+            <div class="flex">
+                <bucketmaster-sidebar></bucketmaster-sidebar>
+                <main class="flex-1 p-8">
+                    <div id="page-content"></div>
+                </main>
+            </div>
+        </div>
+    </div>
+    <!-- Components -->
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/button.js"></script>
+    <script src="components/card.js"></script>
+    <script src="components/modal.js"></script>
+    <script src="components/file-uploader.js"></script>
+    <script src="components/empty-state.js"></script>
+    <script src="components/table.js"></script>
+    <script src="components/notification.js"></script>
+    <!-- Scripts -->
+    <script src="scripts/store.js"></script>
+    <script src="scripts/router.js"></script>
+    <script src="scripts/main.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

scripts/main.js ADDED Viewed

	@@ -0,0 +1,93 @@

+```javascript
+import store from './store.js';
+import router from './router.js';
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Feather Icons
+    if (window.feather) {
+        feather.replace();
+    }
+    // Check auth state
+    if (!store.state.user) {
+        window.location.hash = '#/login';
+        document.getElementById('app-container').classList.add('hidden');
+        document.getElementById('auth-container').classList.remove('hidden');
+    } else {
+        document.getElementById('app-container').classList.remove('hidden');
+        document.getElementById('auth-container').classList.add('hidden');
+    }
+    // Set up event listeners
+    document.addEventListener('click', (e) => {
+        // Handle project clicks
+        if (e.target.closest('[data-project-id]')) {
+            const projectId = e.target.closest('[data-project-id]').getAttribute('data-project-id');
+            window.location.hash = `#/projects/${projectId}`;
+        }
+        // Handle bucket clicks
+        if (e.target.closest('[data-bucket-id]')) {
+            const bucketId = e.target.closest('[data-bucket-id]').getAttribute('data-bucket-id');
+            window.location.hash = `#/buckets/${bucketId}`;
+        }
+        // Handle file actions
+        if (e.target.closest('[data-file-id]')) {
+            const fileId = e.target.closest('[data-file-id]').getAttribute('data-file-id');
+            const action = e.target.closest('[data-file-id]').getAttribute('data-action');
+            if (action === 'download') {
+                store.addNotification({
+                    id: Date.now(),
+                    type: 'success',
+                    message: 'Download started'
+                });
+            } else if (action === 'delete') {
+                store.removeFile(fileId);
+                store.addNotification({
+                    id: Date.now(),
+                    type: 'success',
+                    message: 'File deleted'
+                });
+            }
+        }
+        // Handle API key deletion
+        if (e.target.closest('[data-key-id]')) {
+            const keyId = e.target.closest('[data-key-id]').getAttribute('data-key-id');
+            store.removeApiKey(keyId);
+            store.addNotification({
+                id: Date.now(),
+                type: 'success',
+                message: 'API key deleted'
+            });
+        }
+        // Handle create project button
+        if (e.target.closest('#create-project-btn')) {
+            const modal = document.createElement('bucketmaster-modal');
+            modal.setAttribute('title', 'Create Project');
+            modal.innerHTML = `
+                <form id="create-project-form" class="space-y-4">
+                    <div>
+                        <label class="block text-metal mb-1">Project Name</label>
+                        <input type="text" required class="w-full px-3 py-2 border border-metal-200 rounded">
+                    </div>
+                    <div class="pt-2">
+                        <bucketmaster-button type="submit">Create Project</bucketmaster-button>
+                    </div>
+                </form>
+            `;
+            document.body.appendChild(modal);
+        }
+        // Handle create bucket button
+        if (e.target.closest('#create-bucket-btn')) {
+            const modal = document.createElement('bucketmaster-modal');
+            modal.setAttribute('title', 'Create Bucket');
+            modal.innerHTML = `
+                <form id="create-bucket-form" class="space-y-4">
+                    <div>
+                        <label class="block text-metal mb-1">Bucket Name</label>
+                        <

scripts/router.js ADDED Viewed

	@@ -0,0 +1,232 @@

+class Router {
+    constructor() {
+        this.routes = {
+            '/login': this.renderLogin,
+            '/register': this.renderRegister,
+            '/dashboard': this.renderDashboard,
+            '/projects': this.renderProjects,
+            '/projects/:id': this.renderProjectDetail,
+            '/buckets/:id': this.renderBucketDetail,
+            '/api-keys': this.renderApiKeys,
+            '/settings': this.renderSettings
+        };
+        window.addEventListener('hashchange', () => this.handleRoute());
+        this.handleRoute();
+    }
+    handleRoute() {
+        const path = window.location.hash.substring(1) || '/dashboard';
+        const route = Object.keys(this.routes).find(r => {
+            if (r.includes(':')) {
+                const basePath = r.split('/:')[0];
+                return path.startsWith(basePath);
+            }
+            return r === path;
+        });
+        if (route) {
+            this.routes[route]();
+        } else {
+            this.renderNotFound();
+        }
+    }
+    renderLogin() {
+        document.getElementById('auth-container').innerHTML = `
+            <bucketmaster-auth type="login"></bucketmaster-auth>
+        `;
+    }
+    renderRegister() {
+        document.getElementById('auth-container').innerHTML = `
+            <bucketmaster-auth type="register"></bucketmaster-auth>
+        `;
+    }
+    renderDashboard() {
+        document.getElementById('page-content').innerHTML = `
+            <h1 class="text-2xl font-bold mb-6">Dashboard</h1>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <bucketmaster-card title="Projects" value="${store.state.projects.length}" icon="folder"></bucketmaster-card>
+                <bucketmaster-card title="Buckets" value="${store.state.buckets.length}" icon="database"></bucketmaster-card>
+                <bucketmaster-card title="Storage Used" value="2.5 GB" icon="hard-drive"></bucketmaster-card>
+            </div>
+        `;
+    }
+    renderProjects() {
+        document.getElementById('page-content').innerHTML = `
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-2xl font-bold">Projects</h1>
+                <bucketmaster-button id="create-project-btn" icon="plus">New Project</bucketmaster-button>
+            </div>
+            ${store.state.projects.length > 0 ? `
+                <bucketmaster-table>
+                    ${store.state.projects.map(project => `
+                        <tr class="hover:bg-sun/10 transition-200 cursor-pointer" data-project-id="${project.id}">
+                            <td>${project.name}</td>
+                            <td>${project.buckets.length} buckets</td>
+                            <td>${new Date(project.createdAt).toLocaleDateString()}</td>
+                        </tr>
+                    `).join('')}
+                </bucketmaster-table>
+            ` : `
+                <bucketmaster-empty-state
+                    title="No projects yet"
+                    description="Get started by creating your first project"
+                    action-text="Create Project"
+                    action-id="create-project-btn"
+                    icon="folder-plus">
+                </bucketmaster-empty-state>
+            `}
+        `;
+    }
+    renderProjectDetail() {
+        const projectId = window.location.hash.split('/')[2];
+        store.setCurrentProject(projectId);
+        document.getElementById('page-content').innerHTML = `
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-2xl font-bold">${store.state.currentProject?.name || 'Project'}</h1>
+                <bucketmaster-button id="create-bucket-btn" icon="plus">New Bucket</bucketmaster-button>
+            </div>
+            ${store.state.currentProject?.buckets.length > 0 ? `
+                <bucketmaster-table>
+                    ${store.state.currentProject.buckets.map(bucket => `
+                        <tr class="hover:bg-sun/10 transition-200 cursor-pointer" data-bucket-id="${bucket.id}">
+                            <td>${bucket.name}</td>
+                            <td>${bucket.files.length} files</td>
+                            <td>${bucket.size}</td>
+                            <td>${new Date(bucket.createdAt).toLocaleDateString()}</td>
+                        </tr>
+                    `).join('')}
+                </bucketmaster-table>
+            ` : `
+                <bucketmaster-empty-state
+                    title="No buckets yet"
+                    description="Create your first bucket to start uploading files"
+                    action-text="Create Bucket"
+                    action-id="create-bucket-btn"
+                    icon="database">
+                </bucketmaster-empty-state>
+            `}
+        `;
+    }
+    renderBucketDetail() {
+        const bucketId = window.location.hash.split('/')[2];
+        store.setCurrentBucket(bucketId);
+        document.getElementById('page-content').innerHTML = `
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-2xl font-bold">${store.state.currentBucket?.name || 'Bucket'}</h1>
+                <bucketmaster-button id="upload-file-btn" icon="upload">Upload File</bucketmaster-button>
+            </div>
+            ${store.state.currentBucket?.files.length > 0 ? `
+                <bucketmaster-table>
+                    ${store.state.currentBucket.files.map(file => `
+                        <tr>
+                            <td class="flex items-center">
+                                <i data-feather="${file.icon}" class="file-icon file-icon-${file.type.toLowerCase()}"></i>
+                                ${file.name}
+                            </td>
+                            <td>${file.size}</td>
+                            <td>${file.type}</td>
+                            <td>${new Date(file.uploadedAt).toLocaleDateString()}</td>
+                            <td class="text-right">
+                                <div class="flex space-x-2">
+                                    <button class="text-metal hover:text-sun transition-200" data-file-id="${file.id}" data-action="download">
+                                        <i data-feather="download"></i>
+                                    </button>
+                                    <button class="text-metal hover:text-red-500 transition-200" data-file-id="${file.id}" data-action="delete">
+                                        <i data-feather="trash-2"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    `).join('')}
+                </bucketmaster-table>
+            ` : `
+                <bucketmaster-empty-state
+                    title="No files yet"
+                    description="Upload your first file to this bucket"
+                    action-text="Upload File"
+                    action-id="upload-file-btn"
+                    icon="file">
+                </bucketmaster-empty-state>
+            `}
+        `;
+    }
+    renderApiKeys() {
+        document.getElementById('page-content').innerHTML = `
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-2xl font-bold">API Keys</h1>
+                <bucketmaster-button id="create-api-key-btn" icon="plus">New API Key</bucketmaster-button>
+            </div>
+            ${store.state.apiKeys.length > 0 ? `
+                <bucketmaster-table>
+                    ${store.state.apiKeys.map(key => `
+                        <tr>
+                            <td>${key.name}</td>
+                            <td>${key.key.substring(0, 8)}...</td>
+                            <td>${new Date(key.createdAt).toLocaleDateString()}</td>
+                            <td class="text-right">
+                                <button class="text-metal hover:text-red-500 transition-200" data-key-id="${key.id}">
+                                    <i data-feather="trash-2"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    `).join('')}
+                </bucketmaster-table>
+            ` : `
+                <bucketmaster-empty-state
+                    title="No API Keys"
+                    description="Create your first API key to access the BucketMaster API"
+                    action-text="Create API Key"
+                    action-id="create-api-key-btn"
+                    icon="key">
+                </bucketmaster-empty-state>
+            `}
+        `;
+    }
+    renderSettings() {
+        document.getElementById('page-content').innerHTML = `
+            <h1 class="text-2xl font-bold mb-6">Settings</h1>
+            <div class="bg-pure rounded-lg shadow p-6 max-w-2xl">
+                <h2 class="text-xl font-semibold mb-4">Account</h2>
+                <form id="account-form" class="space-y-4">
+                    <div>
+                        <label class="block text-metal mb-1">Name</label>
+                        <input type="text" value="${store.state.user?.name || ''}" class="w-full px-3 py-2 border border-metal-200 rounded">
+                    </div>
+                    <div>
+                        <label class="block text-metal mb-1">Email</label>
+                        <input type="email" value="${store.state.user?.email || ''}" class="w-full px-3 py-2 border border-metal-200 rounded">
+                    </div>
+                    <div class="pt-4">
+                        <bucketmaster-button type="submit">Save Changes</bucketmaster-button>
+                    </div>
+                </form>
+            </div>
+        `;
+    }
+    renderNotFound() {
+        document.getElementById('page-content').innerHTML = `
+            <bucketmaster-empty-state
+                title="Page Not Found"
+                description="The page you're looking for doesn't exist"
+                action-text="Go to Dashboard"
+                action-id="go-to-dashboard"
+                icon="alert-circle">
+            </bucketmaster-empty-state>
+        `;
+    }
+}
+const router = new Router();
+export default router;

scripts/store.js ADDED Viewed

	@@ -0,0 +1,88 @@

+class Store {
+    constructor() {
+        this.state = {
+            user: null,
+            projects: [],
+            currentProject: null,
+            buckets: [],
+            currentBucket: null,
+            files: [],
+            apiKeys: [],
+            notifications: []
+        };
+    }
+    setUser(user) {
+        this.state.user = user;
+        this.save();
+    }
+    addProject(project) {
+        this.state.projects.push(project);
+        this.save();
+    }
+    setCurrentProject(projectId) {
+        this.state.currentProject = this.state.projects.find(p => p.id === projectId);
+        this.save();
+    }
+    addBucket(bucket) {
+        this.state.buckets.push(bucket);
+        this.save();
+    }
+    setCurrentBucket(bucketId) {
+        this.state.currentBucket = this.state.buckets.find(b => b.id === bucketId);
+        this.save();
+    }
+    addFile(file) {
+        this.state.files.push(file);
+        this.save();
+    }
+    removeFile(fileId) {
+        this.state.files = this.state.files.filter(f => f.id !== fileId);
+        this.save();
+    }
+    addApiKey(apiKey) {
+        this.state.apiKeys.push(apiKey);
+        this.save();
+    }
+    removeApiKey(keyId) {
+        this.state.apiKeys = this.state.apiKeys.filter(k => k.id !== keyId);
+        this.save();
+    }
+    addNotification(notification) {
+        this.state.notifications.push(notification);
+        setTimeout(() => {
+            this.removeNotification(notification.id);
+        }, 3000);
+        this.save();
+    }
+    removeNotification(id) {
+        this.state.notifications = this.state.notifications.filter(n => n.id !== id);
+        this.save();
+    }
+    save() {
+        localStorage.setItem('bucketmaster-state', JSON.stringify(this.state));
+    }
+    load() {
+        const saved = localStorage.getItem('bucketmaster-state');
+        if (saved) {
+            this.state = JSON.parse(saved);
+        }
+    }
+}
+const store = new Store();
+store.load();
+export default store;

styles/main.css ADDED Viewed

	@@ -0,0 +1,67 @@

+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+/* Base styles */
+body {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #F7D348;
+    border-radius: 3px;
+}
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+.fade-in {
+    animation: fadeIn 0.3s ease;
+}
+/* Transitions */
+.transition-200 {
+    transition: all 0.2s ease;
+}
+/* File icons */
+.file-icon {
+    @apply w-5 h-5 mr-2;
+}
+.file-icon-image {
+    color: #38A169;
+}
+.file-icon-pdf {
+    color: #E53E3E;
+}
+.file-icon-video {
+    color: #805AD5;
+}
+.file-icon-audio {
+    color: #3182CE;
+}
+.file-icon-zip {
+    color: #DD6B20;
+}
+.file-icon-default {
+    color: #6E6E6E;
+}