Découvrez toutes vos applications

Un hub centralisé pour explorer, filtrer et accéder à l'ensemble de vos projets web, mobiles et outils.

\n\n \n

\n 🚀\n Toutes les applications\n

\n \n

\n\n \n \n\n \n\n\n",[18,66],"89ba6178-3bea-11f1-92e3-42b51c65c3df",["D",1776601394419],"// Fetch apps data from API\nconst API_BASE = \"\";\n\nlet allApps = [];\nlet currentCategory = \"all\";\nlet currentSearch = \"\";\nlet currentSort = \"featured\";\n\nconst categories = [\n { id: \"all\", name: \"Tout\", icon: \"🚀\" },\n { id: \"web\", name: \"Web Apps\", icon: \"🌐\" },\n { id: \"android\", name: \"Android\", icon: \"📱\" },\n { id: \"desktop\", name: \"Desktop\", icon: \"💻\" },\n { id: \"tool\", name: \"Outils\", icon: \"🔧\" },\n { id: \"multimedia\", name: \"Multimédia\", icon: \"🎬\" }\n];\n\nconst statusLabel = {\n active: { label: \"Active\", cls: \"status-active\" },\n beta: { label: \"Beta\", cls: \"status-beta\" },\n maintenance: { label: \"Maintenance\", cls: \"status-maintenance\" },\n archived: { label: \"Archived\", cls: \"status-archived\" }\n};\n\nconst categoryIcons = { all: \"🚀\", web: \"🌐\", android: \"📱\", desktop: \"💻\", tool: \"🔧\", multimedia: \"🎬\" };\n\n// Init\nasync function init() {\n try {\n const res = await fetch(\"/api/apps\");\n allApps = await res.json();\n } catch (e) {\n console.error(\"Failed to load apps\", e);\n allApps = [];\n }\n renderTabs();\n renderStats();\n renderGrid();\n setupEvents();\n setupCursorGlow();\n}\n\n// Render tabs\nfunction renderTabs() {\n const nav = document.getElementById(\"navTabs\");\n nav.innerHTML = categories.map(cat => {\n const count = cat.id === \"all\" ? allApps.length : allApps.filter(a => a.category === cat.id).length;\n return `\n `;\n }).join(\"\");\n}\n\n// Render stats\nfunction renderStats() {\n const stats = document.getElementById(\"statsBar\");\n const active = allApps.filter(a => a.status === \"active\").length;\n const featured = allApps.filter(a => a.featured).length;\n const cats = new Set(allApps.map(a => a.category)).size;\n stats.innerHTML = `\n

${allApps.length}

Applications

${active}

En production

${featured}

Mises en avant

${cats}

Catégories

