Skip to content

AngisheSALEM/WebsiteMaker-

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
websitemakerbackend
websitemakerbackend
 
 
websitemakerfrontend
websitemakerfrontend
 
 
README.md
README.md
 
 

Repository files navigation

🚀 WebsiteMaker - No-Code Website Builder

Une plateforme SaaS complète no-code qui permet aux utilisateurs non-techniques de créer, personnaliser, héberger et gérer des sites web professionnels avec facilité.

📋 Table des matières

🎯 Présentation

WebsiteMaker est une plateforme complète de création de sites web sans code qui se compose de deux parties principales :

  • Frontend React : Interface utilisateur moderne avec éditeur drag-and-drop
  • Backend Next.js : API REST complète avec authentification et gestion de données

Types de projets supportés

  • 📝 Blog : Sites de contenu avec articles et catégories
  • 💼 Portfolio : Sites de présentation professionnelle
  • 🛒 E-commerce : Boutiques en ligne complètes
  • 🏢 Vitrine : Sites d'entreprise et services
  • 🎓 Éducation : Plateformes de cours en ligne
  • 🎪 Évènements : Sites d'événements et réservations

✨ Fonctionnalités

🎨 Création visuelle

  • Éditeur Drag-and-Drop : Interface intuitive pour construire sans code
  • Prévisualisation temps réel : Voir les changements instantanément
  • Bibliothèque de composants : Headers, Heroes, Textes, Images, Boutons, Formulaires
  • Design responsive : Optimisé mobile, tablette, desktop
  • Système de templates : Templates pré-construits optimisés

👥 Collaboration

  • Contrôle d'accès basé sur les rôles : Owner, Editor, Collaborator, Viewer
  • Collaboration temps réel : Travail d'équipe simultané
  • Gestion des membres : Invitation et gestion des équipes

🔄 Versioning & Historique

  • Contrôle de version : Suivi des modifications
  • Restauration : Retour aux versions précédentes
  • Historique détaillé : Journal complet des actions

🚀 Déploiement

  • Déploiement automatisé : Intégration Vercel en un clic
  • Gestion des domaines : Configuration de domaines personnalisés
  • Certificats SSL : HTTPS automatique
  • Optimisations : Performance intégrée

🛠 Stack technique

Frontend (React + Vite)

  • Framework : React 19 + Vite 7
  • Langage : TypeScript
  • Styling : TailwindCSS
  • Build : Vite avec HMR (Hot Module Replacement)
  • Linting : ESLint avec règles React

Backend (Next.js)

  • Framework : Next.js 15 (App Router)
  • Langage : TypeScript
  • ORM : Prisma 6
  • Base de données : PostgreSQL
  • Authentification : NextAuth.js + JWT custom
  • API : REST endpoints avec App Router

DevOps & Déploiement

  • Package Manager : pnpm
  • Déploiement : Vercel API
  • Monitoring : API logging avec BroadcastChannel
  • Environnements : Staging et Production

📁 Architecture du projet

websitemaker/
├── websitemakerfrontend/          # Application React frontend
│   ├── src/
│   │   ├── components/            # Composants React réutilisables
│   │   ├── pages/                 # Pages de l'application
│   │   ├── hooks/                 # Hooks React personnalisés
│   │   ├── utils/                 # Utilitaires et helpers
│   │   └── styles/                # Styles CSS/SCSS
│   ├── public/                    # Assets statiques
│   ├── package.json               # Dépendances frontend
│   └── vite.config.js            # Configuration Vite
│
├── websitemakerbackend/           # API Backend Next.js
│   ├── src/
│   │   ├── app/
│   │   │   ├── api/               # Endpoints REST (App Router)
│   │   │   │   ├── auth/          # Authentification
│   │   │   │   ├── projects/      # Gestion des projets
│   │   │   │   ├── pages/         # Gestion des pages
│   │   │   │   ├── components/    # Gestion des composants
│   │   │   │   ├── collaborators/ # Gestion des équipes
│   │   │   │   ├── deploy/        # Déploiement
│   │   │   │   ├── history/       # Historique
│   │   │   │   ├── blog/          # Fonctionnalités blog
│   │   │   │   ├── ecommerce/     # Fonctionnalités e-commerce
│   │   │   │   ├── education/     # Fonctionnalités éducation
│   │   │   │   ├── events/        # Fonctionnalités événements
│   │   │   │   ├── vitrine/       # Fonctionnalités vitrine
│   │   │   │   └── portfolio/     # Fonctionnalités portfolio
│   │   │   └── admin/             # Page d'administration
│   │   ├── components/            # Composants Next.js
│   │   ├── hooks/                 # Hooks personnalisés
│   │   ├── lib/                   # Bibliothèques et utilitaires
│   │   │   ├── api.ts             # Client API avec logging
│   │   │   ├── auth.ts            # Gestion authentification
│   │   │   ├── prisma.ts          # Client base de données
│   │   │   ├── permissions.ts     # Contrôle d'accès
│   │   │   ├── templates.ts       # Système de templates
│   │   │   └── project-generator.ts # Génération de projets
│   │   └── types/                 # Définitions TypeScript
│   ├── prisma/
│   │   ├── schema.prisma          # Schéma de base de données
│   │   └── migrations/            # Migrations
│   └── package.json               # Dépendances backend
│
└── README.md                      # Ce fichier

