DevEvent - Le Hub pour les Événements Développeurs

Une plateforme moderne pour découvrir et gérer les événements développeurs (hackathons, meetups, conférences) construite avec Next.js, React et MongoDB.

Aperçu

DevEvent est un hub centralisé où les développeurs peuvent explorer, créer et réserver des événements technologiques. La plateforme offre une interface intuitive avec gestion d'événements en temps réel et capacités de réservation.

Démo en direct : Plateforme DevEvent

Fonctionnalités

📋 Parcourir les événements - Découvrez hackathons, meetups et conférences en un seul endroit
✨ Événements en vedette - Sélection curée affichée sur la page d'accueil
🎯 Détails des événements - Informations complètes pour chaque événement
📝 Créer des événements - Soumettez de nouveaux événements avec tous les détails et images
✏️ Modifier les événements - Mettez à jour les informations d'un événement à tout moment
🎫 Réserver des événements - Inscrivez-vous aux événements en un clic
🖼️ Téléchargement d'images - Intégration Cloudinary pour les images d'événements
📊 Gestion des événements - Opérations CRUD complètes
🔍 Analyse - Intégration PostHog pour suivre le comportement des utilisateurs
🎨 Interface moderne - Tailwind CSS avec animations personnalisées et effets de rayons de lumière

Stack Technologique

Frontend

Next.js 16 - Framework React avec App Router
React 19 - Bibliothèque UI
TypeScript - Sécurité des types
Tailwind CSS 4 - Stylisation
Lucide React - Icônes

Backend

Routes API Next.js - Backend sans serveur
MongoDB & Mongoose - Base de données
Cloudinary - Hébergement d'images

Outils & Bibliothèques

PostHog - Analyse de produit
OGL - Graphiques 3D pour les effets de rayons lumineux
Clsx & Tailwind Merge - Fonctions utilitaires
ESLint - Qualité du code

Structure du Projet

plateinfo/
├── app/                       # Répertoire app Next.js
│   ├── api/                   # Routes API
│   │   ├── events/           # Points de terminaison CRUD d'événements
│   │   └── bookings/         # Gestion des réservations
│   ├── create/               # Page de création d'événement
│   ├── events/               # Pages de détail et édition d'événement
│   ├── events-list/          # Page de liste des événements
│   ├── layout.tsx            # Mise en page racine
│   └── page.tsx              # Page d'accueil
├── components/                # Composants React
│   ├── EventCard.tsx         # Affichage de la carte d'événement
│   ├── EventDetails.tsx      # Vue des détails de l'événement
│   ├── CreateEventForm.tsx   # Formulaire de création d'événement
│   ├── EditEventForm.tsx     # Formulaire d'édition d'événement
│   ├── BookEvent.tsx         # Composant de réservation
│   ├── EventsTable.tsx       # Vue tableau des événements
│   ├── LightRays.tsx         # Effet de lumière animée
│   ├── Navbar.tsx            # Barre de navigation
│   └── ...
├── database/                  # Modèles MongoDB
│   ├── event.model.ts        # Schéma d'événement
│   ├── booking.model.ts      # Schéma de réservation
│   └── index.ts              # Export des modèles
├── lib/                       # Fonctions utilitaires
├── public/                    # Actifs statiques
├── next.config.ts            # Configuration Next.js
├── tsconfig.json             # Configuration TypeScript
├── tailwind.config.js        # Configuration Tailwind
└── package.json              # Dépendances

Démarrage Rapide

Prérequis