\n `;\n}\n\n// Filter & sort\nfunction getFilteredApps() {\n let apps = [...allApps];\n if (currentCategory !== \"all\") apps = apps.filter(a => a.category === currentCategory);\n if (currentSearch.trim()) {\n const q = currentSearch.toLowerCase();\n apps = apps.filter(a =>\n a.title.toLowerCase().includes(q) ||\n a.shortDescription.toLowerCase().includes(q) ||\n a.tags.some(t => t.toLowerCase().includes(q))\n );\n }\n const diffOrder = { beginner: 0, intermediate: 1, advanced: 2 };\n switch (currentSort) {\n case \"featured\": apps.sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0)); break;\n case \"recent\": apps.sort((a, b) => b.metadata.year - a.metadata.year); break;\n case \"name_asc\": apps.sort((a, b) => a.title.localeCompare(b.title)); break;\n case \"name_desc\": apps.sort((a, b) => b.title.localeCompare(a.title)); break;\n case \"difficulty_asc\": apps.sort((a, b) => diffOrder[a.metadata.difficulty] - diffOrder[b.metadata.difficulty]); break;\n }\n return apps;\n}\n\n// Render grid\nfunction renderGrid() {\n const grid = document.getElementById(\"appsGrid\");\n const filtered = getFilteredApps();\n const cat = categories.find(c => c.id === currentCategory);\n document.getElementById(\"sectionIcon\").textContent = cat?.icon || \"🚀\";\n document.getElementById(\"sectionTitle\").textContent =\n currentCategory === \"all\" ? \"Toutes les applications\" : cat?.name || \"\";\n document.getElementById(\"resultsCount\").textContent =\n `${filtered.length} application${filtered.length !== 1 ? \"s\" : \"\"}`;\n\n if (filtered.length === 0) {\n grid.innerHTML = `\n

🔍

Aucune application trouvée

Essayez un autre terme de recherche ou une autre catégorie.

`;\n return;\n }\n\n grid.innerHTML = filtered.map((app, i) => renderCard(app, i)).join(\"\");\n}\n\nfunction difficultyDots(level) {\n const map = { beginner: 1, intermediate: 2, advanced: 3 };\n const n = map[level] || 1;\n const labels = { beginner: \"Easy\", intermediate: \"Medium\", advanced: \"Complex\" };\n const colors = { beginner: \"filled-beginner\", intermediate: \"filled-intermediate\", advanced: \"filled-advanced\" };\n return `\n

\n ${[1,2,3].map(d => `

`).join(\"\")}\n

\n ${labels[level]}`;\n}\n\nfunction renderCard(app, index) {\n const { label, cls } = statusLabel[app.status] || { label: app.status, cls: \"status-active\" };\n const links = [];\n if (app.links.github) links.push(`⌨`);\n if (app.links.netlify) links.push(`↗`);\n if (app.links.android) links.push(`▷`);\n if (app.links.documentation) links.push(`📄`);\n\n const delay = Math.min(index * 80, 600);\n\n return `\n

\n ${app.featured ? '

★ Mis en avant

' : \"\"}\n

${app.icon}

${app.title}

${app.shortDescription}

\n ${label}\n

${app.fullDescription}

\n ${app.tags.slice(0,4).map((t,i) => `${t}`).join(\"\")}\n

\n 📅 ${app.metadata.year}\n ⚙ ${app.metadata.tech.slice(0,2).join(\", \")}\n ${difficultyDots(app.metadata.difficulty)}\n ${app.metadata.duration ? `⏱ ${app.metadata.duration}` : \"\"}\n

\n \n ${app.cta} →\n \n

\n ${links.join(\"\")}\n

`;\n}\n\n// Events\nfunction setupEvents() {\n const searchInput = document.getElementById(\"searchInput\");\n const clearBtn = document.getElementById(\"clearBtn\");\n const sortSelect = document.getElementById(\"sortSelect\");\n\n let debounce;\n searchInput.addEventListener(\"input\", e => {\n currentSearch = e.target.value;\n clearBtn.style.display = currentSearch ? \"block\" : \"none\";\n clearTimeout(debounce);\n debounce = setTimeout(() => renderGrid(), 300);\n });\n\n clearBtn.addEventListener(\"click\", () => {\n searchInput.value = \"\";\n currentSearch = \"\";\n clearBtn.style.display = \"none\";\n renderGrid();\n });\n\n sortSelect.addEventListener(\"change\", e => {\n currentSort = e.target.value;\n renderGrid();\n });\n}\n\nfunction setCategory(cat) {\n currentCategory = cat;\n renderTabs();\n renderGrid();\n}\n\nfunction openApp(url) {\n window.open(url, \"_blank\");\n}\n\n// Cursor glow\nfunction setupCursorGlow() {\n const glow = document.getElementById(\"cursorGlow\");\n document.addEventListener(\"mousemove\", e => {\n glow.style.left = e.clientX + \"px\";\n glow.style.top = e.clientY + \"px\";\n });\n document.querySelectorAll(\".app-card\").forEach(card => {\n card.addEventListener(\"mouseenter\", () => {\n glow.style.width = \"80px\";\n glow.style.height = \"80px\";\n glow.classList.add(\"visible\");\n });\n card.addEventListener(\"mouseleave\", () => {\n glow.style.width = \"32px\";\n glow.style.height = \"32px\";\n glow.classList.remove(\"visible\");\n });\n });\n}\n\n// Make setCategory global\nwindow.setCategory = setCategory;\nwindow.openApp = openApp;\n\ninit();\n",[18,80],"pulls","branches",1,"forks","envVars",{"_180":26,"_182":26},"connections",{"_180":26,"_181":26},"count","unfilledCount","emptyCount",{"_34":216,"_13":215,"_64":210,"_44":-5,"_36":37,"_156":192,"_157":24,"_38":217,"_40":26,"_67":83,"_159":-5,"_68":30,"_160":-5,"_195":218,"_17":219},{"_34":207,"_13":208,"_64":209,"_44":210,"_36":37,"_156":192,"_157":24,"_38":211,"_40":26,"_67":81,"_159":212,"_68":30,"_160":-5,"_195":213,"_17":214},{"_34":155,"_13":18,"_64":82,"_44":-5,"_36":37,"_156":41,"_157":24,"_38":204,"_40":26,"_67":83,"_159":-5,"_68":30,"_160":-5,"_195":205,"_17":206},{"_34":168,"_13":80,"_64":79,"_44":82,"_36":37,"_156":74,"_157":24,"_38":201,"_40":26,"_67":81,"_159":170,"_68":30,"_160":-5,"_195":202,"_17":203},{"_34":164,"_13":66,"_64":65,"_44":82,"_36":37,"_156":41,"_157":24,"_38":198,"_40":26,"_67":21,"_159":166,"_68":30,"_160":-5,"_195":199,"_17":200},{"_34":189,"_13":190,"_64":96,"_44":-5,"_36":37,"_156":120,"_157":24,"_38":191,"_40":192,"_67":193,"_159":194,"_68":30,"_160":-5,"_195":196,"_17":197},"8f5c5578-3bea-11f1-8f44-42b51c65c3df","main.ts",["D",1776601403851],2,"http","import { Hono } from \"npm:hono@4\";\nimport { serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { applications } from \"./data/apps.ts\";\n\nconst app = new Hono();\n\napp.onError((err) => Promise.reject(err));\n\n// API: return all applications\napp.get(\"/api/apps\", (c) => {\n return c.json(applications);\n});\n\n// Source redirect\napp.get(\"/source\", (c) => {\n return c.redirect(parseVal().links.self.val);\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve index.html for all other routes\napp.get(\"*\", async (c) => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\nexport default app.fetch;\n","children",[],[190],["D",1776601360164],[],[18,66],["D",1776601394419],[],[18,80],["D",1776601360164],[186,187],[18],"4bd75bf4-3bea-11f1-92e3-42b51c65c3df","apps.ts","4bd75cb2-3bea-11f1-92e3-42b51c65c3df","ebd6bc38-1123-42d5-b1ef-d27aab99eb27",["D",1776601290585],"export interface AppLink {\n netlify?: string;\n github?: string;\n android?: string;\n documentation?: string;\n}\n\nexport interface AppMetadata {\n year: number;\n tech: string[];\n difficulty: \"beginner\" | \"intermediate\" | \"advanced\";\n apiRequired?: boolean;\n duration?: string;\n}\n\nexport interface Application {\n appId: string;\n title: string;\n category: \"web\" | \"android\" | \"desktop\" | \"tool\" | \"multimedia\";\n status: \"active\" | \"beta\" | \"maintenance\" | \"archived\";\n featured: boolean;\n shortDescription: string;\n fullDescription: string;\n cta: string;\n icon: string;\n tags: string[];\n url: string;\n links: AppLink;\n metadata: AppMetadata;\n}\n\nexport const applications: Application[] = [\n {\n appId: \"pignada-tirage\",\n title: \"Pignada Tirage\",\n category: \"web\",\n status: \"active\",\n featured: true,\n shortDescription: \"Tirage équitable en 1 clic - Pour les équipes de pétanque\",\n fullDescription: \"Application de tirage équitable avec gestion des niveaux. Parfait pour les clubs de pétanque : création d'équipes équilibrées, historique des matchs, synchronisation multi-appareil. Élimine les débats sur la composition des équipes.\",\n cta: \"Lancer\",\n icon: \"🎯\",\n tags: [\"Pétanque\", \"Tirage\", \"Club\", \"Sport\"],\n url: \"https://example.com/pignada\",\n links: { github: \"https://github.com/example/pignada\" },\n metadata: { year: 2024, tech: [\"React\", \"Firebase\"], difficulty: \"beginner\" }\n },\n {\n appId: \"face-studio\",\n title: \"Face Studio\",\n category: \"web\",\n status: \"active\",\n featured: true,\n shortDescription: \"Correction automatique de la balance des blancs\",\n fullDescription: \"Outil IA de correction colorimétrique avancée pour portraits. Ajustez automatiquement la balance des blancs, la luminosité et le contraste. Idéal pour photographes professionnels et amateurs exigeants.\",\n cta: \"Essayer\",\n icon: \"📸\",\n tags: [\"IA\", \"Portrait\", \"Retouche\", \"Photo\"],\n url: \"https://example.com/face-studio\",\n links: { github: \"https://github.com/example/face-studio\", netlify: \"https://face-studio.netlify.app\" },\n metadata: { year: 2025, tech: [\"Vue.js\", \"TensorFlow\"], difficulty: \"intermediate\", apiRequired: true }\n },\n {\n appId: \"vignoble-bordeaux\",\n title: \"Vignoble de Bordeaux\",\n category: \"web\",\n status: \"active\",\n featured: true,\n shortDescription: \"Carte interactive des vignobles du Bordelais\",\n fullDescription: \"Explorez l'appellation Bordeaux comme jamais auparavant. Navigation sur carte satellite, fiches détaillées de chaque château, notes de dégustation, millésimes et suggestions d'accord mets-vins. Une référence pour les amateurs de vin.\",\n cta: \"Explorer\",\n icon: \"🍷\",\n tags: [\"Vin\", \"Carte\", \"Bordeaux\", \"Gastronomie\"],\n url: \"https://example.com/vignoble\",\n links: { github: \"https://github.com/example/vignoble\" },\n metadata: { year: 2024, tech: [\"Mapbox\", \"Next.js\"], difficulty: \"intermediate\" }\n },\n {\n appId: \"club-manager\",\n title: \"Club Manager\",\n category: \"web\",\n status: \"beta\",\n featured: false,\n shortDescription: \"Gestion centralisée pour clubs - Membres, calendrier, résultats\",\n fullDescription: \"Plateforme de gestion centralisée pour clubs : synchronisation des membres, calendrier des événements, partage des résultats en direct. Connecte tous les appareils du club instantanément.\",\n cta: \"Accéder\",\n icon: \"🏆\",\n tags: [\"Club\", \"Gestion\", \"Calendrier\"],\n url: \"https://example.com/club-manager\",\n links: { github: \"https://github.com/example/club-manager\" },\n metadata: { year: 2025, tech: [\"React\", \"Node.js\"], difficulty: \"advanced\" }\n },\n {\n appId: \"media-converter\",\n title: \"Media Converter\",\n category: \"tool\",\n status: \"active\",\n featured: false,\n shortDescription: \"Conversion de fichiers multimédia rapide et sans installation\",\n fullDescription: \"Convertissez vos fichiers vidéo, audio et image en ligne sans installation. Supporte plus de 50 formats, traitement par lots, qualité préservée. Gratuit, sans limite de taille pour les fichiers courants.\",\n cta: \"Convertir\",\n icon: \"🔄\",\n tags: [\"Conversion\", \"Vidéo\", \"Audio\"],\n url: \"https://example.com/media-converter\",\n links: {},\n metadata: { year: 2023, tech: [\"FFmpeg\", \"WebAssembly\"], difficulty: \"beginner\" }\n },\n {\n appId: \"sketch-motion\",\n title: \"Sketch Motion\",\n category: \"multimedia\",\n status: \"active\",\n featured: false,\n shortDescription: \"Démos animées créées avec Framer Motion - Portfolio créatif\",\n fullDescription: \"Collection de démonstrations d'animations interactives réalisées avec Framer Motion. Explorez des effets de parallaxe, morphing de formes, transitions fluides et micro-interactions. Source code disponible pour chaque démo.\",\n cta: \"Voir la démo\",\n icon: \"✨\",\n tags: [\"Animation\", \"Motion\", \"Framer\"],\n url: \"https://example.com/sketch-motion\",\n links: { github: \"https://github.com/example/sketch-motion\" },\n metadata: { year: 2024, tech: [\"Framer Motion\", \"React\"], difficulty: \"intermediate\", duration: \"5:32\" }\n },\n {\n appId: \"track-app\",\n title: \"TrackApp Mobile\",\n category: \"android\",\n status: \"active\",\n featured: false,\n shortDescription: \"Suivi d'activités physiques avec GPS intégré\",\n fullDescription: \"Application Android de suivi sportif complète. Enregistrement GPS des parcours, statistiques détaillées, défis entre amis, tableaux de bord personnalisables. Compatible avec les montres connectées Android.\",\n cta: \"Télécharger\",\n icon: \"🏃\",\n tags: [\"Sport\", \"GPS\", \"Android\", \"Santé\"],\n url: \"https://play.google.com/store/apps/details?id=example.track\",\n links: { android: \"https://play.google.com/store/apps/details?id=example.track\" },\n metadata: { year: 2024, tech: [\"Kotlin\", \"Google Maps\"], difficulty: \"intermediate\" }\n },\n {\n appId: \"code-notes\",\n title: \"Code Notes\",\n category: \"desktop\",\n status: \"beta\",\n featured: false,\n shortDescription: \"Éditeur de notes pour développeurs - Markdown + code snippets\",\n fullDescription: \"Application de bureau pour développeurs : notes Markdown avec coloration syntaxique, gestion de snippets, recherche full-text ultra rapide. Synchronisation locale, mode hors ligne total. Léger et rapide.\",\n cta: \"Télécharger\",\n icon: \"📝\",\n tags: [\"Notes\", \"Markdown\", \"Dev\", \"Snippets\"],\n url: \"https://example.com/code-notes\",\n links: { github: \"https://github.com/example/code-notes\" },\n metadata: { year: 2025, tech: [\"Electron\", \"CodeMirror\"], difficulty: \"beginner\" }\n },\n {\n appId: \"palette-gen\",\n title: \"Palette Generator\",\n category: \"tool\",\n status: \"active\",\n featured: false,\n shortDescription: \"Générateur de palettes couleurs harmonieuses pour designers\",\n fullDescription: \"Créez des palettes de couleurs harmonieuses en secondes. Basé sur la théorie des couleurs, génère des combinaisons complémentaires, analogues et triadiques. Export CSS, SCSS, JSON et Figma tokens.\",\n cta: \"Générer\",\n icon: \"🎨\",\n tags: [\"Design\", \"Couleurs\", \"CSS\", \"UI\"],\n url: \"https://example.com/palette-gen\",\n links: { github: \"https://github.com/example/palette-gen\", netlify: \"https://palette-gen.netlify.app\" },\n metadata: { year: 2023, tech: [\"JavaScript\", \"Canvas API\"], difficulty: \"beginner\" }\n }\n];\n\nexport const categories = [\n { id: \"all\", name: \"Tout\", icon: \"🚀\" },\n { id: \"web\", name: \"Web Apps\", icon: \"🌐\" },\n { id: \"android\", name: \"Android\", icon: \"📱\" },\n { id: \"desktop\", name: \"Desktop\", icon: \"💻\" },\n { id: \"tool\", name: \"Outils\", icon: \"🔧\" },\n { id: \"multimedia\", name: \"Multimédia\", icon: \"🎬\" }\n];\n",[],[215,208],"data","4bd79164-3bea-11f1-92e3-42b51c65c3df",["D",1776601290585],[184],[215],["D",1776601169660],{"_11":12,"_133":71},{"_11":12,"_129":-5,"_70":71,"_31":69,"_130":131,"_132":30},{"_40":120,"_13":16,"_34":37,"_121":85,"_122":-5,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":14,"_128":12},"ctx",{"_54":-5,"_152":257,"_258":259,"_260":261,"_262":30,"_263":30,"_264":30,"_265":24,"_266":-5,"_267":-7,"_268":-7,"_269":26,"_270":30,"_271":30,"_272":-5,"_273":30,"_274":30,"_275":30,"_276":-5},"ENV",{"_228":229,"_230":231,"_232":16,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend