Système de gestion de l'apprentissage (LMS)
(Next.js et express.js)
Introduction
Bienvenue dans l'application LMS - un système de gestion de l'apprentissage de pointe conçu pour offrir une expérience d'apprentissage en ligne interactive et complète. Construit avec next.js et express.js, cette plate-forme est équipée de fonctionnalités avancées pour la gestion des cours, l'engagement des étudiants et les expériences sécurisées et transparentes.
Un aperçu de l'interface utilisateur
Page d'inscription / connexion
Authentification du commis pour l'utilisateur sécurisé
Curse
Enseignant / administrateur pour voir les listes de cours
Cours /: Page CourseID
Enseignant / admin pour créer, modifier, supprimer et voir le cours de détail complet
Page du chapitre
Enseignant / admin à (créer, modifier, supprimer et voir les détails complets) pour un cours
Page d'analyse
Enseignant / administrateur pour analyser la quantité de cours vendue et combien de revenus gagnés
Page du chapitre
Les clients peuvent s'inscrire à un cours, voir des chapitres gratuits
Stripe pour le processus de paiement
Les clients consultent le paiement du paiement
Page du chapitre
Les clients peuvent voir les accessoires de cours, leurs progrès après avoir acheté le cours
Page de tableau de bord
Les clients peuvent voir leurs cours de progression, les cours terminés
Menu / alertes de barre latérale
Interfaces réactives et conviviales
Caractéristiques clés
Création et gestion des cours dynamiques: créez et gérez facilement le contenu du cours, y compris les images et les pièces jointes. Authentification robuste: authentification utilisateur sécurisé à l'aide du commis. Playage vidéo interactif et téléchargement: intégré à MUX pour une expérience vidéo fluide. Paiements sécurisés: Intégration de rayures pour gérer les paiements de cours et les abonnements. Interface conviviale: conception moderne et réactive avec CSS de vent arrière. Téléchargements de documents et d'images: utilisation du téléchargement pour la gestion des fichiers sans tracas.
Technologies utilisées
L'extrémité avant
Technologies utilisées:
- Réagir 18.2.0
- Suivant.js 13.4.12
- Tailwind CSS 3.3.5
- REACT HOK Form 7.48.2
- React-quill 2.0.0
- Recharts 2.10.3
- Lucide-react 0,294.0
Bibliothèques clés:
- @ Clerk / NextJS 4.27.2 : Pour l'authentification sécurisée des utilisateurs.
- @ MUX / MUX-NODE et @ MUX / MUX-PLAYER-REACT 7.3.3 & 2.3.0 : pour la lecture vidéo et les téléchargements.
- @ Téléchargement / React 6.0.2 : Pour gérer les téléchargements de documents et d'images.
- React-hot-toast 2.4.1 : pour les notifications élégantes.
- Zustand 4.4.7 : Gestion de l'État.
Améliorations UI / UX:
- Tailwind Merge 2.0.0 : pour optimiser les classes CSS du vent arrière.
- CMDK 0.2.0 : interface de menu de commande.
- React-Dropzone 14.2.3 : Téléchargements de fichiers glisser et déposer.
- @ tanstack / react-table 8.10.7 : pour la construction et la gestion des tables.
- @ radix-ui / react-dialog , @ radix-ui / react-dropdown-menu , etc., pour les composants d'interface utilisateur avancés.
Caractéristiques:
- Interface interactive et conviviale.
- Intégration transparente avec les services de streaming vidéo et de téléchargement de fichiers.
- Outils de création de cours et de gestion complets.
- Conception réactive assurant la compatibilité entre divers appareils.
Outils de développement:
- Eslint 8.54.0 : pour la liaison de code.
- PostCSS 8.4.31 et Autoprefixer 10.4.16 : pour le traitement CSS.
- TypeScript 5.3.2 : pour la vérification du type.
Backend
Mais-toites principales:
- Express.js 4.18.2 : l'épine dorsale du serveur, le routage de gestion et le middleware.
- Mongoose 8.0.2 : ODM pour MongoDB, simplifiant les interactions de la base de données.
- Node.js: l'environnement d'exécution pour l'exécution de JavaScript du côté serveur.
Base de données:
- MongoDB: base de données NoSQL utilisée pour stocker les données d'application.
Bibliothèques clés et middleware:
- Dotenv 16.3.1 : pour gérer les variables environnementales.
- Nodemon 3.0.2 (développement): pour redémarrer automatiquement le serveur pendant le développement.
Caractéristiques:
- Points de terminaison API REST robustes pour la récupération et la manipulation des données.
- Sécugeler la connexion à la base de données avec une manipulation de requête efficace.
- Architecture évolutive adaptée à l'expansion des fonctionnalités et de la base d'utilisateurs.
Sécurité et authentification:
- Mesures de sécurité intégrées pour les points de terminaison de l'API.
- Logique d'authentification et d'autorisation pour protéger les données des utilisateurs.
Outils de développement:
- Divers packages NPM pour améliorer les fonctionnalités et l'efficacité.
- Postman pour tester et valider les points de terminaison de l'API.
Intégrations:
- Stripe pour le traitement des paiements: intégré aux webhooks de Stripe pour gérer les transactions.
- Autres services tiers tels que requis par la demande.
