# Application WEB

Dans le cadre de mon stage, j'ai collaboré à la réalisation du site "Votre Appart Neuf", un projet développé avec un camarade de classe. Nous avons utilisé plusieurs technologies modernes pour mener à bien ce projet. React a été choisi pour la structure dynamique de l'interface utilisateur, permettant une navigation fluide et réactive. Tailwind CSS a été utilisé pour la mise en forme, ce qui nous a permis de créer un design épuré et responsive tout en accélérant le développement des styles. Next.js a servi de framework principal, offrant des performances optimisées grâce au rendu côté serveur (SSR) et à la génération statique (SSG). Enfin, nous avons déployé le site via Vercel, une plateforme idéale pour héberger des applications web modernes. Ce projet a renforcé mes compétences techniques tout en me permettant de travailler en équipe sur une application concrète destinée à des utilisateurs finaux.

### Quelque captures d'écrans&#x20;

<figure><img src="https://2500238423-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAj8dv5e4J7gv8rWitQyw%2Fuploads%2F35LPZtPZCl0DGkjpqxH7%2Fimage.png?alt=media&#x26;token=860fc9a6-ce6d-4c16-a697-b9dffa867f6f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2500238423-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAj8dv5e4J7gv8rWitQyw%2Fuploads%2FoaqqgT12yUIWIDULwYga%2Fimage.png?alt=media&#x26;token=858bb443-3be1-42d5-b6bc-6cdfb703e52f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2500238423-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAj8dv5e4J7gv8rWitQyw%2Fuploads%2FZomVa9l1E1cM1kw2s0kV%2Fimage.png?alt=media&#x26;token=4c8993c9-d07a-42d5-82f3-63e7dd3c3dcb" alt=""><figcaption></figcaption></figure>

### Compétence apprise

Nous avons tout d'abord commencé par la création d'une maquette Figma. Nous avons dû trouver la direction artistique (D.A.) et la charte graphique de l'application pendant toute une semaine, avec quelques visioconférences avec notre maître de stage, afin de nous mettre d'accord. Le fait d'avoir créé une maquette de A à Z a renforcé mes compétences en création de maquette et en recherche de design, ce qui est très avantageux pour les développeurs web.

Quelques captures :

<figure><img src="https://2500238423-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAj8dv5e4J7gv8rWitQyw%2Fuploads%2FixvzlOJgg0x9UhCyGkEI%2Fimage.png?alt=media&#x26;token=fe0517ff-540e-462c-846e-62bcaa14ef2f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2500238423-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAj8dv5e4J7gv8rWitQyw%2Fuploads%2FijAeZ2cDr2GWmZ10pPkX%2Fimage.png?alt=media&#x26;token=e7a2c348-0a89-4abb-bf37-37a4cfc0a2c2" alt=""><figcaption></figcaption></figure>

Suite à cette semaine réservée à la création de la maquette, nous sommes passés au développement de l'application web. Pour moi, React, Tailwind et Next.js étaient totalement une découverte, je n'avais encore jamais codé avec ce genre de technologies. La prise en main a été assez rapide et la compréhension du langage également. Cette découverte m'a permis d'étendre mes compétences, et cela a renforcé mon idée sur le fait d'apprendre et d'utiliser ce genre de technologies, car elles sont bien plus puissantes que des langages classiques.

<figure><img src="https://2500238423-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAj8dv5e4J7gv8rWitQyw%2Fuploads%2FmDrF8jGhuulJOiJ5InbH%2Fimage.png?alt=media&#x26;token=34c07d77-806e-4b46-aa33-5ddd41b48e0c" alt=""><figcaption></figcaption></figure>

### Les difficultés&#x20;

Malgré tout, nous avons quand même eu quelques difficultés lors de la création de certains composants, tels que le header. En effet, le header devait être à la fois responsive et inclure plusieurs fonctionnalités comme un menu déroulant et des liens dynamiques. Cela a nécessité de bien comprendre la structure des composants en React, ainsi que l'utilisation des classes Tailwind pour s'assurer que le design s'adapte correctement sur tous les types d'écrans. Nous avons également rencontré quelques difficultés avec le responsive, qui était parfois compliqué à réussir en raison d'un manque de connaissances. Adapter l'application à différents types d'écrans demandait une compréhension approfondie des media queries et de l'utilisation des classes Tailwind spécifiques pour le responsive design. Cela nous a poussé à approfondir nos compétences dans ce domaine pour obtenir un résultat optimal.

<figure><img src="https://2500238423-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAj8dv5e4J7gv8rWitQyw%2Fuploads%2Foh4PtDhnqDKbe2eoQgLK%2Fimage.png?alt=media&#x26;token=f3b53629-97bc-47f5-ba79-1fe92d948de8" alt=""><figcaption><p>Format ordinateur </p></figcaption></figure>

<figure><img src="https://2500238423-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAj8dv5e4J7gv8rWitQyw%2Fuploads%2FPfiSeQb1JdrjlQ2ntcue%2Fimage.png?alt=media&#x26;token=86948dcd-3fa2-4868-b8f3-713f8cb6e283" alt=""><figcaption><p>format tablette</p></figcaption></figure>

<figure><img src="https://2500238423-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAj8dv5e4J7gv8rWitQyw%2Fuploads%2F01RQZCqcnw8VDzrlglBo%2Fimage.png?alt=media&#x26;token=a88c4ff0-8cbe-4557-8c5c-6f5580e6dc14" alt=""><figcaption><p>Format téléphone</p></figcaption></figure>
