TyradexWebsite

Site Internet

Présentation

L'objectif du site Tyradex est de proposer aux utilisateurs de l'API Tyradex une documentation, ainsi qu'une démonstration des données de l'API, avec les routes les plus utilisées, ainsi que les différentes données utilisées.

Cahier des charges

1. Structure et Navigation (L'Expérience Développeur)

Pour répondre à votre besoin de "trouver facilement l'information", la navigation doit être épurée et standardisée selon les codes des outils tech modernes.

• Une barre de navigation fixe (Sticky Navbar) :

  • Logo Tyradex (retour à l'accueil).

• Documentation (lien direct vers les endpoints).

• Statut de l'API (très rassurant pour les développeurs).

• Barre de recherche rapide (Cmd + K ou Ctrl + K) : Indispensable pour chercher un endpoint ou un Pokémon spécifique instantanément.

• Liens sociaux : Icônes GitHub et Discord.

• Bouton d'action (CTA) : "Commencer" (qui scroll vers le premier bout de code) ou "Lire la doc".

2. Maquette de la Page d'Accueil (La Vitrine)

La page d'accueil doit convaincre le développeur d'utiliser Tyradex plutôt qu'une autre API (comme PokéAPI) ou de scrapper les données lui-même.

A. L'En-tête (Hero Section)

• Présentation des différentes routes, démonstration des Pokémon de façon aléatoire.

• Bouton Primaire : "Explorer la Documentation"

• Bouton Secondaire : "Voir le dépôt sur GitHub"

B. Le Playground Interactif (La Preuve par l'Exemple)

C'est la tendance n°1 des sites d'API modernes. Juste sous l'en-tête, intégrez un faux terminal ou une interface divisée en deux :

• À gauche : Un champ pour taper une requête (ex: GET https://tyradex.app/api/v1/pokemon/dracaufeu).

• À droite : L'affichage du JSON formaté avec coloration syntaxique.

• L'objectif : Le développeur teste l'API sans même avoir quitté votre page d'accueil.

C. La Section "Pourquoi choisir Tyradex ?" (Features)

Une grille de 3 ou 4 cartes mettant en avant vos points forts :

• Données en Français : Noms, descriptions, talents entièrement traduits.

• Mis à jour (Gen 9) : Inclut les dernières générations et formes régionales.

• Rapide & Fiable : Temps de réponse optimisés.

• Open-Source : Hébergé par la communauté, pour la communauté.

D. Footer Épuré

Liens vers le code source, mentions légales, contact, et un lien pour soutenir le projet (Ko-fi ou GitHub Sponsors).

3. Optimisations Techniques (SEO & Core Web Vitals)

Pour que votre site soit "optimisé pour les recommandations de navigateur" (Google Lighthouse), voici les leviers techniques à activer pour la refonte :

• Framework Moderne (SSG/SSR) : Utilisez un framework comme Astro, Next.js ou Nuxt. Astro est particulièrement recommandé pour les sites vitrines et de documentation car il génère du HTML statique ultra-léger, garantissant un score Lighthouse de 100/100.

• Mode Sombre (Dark Mode) natif : Les développeurs adorent le mode sombre. Il doit être présent par défaut ou s'adapter aux préférences système de l'utilisateur (prefers-color-scheme).

• Balisage Sémantique et SEO : * Utilisez correctement les balises <header>, <main>, <section>, et <article>.

• Intégrez des balises Meta Open Graph parfaites pour que les aperçus sur Discord ou Twitter soient beaux (avec une image de bannière générée spécifiquement pour l'API).

• Hébergement Edge : Déployez la vitrine sur Vercel, Netlify ou Cloudflare Pages pour que le site charge instantanément partout dans le monde.

Angular Tutorial

This project was generated using Angular CLI version 21.2.6.

Development server

To start a local development server, run:

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Vitest test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.