🚀 Installation et démarrage

Prérequis

  • Node.js 18+
  • PostgreSQL
  • pnpm (recommandé)
  • Compte Vercel (pour les déploiements)

1. Cloner le projet

git clone <repository-url>
cd websitemaker

2. Installation des dépendances

Backend

cd websitemakerbackend
pnpm install

Frontend

cd ../websitemakerfrontend
pnpm install

3. Configuration de la base de données

cd ../websitemakerbackend
pnpm prisma generate
pnpm prisma db push
# Optionnel : pnpm prisma studio

4. Démarrage des serveurs

Backend (Terminal 1)

cd websitemakerbackend
pnpm dev
# Serveur sur http://localhost:3000

Frontend (Terminal 2)

cd websitemakerfrontend
pnpm dev
# Serveur sur http://localhost:5173

🔧 Configuration

Variables d'environnement Backend

Créer .env.local dans websitemakerbackend/ :

# Base de données
DATABASE_URL="postgresql://username:password@localhost:5432/websitemaker"

# NextAuth.js
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# JWT pour auth custom
JWT_SECRET="your-jwt-secret-here"

# OAuth Google
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# OAuth GitHub
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

# Vercel API
VERCEL_TOKEN="your-vercel-token"

Configuration Frontend

Le frontend se connecte automatiquement au backend sur http://localhost:3000.

📡 API Reference

