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

# Process Projet 2

> Ou savoir par quel bout commencer son projet #2...

Pre-requisites:
- being in pair 👯‍♀️

## Conception

:::warning
**Vous ne devez pas commencer par coder !**

👉🏻 au contraire, vous devez passer par une phase de conception dans laquelle vous allez mieux définir votre projet
:::

### Inspiration / Ideation (cf. examples)

Brainstorming sur Figma.com (mode collaboratif)

Inspiration sur Pinterest.com, Behance.com, dribbble.com ...

### Mockups

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

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

### Tableau des routes

:::danger
🚨 Required
:::

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

[](https://docs.google.com/document/d/1vIVOSUKsvbcB05ySzX5FR6sPDsUQoJApW6WsD7pyi4I/edit?usp=sharing)

### 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 repository + droits collaborateurs)
- Initialisation du projet (`npx ironlauncher@latest monsuperprojet`)
- premières routes : homepage puis signup puis login/logout (modèle de `User`)
- integration HTML/CSS de la première page
- dynamisation Handlebars
- déploiement Fly.io (cf. [cours](https://my.ironhack.com/lms/courses/course-v1:IRONHACK+WDPT+202302_PAR/modules/ironhack-course-chapter_15/units/ironhack-course-chapter_15-sequential_2-vertical_3))

### Stratégie recommandée

En pair, implémentation feature après feature :
- faire le fonctionnel de la page signup/login (moche : sans s'occuper du style)
- puis s'occuper de l'intégration CSS

Puis recommencer, sur une autre fonctionnalité...