PlantCare
Application Next.JS pour gerer l'état de ses plantes
Ce projet a été réalisé dans le but de perfectionner ma maîtrise de Next.js. Il m'a permis d'explorer en profondeur plusieurs de ses fonctionnalités, telles que les routes API, le rendu côté client (CSR) et serveur (SSR). J'y ai également intégré un système d'authentification OAuth via Auth.js et ses providers, ainsi qu'une API REST connectée à une base de données grâce à l'ORM Prisma.
Technologies utilisees
Next.JSAuth.JS
Prisma
Tailwind
ShadCNPoints forts du projet
Oauth
Utilisation de Auth.JS
Intégration avancée de Auth.js pour sécuriser l'accès à l'application à travers des connexions avec Google ou GitHub. Ce système d'authentification OAuth assure une gestion centralisée, fiable et sécurisée des sessions, tout en simplifiant considérablement l'expérience de connexion pour l'utilisateur.
CRON jobs
Utilisation des CRON Jobs
Mise en place de tâches automatisées grâce à des CRON jobs pour gérer des actions récurrentes telles que la mise à jour régulière du niveau d'eau des plantes ou la génération automatique de rappels d'arrosage. Cette automatisation permet de simuler un suivi intelligent et autonome de l'état des plantes, sans intervention manuelle.
API REST
Express API
Développement d'une API REST structurée avec Express.js pour organiser la logique métier côté serveur. J'ai ensuite utilisé les API Routes de Next.js pour permettre une interaction fluide entre le front-end et l'API, notamment pour la gestion des utilisateurs, des plantes et des maladies, couvrant l'ensemble des opérations CRUD.
SSR / CSR
Optimisation des performances
Exploitation combinée du Server Side Rendering (SSR) et du Client Side Rendering (CSR) avec Next.js, afin d'optimiser les temps de chargement et d'offrir une expérience utilisateur optimale selon le contexte. Par exemple, les pages critiques bénéficient d'un chargement immédiat côté serveur, tandis que les interactions dynamiques sont gérées côté client pour plus de réactivité.
Gestion de l'état
Gestion du state via Redux
Centralisation et structuration de l'état global de l'application via Redux, permettant une synchronisation efficace des données entre les différents composants (plantes, tâches, utilisateur connecté, etc.). Cette approche optimise les performances en limitant les appels redondants et garantit la cohérence des informations affichées.
ORM Prisma
Les schémas prisma
Utilisation de Prisma comme ORM pour concevoir une base de données relationnelle claire, typée et évolutive. J'ai défini des schémas complexes permettant de lier facilement utilisateurs, plantes et maladies, tout en profitant de l'autocomplétion et des vérifications statiques de TypeScript pour une plus grande fiabilité.
Vous avez un projet similaire ?
Discutons ensemble de votre projet et voyons comment je peux vous aider a le concretiser.
Discutons ensemble