Pour celles et ceux qui sont encore pris par les projets (ou autre raison valable), nous proposons un sujet de checkpoint 4 réalisable en une journée, au lieu des deux prévues pour le sujet classique.
D'abord, quelques différences entre les deux sujets :
-
Checkpoint sur deux jours :
- 3 thèmes au choix : faire un Wild Circus dynamique, un portfolio, ou un site sur un sujet libre
- Vise à valider toutes les compétences acquises en formation
- On doit donc tout faire de zéro : rédaction des user stories, maquette, modèle conceptuel de données
-
Checkpoint réduit :
- Thème unique : faire un portfolio. Il reste possible de partir sur un sujet différent mais collant de près aux fonctionnalités qu'on demande ci-dessous pour le portfolio.
- Se concentre plus sur la partie purement technique / React / Node.js, moins sur le maquettage/intégration
- Les user stories sont fournies, des templates HTML/CSS sont proposés comme base de départ, il vous reste tout de même à créer la base de données, à partir de suggestions
Ce document décrit le sujet réduit, pour l'autre reportez-vous à la quête liée ci-dessus.
L'idée est de créer un portfolio en ligne présentant vos différents projets : projets réalisés en formation (incluant ceux de hackathon) ou projets personnels.
Deux sont obligatoires :
- La page d'accueil affiche les différents projets, dans une mise en page responsive
- Un formulaire permet de saisir un nouveau projet
Deux sont optionnelles (choisir une des deux seulement, sauf si vous allez très vite) :
-
Cliquer sur un projet permet d'obtenir plus de détails :
- Soit en naviguant vers une autre page,
- Soit en ouvrant une modale
-
Un bouton d'édition permet d'éditer le projet, avec un formulaire identique à celui de création, mais pré-rempli
-
Partie front :
- utiliser React Router pour passer de la page d'accueil à la page d'ajout de projet
-
Partie back :
- utiliser le routeur Express pour ne pas écrire ses routes directement sur "app"
- utiliser dotenv pour configurer au moins le mot de passe de connexion à la base de données
Pour vous alléger le travail d'intégration, on vous propose, sans vous les imposer, des templates existants. Vous êtes libres d'utiliser un autre template, mais en ne récupérant que son HTML/CSS - pas d'animations avec jQuery ou autres qui peuvent être "cassées" par l'intégration dans React.
-
Basé sur Bootstrap et fortement inspiré de leur Album Example, avec une mise en page sous forme de "cards" :
-
Non-basé sur Bootstrap, avec les projets s'affichant en pleine largeur, les uns à la suite des autres :
Vous aurez une seule table à créer, qui devra contenir les données d'un projet :
- Son nom,
- Sa description succinte,
- L'URL du repo GitHub,
- Eventuellement l'URL du projet déployé
- Le chemin d'une capture d'écran (vous pouvez stocker les images sous
public/dans le front)
- Travaillez sur l'aspect back et front d'une user story avant de passer à la suivante
- Organisez vous comme cela vous arrange pour réaliser le checkpoint sur une journée en tout (mais vous pouvez déborder si le temps le permet !)