Node.js 18+
npm ou yarn
Base de données MongoDB (locale ou cloud)
Compte Cloudinary (pour les téléchargements d'images)
Compte PostHog (optionnel, pour l'analyse)

Installation

Clonez le repository

git clone https://github.com/Owedjangdev/DevEnt-Challenge-2days.git
cd plateinfo

Installez les dépendances

npm install

Configurez les variables d'environnement Créez un fichier .env.local dans le répertoire racine :

MONGODB_URI=votre_chaîne_de_connexion_mongodb
CLOUDINARY_CLOUD_NAME=votre_nom_cloudinary
CLOUDINARY_API_KEY=votre_clé_api_cloudinary
CLOUDINARY_API_SECRET=votre_secret_api_cloudinary
NEXT_PUBLIC_POSTHOG_KEY=votre_clé_posthog
NEXT_PUBLIC_POSTHOG_HOST=votre_hôte_posthog

Lancez le serveur de développement

npm run dev

Ouvrez http://localhost:3000 pour voir l'application.

Scripts Disponibles

npm run dev      # Démarrer le serveur de développement
npm run build    # Générer pour la production
npm start        # Démarrer le serveur de production
npm run lint     # Exécuter ESLint

Points de Terminaison API

Événements

GET /api/events - Récupérer tous les événements
GET /api/events/[slug] - Obtenir un événement spécifique
POST /api/events - Créer un événement (via /api/events-crud)
PUT /api/events - Mettre à jour un événement (via /api/events-update)
DELETE /api/events/[slug] - Supprimer un événement

Réservations

POST /api/bookings - Créer une réservation
GET /api/bookings/count - Obtenir les statistiques de réservation

Composants Clés

EventCard

Affiche les informations d'un événement dans un format carte avec image, titre, date et bouton de réservation.

CreateEventForm / EditEventForm

Formulaires pour la création et l'édition d'événements avec validation et support de téléchargement d'images.

BookEvent

Composant modal pour les réservations d'utilisateurs avec confirmation.

LightRays

Composant animé 3D personnalisé utilisant OGL pour les effets visuels.

Navbar

Composant de navigation avec liens vers les sections principales.

Modèles de Base de Données

Schéma d'Événement

{
  title: string
  slug: string
  description: string
  image: string
  date: Date
  location: string
  category: string
  capacity: number
  attendees: number
  createdAt: Date
  updatedAt: Date
}

Schéma de Réservation

{
  eventSlug: string
  userEmail: string
  userName: string
  bookingDate: Date
  status: string
}

Déploiement

Le projet est déployé sur Vercel. Pour déployer votre propre version :

Poussez votre code sur GitHub
Connectez votre repository à Vercel
Ajoutez les variables d'environnement dans le tableau de bord Vercel
Déployez en un clic

Déploiement actuel : https://dev-ent.vercel.app

Configuration

Analyse PostHog

Le projet inclut l'intégration PostHog pour le suivi analytique via des réécritures dans next.config.ts :

Proxy API : /ingest/* → Serveurs PostHog
Actifs statiques : /ingest/static/* → CDN

Optimisation des Images

Cloudinary est configuré pour l'optimisation des images distantes avec chargement automatique.

Flux de Développement

Créez une branche de fonctionnalité : git checkout -b feature/votre-fonctionnalité
Faites vos modifications
Exécutez la vérification de linting : npm run lint
Effectuez un commit et poussez
Ouvrez une demande de tirage

Optimisations de Performance

Optimisation des images Next.js pour les images Cloudinary
Régénération statique incrémentale (ISR) avec revalidation de 60 secondes
Rendu côté serveur pour le contenu dynamique
Modules CSS et purge Tailwind
Composants avec chargement différé

Support des Navigateurs

Chrome/Edge 90+
Firefox 88+
Safari 14+

Licence

MIT

Auteur

Développé dans le cadre du Défi DevEnt 2 Jours

Support & Contribution

N'hésitez pas à ouvrir des problèmes et à soumettre des demandes de tirage pour améliorer DevEvent.

Fait avec ❤️ par l'équipe DevEnt

Name		Name	Last commit message	Last commit date
Latest commit History 51 Commits
.claude/skills/nextjs-app-router		.claude/skills/nextjs-app-router
app		app
components		components
database		database
lib		lib
public		public
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
instrumentation-client.ts		instrumentation-client.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
posthog-setup-report.md		posthog-setup-report.md
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation