Process Projet 3

Ou savoir par quel bout commencer son projet #3.

Pré-requis

🚨 Required

💭✅ Avoir fait valider son idée de projet.

Conception

Inspiration / Ideation (cf. examples)

Brainstorming sur Figma.com
Inspiration sur Pinterest.com, Behance.com, dribbble.com …

Mockups / Wireframes

🚨 Required

Dessiner chacune des pages : vous pouvez utiliser du papier ou bien Figma.com en mode collaboratif.

Dans figma, créez une Frame par page :

👉🏻 Formez-vous à Figma avec ces tutos : https://www.youtube.com/playlist?list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4

☝🏻Donnez un NOM_DE_PAGE pour chaque page ! (le nom de la page en UPPERCASE)

💡 low VS. hi-def:

Tableau des routes

🚨 Required

Créer une copie de ce document et adaptez-le avec vos routes.

Comme précisé dans le doc, VOUS AUREZ 2 ROUTINGs bien distincts:

• l'un concernant l'app cliente (ie: les URLs utilisateur finales du navigateur)
• l'autre pour le serveur d'API RESTful (ie: les endpoints d'API pour les calls AJAX)

ERD diagram

🚨 Required

Créez une copie de ce drawing, puis écrivez le json détaillé de vos différents modèles. Puis établissez les relations :

Réalisation

• Setup Github (creation repo + droits collaborateurs)

• Initialisation du projet:

  • pour le serveur: ironlauncher
  • pour le client: vite

• implémentation des routes de l'API Rest (JSON) et tests avec Postman

• une fois que toutes vos routes sont ok, vous pouvez passer à React:
  0. mise en place d'un Router (npm i react-router-dom)

  1. implémentation de la homepage
  2. puis du register
  3. puis du login
  4. et des autres "pages"

• Vous pouvez faire le CSS au fur et à mesure des pages. Vous pouvez utiliser une solution CSS-IN-JS type Emotion

• Enfin, vous aurez à déployer le server sur Fly.io et le client sur Netlify: cf. cours