Articles on topics related to the world of web development

large_couverture-linkedin.jpg

medium_couverture-linkedin.jpg

small_couverture-linkedin.jpg

thumbnail_couverture-linkedin.jpg

couverture-linkedin.jpg

Blog

Thibault Barrat - Freelance Web Developer

%s | Thibault Barrat - Freelance Web Developer

logo1-fond blanc.ico

List of my personal web projects or realized for clients.

medium_avatar-linkedin-banniere copie.png

small_avatar-linkedin-banniere copie.png

thumbnail_avatar-linkedin-banniere copie.png

avatar-linkedin-banniere copie.png

Projects

The goal of this project was to create a completely custom WordPress theme according to the design provided by the client. What has been interesting in this work is above all the construction of the design which is minimalist and modern and which, although it is a WordPress site, has the same behavior as a Single-Page Application.  
That is to say that the background of the site consists of a carousel presenting different bathroom designs and the navigation between the different pages does not reload the page but will modify the content displayed in the tab which opens on the right of the page.  
The implementation of this functionality was facilitated by the use of a JavaScript library: [Pjax] (https://github.com/MoOx/pjax)

![Screenshot from New Bath site{1920x942}](https://res.cloudinary.com/damqzwhnk/image/upload/v1637762642/Firefox_Screenshot_2021_11_24_T13_56_45_641_Z_cc7543a1be.png)

Development of a custom WordPress theme for a company specializing in bathroom design

large_Firefox_Screenshot_2021-11-23T10-46-02.448Z.png

medium_Firefox_Screenshot_2021-11-23T10-46-02.448Z.png

small_Firefox_Screenshot_2021-11-23T10-46-02.448Z.png

thumbnail_Firefox_Screenshot_2021-11-23T10-46-02.448Z.png

Firefox_Screenshot_2021-11-23T10-46-02.448Z.png

New Bath

L'objectif de ce projet était de créer un thème WordPress complètement sur mesure selon le design fourni par le client. Ce qui a été intéressant dans ce travail, c'est surtout la construction du design qui est minimaliste et moderne et qui, bien qu'il s'agisse d'un site sous WordPress, a le même comportement qu'une Single-Page Application.  
C'est à dire que l'arrière plan du site est constitué d'un carrousel présentant différents design de salle de bains et la navigation entre les différentes pages ne recharge pas la page mais va modifier le contenu affiché dans l'onglet qui s'ouvre à droite de la page.  
La mise en place de cette fonctionnalité a été facilité par l'utilisation d'une librairie JavaScript : [Pjax](https://github.com/MoOx/pjax)

![Capture d'écran du site New Bath{1920x942}](https://res.cloudinary.com/damqzwhnk/image/upload/v1637762642/Firefox_Screenshot_2021_11_24_T13_56_45_641_Z_cc7543a1be.png)



Développement d'un thème WordPress sur mesure pour une entreprise spécialisée dans la conception de salle de bains

L'objectif de ce projet était de partir d'un thème WordPress existant, en l'occurence le thème [Bridge](https://bridge250.qodeinteractive.com/) et de le personnaliser afin d'être conforme à la charte graphique du client et également cohérent avec les contenus du site.  
Ce projet m'a également permis de tester l'utilisation du plugin WPML pour mettre en place les versions multilingues des contenus.

![Capture d'écran du site heem.lu{1905x942}](https://res.cloudinary.com/damqzwhnk/image/upload/v1637612914/Firefox_Screenshot_2021_11_22_T20_25_37_881_Z_1d3188d392.png)



Personnalisation d'un thème WordPress et mise en place de l'internationalisation pour une société de services à la personne

large_Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

medium_Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

small_Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

thumbnail_Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

Heem

Il s'agit du portfolio que vous consultez actuellement. J'ai décidé de refaire complètement mon portfolio en 2021 pour deux principales raisons :
- l'ancien portfolio ne me convenait plus au niveau du design et des technologies utilisés (jQuery et bootstrap notamment)
- je souhaitais ajouter une section blog me permettant de publier régulièrement des articles
## Technologies utilisés
Ce nouveau portfolio a également été l'occasion de mettre en pratique une partie de ce que j'ai pu apprendre lors de ma formation React.js. En revanche, j'ai voulu utiliser un framework et non directement React pour profiter des gains en SEO apportés par l'utilisation des deux principaux frameworks React (Next.js et Gatsby) et également des gains de performances apportés par la génération de sites statiques. Après avoir comparé Gatsby et Next.js, mon choix s'est finalement porté sur Next.js.

En ce qui concerne la partie backend, mon souhait d'avoir une section blog implique fortement l'utilisation d'un CMS headless. Mon choix s'est porté sur Strapi, qui a été assez facile à mettre en place et configurer.
## Ce que ce projet m'a appris
D'abord, à travers ce projet, j'ai découvert Strapi et Next.js que je pense réutiliser pour d'autres projets. Cette approche me semble bien plus adapté au web moderne en terme de performances, sécurité, expérience utilisateur et expérience développeur comparé à des solutions basées sur WordPress.  
Plus précisément, les petits challenges de ce projet ont été l'utilisation de la librairie Matter.js pour créer les logos HTML, CSS, JS et React qui tombent et qui interagissent avec la souris dans la première section de la page d'accueil et également la mise en place d'un dark thème qui était une première pour moi.

![Capture d'écran de la première section de la page d'accueil{1893x699}](https://res.cloudinary.com/damqzwhnk/image/upload/v1637761806/Firefox_Screenshot_2021_11_24_T13_49_13_047_Z_4343db05f8.png)

## Les futures évolutions
Dans le futur, j'aimerai mettre en place le plugin internationalisation proposé par Strapi afin de mettre à disposition une version anglophone de mon site. Mais cela nécessite d'abord un gros travail de traduction de tous les contenus donc ce ne sera pas fait dans l'immédiat.

[UPDATE 10 Décembre 2021] La fonctionnalité d'internationalisation a été implémentée, vous pouvez maintenant choisir entre les versions anglaise et française du site.



Développement de mon portfolio avec une nouvelle partie blog et la mise en application des connaissances acquises lors de ma formation React.js

Portfolio

The goal of this project was to start from an existing WordPress theme, in this case the [Bridge theme](https://bridge250.qodeinteractive.com/) and to customize it in order to comply with the corporate identity and style quide of the customer and also consistent with the content of the site.  
This project also allowed me to test the use of the WPML plugin to set up multilingual versions of content.

![Screenshot from heem.lu{1905x942}](https://res.cloudinary.com/damqzwhnk/image/upload/v1637612914/Firefox_Screenshot_2021_11_22_T20_25_37_881_Z_1d3188d392.png)


Customization of a WordPress theme and implementation of internationalization for a personal services company

Il s'agit du projet réalisé à la fin de la formation React.js que j'ai suivi au sein de l'école O'clock. Il a été réalisé avec 4 autres étudiants pendant 4 semaines avec la répartition suivante : 3 développeurs front-end et 2 développeurs back-end.

![Capture d'écran du site Mentor Me{1905x942}](https://res.cloudinary.com/damqzwhnk/image/upload/v1639058156/Firefox_Screenshot_2021_12_09_T13_41_15_888_Z_ffd4fce464.png)

## Fonctionnalités
Un utilisateur qui souhaite devenir mentor et proposer un cours dans une compétence donnée ou suivre un cours proposé par un autre mentor peut s'inscrire sur le site.  
Lorsqu'il se connecte, il a la possibilité d'effectuer une recherche parmi les cours proposés, de proposer un nouveau cours ou bien d'ajouter certains cours à ses favoris pour y les retrouver facilement.  
Depuis sa page profil, il a la possibilité de voir et supprimer ses favoris, de supprimer les cours qu'il a lui même proposé et également de mettre à jour les données de son profil.  
Il y a également une gestion des droits, avec un rôle "administrateur" qui valide les cours proposés avant qu'ils soient visible sur le site et qui a la possibilité de supprimer tous les cours et tous les utilisateurs.

## Technologies utilisés
Concernant la partie back-end, il s'agit d'une API REST créée avec une basse de données PostgreSQL et le framework ExpressJS.  
Pour la partie front-end, nous avons utilisé React.js couplé avec Redux pour la gestion des actions, des appels à l'API et du store. Nous avons également implémenté la librairie Leaflet pour localiser sur une carte les cours proposés.  
L'authentification des utilisateurs est assurée par les JWT avec un accessToken stocké dans le state de l'application qui permet d'authentifier les requêtes et un refreshToken stocké dans le localStorage qui permet de conserver l'utilisateur connecté et de récupérer un nouveau accessToken.

## Présentation Youtube
Ce projet a fait l'objet d'une présentation Youtube d'une quinzaine de minutes disponible [en cliquant ici](https://youtu.be/2S5FSWNPA5g?t=4591).


Développement d'une plateforme d'échanges de compétence gratuite.

large_banniere-mentor-me.png

medium_banniere-mentor-me.png

small_banniere-mentor-me.png

thumbnail_banniere-mentor-me.png

banniere-mentor-me.png

Mentor Me

## Fonctionnalités
Il s'agit d'une section "commentaires" où le visiteur peut augmenter ou diminuer le score des commentaires.  
Pour écrire un commentaire ou répondre à un commentaire, il doit créer un compte et se connecter.  
Il a également la possibilité de supprimer ou d'éditer ses commentaires.

![Comments section screenshot{1777x1134}](https://res.cloudinary.com/damqzwhnk/image/upload/v1644574900/Firefox_Screenshot_2022_02_11_T08_56_18_148_Z_3f00aa9540.png)

## Technologies utilisées
Pour ce projet, j'ai utilisé pour la première fois TypeScript pour développer la partie front-end avec React.js. Étant donné qu'il s'agit d'un petit projet, j'ai choisi de ne pas utiliser Redux pour gérer le state. A la place, j'ai tulisé les hooks React `useContext` et `useReducer`.  
Concernant le back-end, il s'agit d'une API REST développé avec ExpressJS couplée avec une base de données PostgreSQL.  
La partie authentification utilise les JSON Web Token avec un accessToken et un refreshToken.

Développement du back-end et du front-end d'une section commentaires selon un design fourni par Frontend Mentor.

large_Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

medium_Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

small_Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

thumbnail_Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

Comments section

## Features
This is a "comments" section where the visitor can increase or decrease the comment score.
To write a comment or reply to a comment, he must create an account and log in.
He also has the option of deleting or editing his comments.

![Comments section screenshot{1777x1134}](https://res.cloudinary.com/damqzwhnk/image/upload/v1644574900/Firefox_Screenshot_2022_02_11_T08_56_18_148_Z_3f00aa9540.png)

## Technologies used
For this project, I used TypeScript for the first time to develop the front-end part with React.js. Since this is a small project, I chose to not use Redux to manage the state. Instead, I used the React `useContext` and `useReducer` hooks.
Regarding the back-end, it is a REST API developed with ExpressJS coupled with a PostgreSQL database.
The authentication part uses JSON Web Tokens with an accessToken and a refreshToken.

Development of the back-end and front-end of a comments section according to a design provided by Frontend Mentor.

This is the portfolio you are currently looking to. I decided to completely redo my portfolio in 2021 for two main reasons:
- the old portfolio no longer suited me in terms of design and technologies used (especially jQuery and bootstrap)
- I wanted to add a blog section in order to regularly publish articles
## Technologies used
This new portfolio was also the opportunity to put into practice some of what I learned during my React.js training. On the other hand, I wanted to use a framework and not directly React to take advantage of the SEO benefits brought by the use of the two main React frameworks (Next.js and Gatsby) and also of the performance benefits brought by the static site generation. After comparing Gatsby and Next.js, my choice finally fell on Next.js.

Regarding the backend part, my wish to have a blog section strongly involves the use of a headless CMS. My choice fell on Strapi, which was quite easy to set up and configure.
## What this project taught me
First, through this project, I discovered Strapi and Next.js that I think I will reuse for other projects. This approach seems to me to be much more suited to the modern web in terms of performance, security, user experience and developer experience compared to solutions based on WordPress.  
Specifically, the small challenges of this project were the use of the Matter.js library to create the HTML, CSS, JS and React logos that fall and interact with the mouse in the first section of the homepage and also the implementation of a dark theme which was a first for me.

![Screenshot of first section of homepage{1893x699}](https://res.cloudinary.com/damqzwhnk/image/upload/v1637761806/Firefox_Screenshot_2021_11_24_T13_49_13_047_Z_4343db05f8.png)

## Future developments
In the future, I would like to set up the internationalization plugin offered by Strapi in order to provide an English version of my site. But that first requires a lot of translation work for all the content so it will not be done immediately.

[UPDATE 10 December 2021] As you are currently on the english version, you can see that the internalization feature has been implemented.

Development of my portfolio with a new blog section and the application of the knowledge acquired during my React.js training

This is the project carried out at the end of the React.js training that I followed within the O'clock school. It was carried out with 4 other students over 4 weeks with the following tasks allocation : 3 front-end developers and 2 back-end developers.

![Screenshot from Mentor Me site{1905x942}](https://res.cloudinary.com/damqzwhnk/image/upload/v1639058156/Firefox_Screenshot_2021_12_09_T13_41_15_888_Z_ffd4fce464.png)

## Features
A user who wants to become a mentor and offer a course in a given skill or take a course offered by another mentor can register on the site.  
When he logs in, he can search among the courses offered, suggest a new course or add certain courses to his favorites to find them easily.  
From his profile page, he can view and delete his favorites, delete the courses he has offered himself and also update his profile data.  
There is also rights management, with an "administrator" role which validates the courses offered before they are visible on the site and which has the possibility of deleting all the courses and all the users.

## Technologies used
Regarding the back-end part, it is a REST API created with a PostgreSQL database and the ExpressJS framework.  
For the front-end part, we used React.js coupled with Redux for the management of actions, API calls and the store. We have also implemented the Leaflet library to locate the courses on a map.  
User authentication is provided by the JWTs with an accessToken stored in the state of the application which allows requests to be authenticated and a refreshToken stored in the localStorage which allows to keep the user connected and to retrieve a new accessToken.

## Youtube presentation
This project was the subject of a 15-minute Youtube presentation (in French) available [by clicking here](https://youtu.be/2S5FSWNPA5g?t=4591).

Development of a free platform which offers peer learning.