Formation IA Agentique - Plateforme Web Interactive

Site web de présentation pour le cours de formation "IA Agentique" - ib Cegos IA102.

Cette plateforme interactive permet aux stagiaires de naviguer facilement entre les modules de formation, de suivre leur progression et d'exporter leurs supports personnalisés.

🎯 Objectifs du Projet

• Présentation interactive du contenu de formation IA Agentique
• Navigation fluide entre 6 modules de formation
• Suivi de progression personnalisé pour chaque stagiaire
• Export PDF personnalisé avec nom et prénom du stagiaire
• Interface moderne et sobre avec support mode sombre/clair
• Mode plein écran pour une lecture optimisée

🛠️ Stack Technique

• Runtime: Bun (>=1.2.0) pour des performances optimales
• Frontend: React 19 + TanStack Router + Tailwind CSS v4
• Backend: tRPC + Hono framework
• Base de données: Cloudflare D1 (SQLite) + Drizzle ORM
• Déploiement: Cloudflare Workers (edge computing)
• Tests: Vitest + Happy DOM
• Style: Tailwind CSS v4 avec support mode sombre/clair

🚀 Démarrage Rapide

# 1. Cloner le projet
git clone https://github.com/FredMichel/react-starter-kit.git
cd react-starter-kit

# 2. Installer les dépendances
bun install

# 3. Démarrer le serveur de développement
bun dev

Ouvrir http://localhost:5173 dans votre navigateur.

Commandes Principales

bun dev          # Serveur de développement
bun run build    # Construction production
bun test         # Exécution des tests
bun run lint     # Vérification code

Commandes Cloudflare Infrastructure

# Développement local
wrangler dev --local                    # Serveur Workers local

# Déploiement
wrangler deploy edge/dist/index.js      # Déploiement Workers
wrangler deploy --env production        # Déploiement production

# Base de données D1
wrangler d1 list                        # Lister les bases
wrangler d1 execute training-ai-agentic-db --command="SELECT 1"  # Test DB

# Monitoring
wrangler tail training-ai-agentic       # Logs en temps réel
wrangler deployments list               # Historique déploiements

# Storage GCP
gsutil ls gs://training-ai-agentic-images  # Lister objets GCS
gcloud storage ls                       # Lister buckets GCS

📖 Guide d'Installation Complet - Instructions détaillées pour le développement
📖 Infrastructure Cloudflare - Documentation complète infrastructure

📁 Structure du Projet

react-starter-kit/
├── app/         # Frontend React (TanStack Router, Tailwind CSS)
├── api/         # Backend tRPC + Hono
├── edge/        # Cloudflare Workers
├── db/          # Schemas database + Drizzle ORM
├── core/        # Utilitaires partagés
└── docs/        # Documentation

    

---

This project was bootstrapped with React Starter Kit. Be sure to join our Discord channel for assistance.

Monorepo Architecture

This starter kit uses a thoughtfully organized monorepo structure that promotes code reuse and maintainability:

• app/ — React frontend with Vite, TanStack Router, and Tailwind CSS
• api/ — tRPC API server powered by Hono framework
• edge/ — Cloudflare Workers entry point for edge deployment
• core/ — Shared TypeScript types, utilities, and WebSocket communication
• db/ — Database schemas, migrations, and seed data
• docs/ — VitePress documentation site
• infra/ — Terraform infrastructure configurations for multi-environment deployment
• scripts/ — Build automation and development tools
• app/scripts/ — ShadCN UI component management utilities

Why Monorepo? This structure enables seamless code sharing between frontend and backend, ensures type consistency across your entire stack, and simplifies dependency management. When you update a type definition, both client and server stay in sync automatically.

Deployment Flexibility: The API is deployed to Cloudflare Workers (via edge/) for global edge computing, ensuring optimal performance worldwide.

Perfect For

• SaaS Applications: Multi-tenant architecture with user management built-in
• API-First Products: tRPC provides excellent developer experience for API development
• Global Applications: Edge deployment ensures fast loading times worldwide
• Team Projects: Monorepo structure scales well with multiple developers
• Rapid Prototyping: Skip configuration and start building features immediately

Technology Stack

Core Runtime & Platform

• Bun — Lightning-fast JavaScript runtime and package manager
• Cloudflare Workers — Edge computing platform

Frontend & UI

• React 19 — Latest React with concurrent features
• TanStack Router — Type-safe routing with data loading
• Tailwind CSS v4 — Utility-first CSS framework
• ShadCN UI — Beautiful, accessible components
• Jotai — Atomic state management

Backend & API

• Hono — Ultrafast web framework for the edge
• tRPC — End-to-end type safety for APIs
• Better Auth — Modern authentication solution

Database & ORM

• Drizzle ORM — TypeScript ORM with excellent DX
• Cloudflare D1 — Serverless SQLite database

Development Tools

• Vite — Next-generation frontend tooling
• Vitest — Blazing fast unit testing
• TypeScript — Static type checking
• ESLint & Prettier — Code quality and formatting

Prerequisites

• Bun v1.2+ (replaces Node.js and npm)
• VS Code with our recommended extensions
• React Developer Tools browser extension (recommended)
• Cloudflare account for deployment

Quick Start

1. Create Your Project

Generate a new repository from this template, then clone it locally:

git clone https://github.com/your-username/your-project-name.git
cd your-project-name

2. Install Dependencies

bun install

3. Configure Environment

Update environment variables in .env and .env.local files as well as Wrangler configuration in wrangler.jsonc.

4. Start Development

Open two terminals and run these commands:

Terminal 1 - Frontend:

bun --cwd app dev

Terminal 2 - Backend:

bun --cwd edge build --watch
bun wrangler dev

5. Initialize Database

# Let Wrangler create the D1 database locally
bun wrangler d1 execute db --local --command "SELECT 1"
# Apply database schema and migrations
bun --cwd db migrate
bun --cwd db seed  # Optional: add sample data

Open http://localhost:5173 to see your app running. The backend API will be available at the port shown by wrangler dev (typically 8787).

Production Deployment

1. Environment Setup

Ensure your production environment variables are configured:

# Set secrets in Cloudflare Workers
bun wrangler secret put BETTER_AUTH_SECRET --env=production
bun wrangler secret put OPENAI_API_KEY --env=production

2. Build and Deploy

# Build all packages
bun --cwd app build
bun --cwd edge build

# Deploy to Cloudflare Workers
bun wrangler deploy --env=production

Your application will be live on your Cloudflare Workers domain within seconds. The edge-first architecture ensures optimal performance regardless of user location.

Contributors 👨‍💻

              

Backers 💰

              

Related Projects

• GraphQL API and Relay Starter Kit — monorepo template, pre-configured with GraphQL API, React, and Relay
• Cloudflare Workers Starter Kit — TypeScript project template for Cloudflare Workers
• Node.js API Starter Kit — project template, pre-configured with Node.js, GraphQL, and PostgreSQL

How to Contribute

Anyone and everyone is welcome to contribute. Start by checking out the list of open issues marked help wanted. However, if you decide to get involved, please take a moment to review the guidelines.

License

Copyright © 2014-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE file.

---

^{Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors.}