Cycylive — site officiel

Site officiel de Cycylive : streameuse et créatrice de contenu. Hub central regroupant les lives Twitch, le planning, les réseaux, la communauté et les partenariats.

Stack technique

• Next.js 14 (App Router) + TypeScript
• Tailwind CSS pour le style
• Aucune base de données, aucun CMS externe : tout le contenu modifiable vit dans le dossier data/
• Déploiement pensé pour Vercel

Arborescence du projet

cycylive/
├── app/                     → les pages du site (routing automatique Next.js)
│   ├── page.tsx             → Accueil
│   ├── a-propos/page.tsx    → À propos
│   ├── gaming/page.tsx      → Gaming (Valorant, autres jeux, clips)
│   ├── reseaux/page.tsx     → Réseaux
│   ├── partenariats/page.tsx→ Partenariats
│   ├── contact/page.tsx     → Contact
│   ├── statistiques/page.tsx→ Statistiques (accessible via lien, hors menu principal)
│   ├── mentions-legales/    → Mentions légales (placeholder à compléter)
│   ├── confidentialite/     → Politique de confidentialité (placeholder à compléter)
│   ├── layout.tsx           → structure globale (header/footer partout)
│   ├── globals.css          → styles globaux + décor spatial
│   └── icon.png             → favicon
│
├── components/              → les blocs réutilisables du site
│   ├── Header.tsx            → navigation + CTA Twitch
│   ├── Footer.tsx
│   ├── BarreMobile.tsx        → barre d'accès rapide sur mobile
│   ├── Hero.tsx
│   ├── StatutTwitch.tsx       → bloc "en live / hors ligne"
│   ├── Planning.tsx
│   ├── AProposCourt.tsx
│   ├── DerniersContenus.tsx
│   ├── CommunauteApercu.tsx
│   └── PartenariatsApercu.tsx
│
├── data/                     → ★ TOUT CE QUE TU DOIS MODIFIER EST ICI ★
│   ├── planning.ts            → le planning hebdomadaire des lives
│   ├── liens.ts                → tous les réseaux sociaux + mail pro
│   ├── textes.ts               → les textes du site
│   ├── contenus.ts             → les vidéos mises en avant
│   └── twitch.ts                → statut Twitch (live / offline)
│
├── public/
│   ├── logo/                  → logo Cycylive (icône + version complète)
│   └── images/                → photo de Cycy
│
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── next.config.mjs

Où modifier quoi (le plus important)

Je veux changer...	Fichier à ouvrir
Le planning de la semaine	Interface web /admin (voir plus bas) — plus besoin de fichier
Un lien Twitch / TikTok / Instagram / YouTube / Discord / mail	data/liens.ts
Les textes du site (accroche, à propos, communauté, partenariats, contact)	Interface web /admin, onglet "Textes"
Les vidéos mises en avant sur l'accueil	data/contenus.ts
Le statut "en live" / "hors ligne" et le prochain live	data/twitch.ts
La photo de Cycy	remplace public/images/cycy-photo.jpg (même nom de fichier)
Le logo	remplace les fichiers dans public/logo/ (mêmes noms)
Les mentions légales	app/mentions-legales/page.tsx
La politique de confidentialité	app/confidentialite/page.tsx

Aucun de ces fichiers ne nécessite de connaissances en programmation avancées : ce sont des listes et des textes simples, en français, commentés.

Lancer le site en local

1. Prérequis

Installe Node.js (version 18 ou plus récente) si tu ne l'as pas déjà.

2. Installer les dépendances

Ouvre un terminal dans le dossier du projet, puis :

npm install

3. Lancer le site en mode développement

npm run dev

Ouvre ensuite http://localhost:3000 dans ton navigateur. Le site se recharge automatiquement à chaque modification d'un fichier.

4. Générer la version production (optionnel, pour tester avant mise en ligne)

npm run build
npm run start

Mettre le site en ligne sur Vercel

Étape 1 — Mettre le projet sur GitHub

git init
git add .
git commit -m "Premier commit du site Cycylive"

Crée ensuite un nouveau dépôt sur github.com/new (sans README, il existe déjà), puis :

git remote add origin https://github.com/TON-NOM-UTILISATEUR/cycylive.git
git branch -M main
git push -u origin main

Étape 2 — Connecter le dépôt à Vercel

1. Va sur vercel.com et connecte-toi (tu peux te connecter directement avec ton compte GitHub).
2. Clique sur Add New → Project.
3. Sélectionne ton dépôt cycylive.
4. Vercel détecte automatiquement Next.js — ne change aucun réglage.
5. Clique sur Deploy.

En 1 à 2 minutes, ton site est en ligne sur une adresse du type cycylive.vercel.app.

Étape 3 — Mettre à jour le site plus tard

Chaque fois que tu modifies un fichier (par exemple data/planning.ts) et que tu fais :

git add .
git commit -m "Mise à jour du planning"
git push

Vercel redéploie automatiquement le site en quelques secondes.

Connecter un nom de domaine personnalisé

1. Dans ton projet sur Vercel, va dans l'onglet Settings → Domains.
2. Ajoute ton nom de domaine (ex : cycylive.com).
3. Vercel t'indique les enregistrements DNS à ajouter chez ton registrar (souvent un enregistrement A ou CNAME).
4. Ajoute ces enregistrements chez ton fournisseur de domaine (OVH, Namecheap, etc.).
5. La propagation prend généralement entre quelques minutes et 24h.

Interface d'administration du planning

Tu peux maintenant modifier le planning sans jamais ouvrir de fichier de code, via une vraie page web : /admin (ex : tonsite.vercel.app/admin ou localhost:3000/admin en local).

Pour que les modifications soient réellement sauvegardées (et visibles par tous les visiteurs, pas juste sur ton ordinateur), il faut connecter une petite base de données Redis gratuite chez Upstash (Vercel KV a été abandonné).

This is the beginning of the README. Read the rest at the original. Read the full README ↗