🔐 Authentification (/api/auth/*)

  • POST /api/auth/login — Connexion email/mot de passe (JWT)
  • POST /api/auth/signup — Inscription utilisateur
  • POST /api/auth/signout — Déconnexion
  • [...nextauth] — Handler NextAuth (OAuth)

📁 Projets (/api/projects/*)

  • GET /api/projects — Liste des projets accessibles
  • POST /api/projects — Création d'un projet
  • GET /api/projects/[id] — Détails d'un projet
  • PUT /api/projects/[id] — Mise à jour projet
  • DELETE /api/projects/[id] — Suppression projet
  • GET /api/projects/[id]/members — Liste des membres
  • POST /api/projects/[id]/members — Inviter un membre
  • GET /api/projects/[id]/pages — Liste des pages
  • GET /api/projects/[id]/components — Liste des composants
  • GET /api/projects/[id]/history — Historique du projet

📄 Pages (/api/pages/*)

  • GET /api/pages/[projectId] — Pages d'un projet
  • POST /api/pages/create — Créer une page
  • PUT /api/page/update — Mettre à jour une page
  • DELETE /api/page/delete — Supprimer une page

🧩 Composants (/api/element/*)

  • POST /api/element/create — Créer un composant
  • PUT /api/element/update — Mettre à jour un composant
  • DELETE /api/element/delete — Supprimer un composant

👥 Collaborateurs (/api/collaborators/*)

  • GET /api/collaborators/list — Liste des membres
  • POST /api/collaborators/add — Ajouter un collaborateur
  • DELETE /api/collaborators/remove — Retirer un collaborateur

🚀 Déploiement (/api/deploy/*)

  • POST /api/projects/[id]/deploy — Démarrer un déploiement
  • GET /api/projects/[id]/deploy — Statut des déploiements

📝 Fonctionnalités spécialisées

  • Blog : /api/blog/* — Posts, catégories, commentaires
  • E-commerce : /api/ecommerce/* — Produits, commandes
  • Éducation : /api/education/* — Cours, leçons
  • Événements : /api/events/* — Événements, inscriptions
  • Vitrine : /api/vitrine/* — Services, équipe
  • Portfolio : /api/portfolio/* — Projets, compétences

🎨 Éditeur visuel

Fonctionnalités principales

  • Interface Drag-and-Drop : Placement intuitif des composants
  • Prévisualisation temps réel : Changements instantanés
  • Bibliothèque de composants : Headers, Heroes, Textes, Images, Boutons, Formulaires
  • Personnalisation de style : Couleurs, polices, espacement, layouts
  • Design responsive : Prévisualisations mobile, tablette, desktop
  • Réorganisation : Ajustements faciles de layout

Composants disponibles

  • Layout : Container, Grid, Flex
  • Texte : Titre, Paragraphe, Liste
  • Média : Image, Vidéo, Galerie
  • Interaction : Bouton, Lien, Formulaire
  • Navigation : Menu, Breadcrumb, Pagination
  • Contenu : Card, Modal, Accordion

👥 Gestion des rôles

Rôle Permissions
Owner Contrôle total du projet, gestion d'équipe, déploiement
Editor Édition de contenu, gestion des pages, déploiement staging
Collaborator Édition limitée, accès pages spécifiques, commentaires
Viewer Accès lecture seule, visualisation des commentaires

Système de permissions

  • Contrôle granulaire par page et composant
  • Workflow d'approbation pour les modifications
  • Historique des actions par utilisateur
  • Notifications des changements d'équipe

🌐 Déploiement

Intégration Vercel

  • API Vercel : Déploiements automatisés
  • Gestion d'environnements : Staging et production
  • Domaines personnalisés : Configuration automatique
  • Certificats SSL : HTTPS automatique
  • Optimisations : Performance intégrée

Processus de déploiement

  1. Validation du projet
  2. Génération du code statique
  3. Upload vers Vercel
  4. Configuration DNS
  5. Activation SSL
  6. Notification de succès

📊 Monitoring API

Page d'administration

Une page d'admin complète est disponible sur /admin qui offre :

  • Monitoring temps réel : Visualisation des appels API en direct
  • Interface style Insomnia : Inspection détaillée des requêtes/réponses
  • Filtrage avancé : Par méthode, endpoint, statut
  • Export JSON : Copie des données de requête/réponse
  • Historique : Conservation des 300 derniers appels

Fonctionnalités de monitoring

  • Métriques de performance : Temps de réponse, taux d'erreur
  • Logs détaillés : Headers, payload, réponses
  • Alertes : Notifications d'erreurs critiques
  • Analytics : Statistiques d'utilisation API

🗄 Base de données

Modèles principaux

  • User : Gestion des utilisateurs et authentification
  • Project : Projets avec configurations spécifiques par type
  • ProjectMember : Collaboration d'équipe avec hiérarchie de rôles
  • Page : Pages individuelles avec contenu
  • Component : Composants UI réutilisables avec props et styling
  • History : Contrôle de version et suivi des changements
  • Deployment : Historique et statut des déploiements

Modèles spécialisés par type de projet

  • Blog : Posts, Categories, Comments, Tags
  • Portfolio : Projects, Skills, Testimonials
  • E-commerce : Products, Orders, Categories, Customers
  • Vitrine : Services, TeamMembers, Testimonials
  • Education : Courses, Lessons, Students, Instructors
  • Events : Events, Registrations, Speakers, Venues

🔧 Commandes utiles

Backend

# Développement
pnpm dev                 # Serveur de développement
pnpm build              # Build de production
pnpm start              # Serveur de production
pnpm lint               # ESLint

# Base de données
pnpm prisma generate    # Générer le client Prisma
pnpm prisma db push     # Pousser le schéma vers la DB
pnpm prisma migrate dev # Créer et exécuter les migrations
pnpm prisma studio      # Ouvrir Prisma Studio

Frontend

# Développement
pnpm dev                # Serveur de développement Vite
pnpm build             # Build de production
pnpm preview           # Prévisualiser le build
pnpm lint              # ESLint

🚀 Déploiement en production

Vercel (Recommandé)

  1. Connecter le repository à Vercel
  2. Configurer les variables d'environnement
  3. Définir la commande de build : pnpm build
  4. Définir le répertoire de sortie : .next
  5. Déploiement automatique sur push

Variables d'environnement production

Assurez-vous que toutes les variables requises sont configurées :

  • Connexion base de données
  • Secrets d'authentification
  • Credentials OAuth
  • Tokens API Vercel

🤝 Contribution

  1. Fork le repository
  2. Créer une branche feature : git checkout -b feature/amazing-feature
  3. Commit les changements : git commit -m 'Add amazing feature'
  4. Push vers la branche : git push origin feature/amazing-feature
  5. Ouvrir une Pull Request

Guidelines de développement

  • Utiliser TypeScript pour tous les nouveaux fichiers
  • Suivre les conventions ESLint
  • Ajouter des tests pour les nouvelles fonctionnalités
  • Documenter les nouvelles API endpoints
  • Respecter la structure de dossiers existante

📄 License

Ce projet est sous licence MIT - voir le fichier LICENSE pour plus de détails.

🆘 Support

📊 Statistiques du projet

  • Endpoints API : 45+ endpoints implémentés
  • Types de projets : 6 types supportés
  • Composants UI : 20+ composants drag-and-drop
  • Templates : 15+ templates pré-construits
  • Langues : Support multilingue (FR/EN)

WebsiteMaker - Donner à chacun le pouvoir de créer de beaux sites web sans code ! 🚀

Développé avec ❤️ par l'équipe WebsiteMaker

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages