<style>img {background:transparent!important;}</style>

# Process Projet 3

Ou savoir par quel bout commencer son projet #3.

## Pré-requis

:::danger
🚨 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

:::danger
🚨 Required
:::

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

:::info
Dans figma, créez une `Frame` par page :

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


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

:::warning
💡 low VS. hi-def:
:::

### Tableau des routes

:::danger
🚨 Required
:::

Créer une copie de [ce document](https://docs.google.com/document/d/1JvMriH--NDnGh18EjFgjWEJbTM9t8NRlCvLoKJm6_0I/edit) et adaptez-le avec vos routes.

:::warning
:warning: 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

:::danger
🚨 Required
:::

Créez [une copie de ce drawing](https://docs.google.com/drawings/d/1tyNycT0ZwEx5nULjW5Tdvo-D0FYSOpL62x8-vu-wmn4/edit?usp=sharing), puis écrivez **le json détaillé de vos différents modèles**. Puis établissez les **relations** :

[](https://docs.google.com/drawings/d/1tyNycT0ZwEx5nULjW5Tdvo-D0FYSOpL62x8-vu-wmn4/edit?usp=sharing)

## 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](https://emotion.sh/docs/introduction#react)
- Enfin, vous aurez à déployer le server sur Fly.io et le client sur Netlify: cf. cours