Logo CookieRun

Fanbase CookieRun Kingdom

"Fanbase" du jeu mobile CookieRun Kingdom

Le projet

Site fan non officiel dédié au jeu mobile CookieRun Kingdom, centralisant les cookies, leurs builds et leurs costumes.

Joueuse de CookieRun Kingdom, je me retrouvais régulièrement à chercher des informations éparpillées sur plusieurs wikis et forums. J'ai décidé de transformer ce problème concret en projet web : créer une référence centralisée, claire et agréable à utiliser pour la communauté francophone.

L'objectif était aussi technique qu'esthétique — concevoir une interface fidèle à l'univers visuel du jeu, tout en construisant une architecture de données solide permettant d'ajouter ou modifier du contenu sans toucher au code.

Conception

Les maquettes initiales

J'ai commencé par maquetter trois pages sur Figma : l'accueil, la liste des cookies et la fiche détail, déclinées en version desktop et mobile.

Le premier parti pris était un fond clair et une ambiance douce — lisible, épurée. La navigation était volontairement simple : deux boutons texte, sans fioriture.

Au départ, je ne voulais pas mettre de footer : le projet était destiné uniquement à moi et à un membre de ma famille, donc je ne voyais pas l'utilité d'en avoir un.

Maquette page accueil — Desktop
Page accueil — Desktop
Maquette page accueil — Mobile
Page accueil — Mobile
Maquette liste des cookies — Desktop
Liste des cookies — Desktop
Maquette liste des cookies — Mobile
Liste des cookies — Mobile
Maquette fiche détail cookie — Desktop
Fiche détail — Desktop
Maquette fiche détail cookie — Mobile
Fiche détail — Mobile
Évolution du design

Du design à l'intégration — les ajustements

Une fois le site intégré et les vrais visuels du jeu en place, plusieurs décisions ont évolué.

Palette sombre

Le fond beige des maquettes entrait en conflit avec les illustrations colorées du jeu. J'ai basculé vers un fond marron chocolat profond — plus immersif, plus cohérent avec l'univers de CookieRun Kingdom, et moins agressif pour les sessions prolongées.

Navigation thématisée

Les boutons texte sobres des maquettes ont laissé place à des icônes stylisées dans des cadres dorés illustrés — une décision qui ancre davantage l'interface dans l'identité visuelle du jeu.

Page liste enrichie

En intégrant les vraies données, j'ai réalisé que les joueurs auraient besoin de filtrer et trier — par rareté, rôle, élément. J'ai aussi ajouté un système de suivi personnel (cookies obtenus / non obtenus), non prévu en maquette.

Footer ajouté

Absent des maquettes initiales — le projet n'étant prévu que pour moi et un proche — j'ai finalement intégré un footer dans la version finale, par souci de droit d'auteur : les illustrations du jeu ne m'appartiennent pas et méritaient d'être créditées.

Avant Maquette initiale page accueil — fond clair
Maquette initiale — fond clair
Après Version intégrée page accueil — fond sombre
Version intégrée — fond sombre
Réalisations

Ce que j'ai mis en place

  • Architecture de base de données relationnelle via Supabase

  • Sécurisation des accès utilisateurs — chaque joueur ne voit et ne modifie que ses propres données

  • Système de filtres et de recherche en temps réel

  • Déploiement sur GitHub Pages avec domaine personnalisé

  • Responsive design — expérience adaptée mobile et desktop

  • Projet mené en autonomie complète, de la maquette à la mise en ligne

Stack technique

HTML5 CSS3 JavaScript Vite.js Supabase GitHub Pages Domaine personnalisé
Safe

Row Level Security
via Supabase

Et après ?

L'évolution naturelle du projet inclut l'ajout d'un thème clair/sombre au choix de l'utilisateur — pour offrir une alternative aux personnes sensibles aux interfaces sombres.