Skip to content
View AdrienVers's full-sized avatar
Block or Report

Block or report AdrienVers

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
AdrienVers/README.md

Bienvenue 👋

Ingénieur en développement informatique (Fullstack), spécialisé dans la création d'applications web et de logiciels, allant de projets complexes aux sites vitrines. Vous pouvez accéder à mon portfolio en cliquant : ICI.

Sur mon GitHub, vous pourrez d'ores et déjà retrouver quelques uns de mes projets :

Quelques projets

  • Site de trading ()

Application de trading permettant de s'initier au monde financier et à la Bourse. Ce site web comprend de nombreuses fonctionnalités (création de compte, connexion/déconnexion (Firebase), requêtes HTTP vers API REST, simulation d'achat ou de vente d'actions, gestion de portefeuille, ...). L'objectif du projet était de réaliser un site web avec les bonnes pratiques (typage des variables avec TypeScript, tests unitaires avec Jest et RTL, meilleur référencement avec Next et les métadonnées).

DistrictMoney

Stacks utilisées : Next/React, TyepScript, Styled Components, Jest, Firebase.

Pour plus de détails : Le code sur GitHub, l'accès au site.

  • Modélisation du système solaire ()

Modélisation 3D du système solaire offrant la possibilité d'accéder à des informations sur les différentes planètes et télescopes, en les sélectionnant ou en les recherchant via une barre de navigation.

SpaceOdyssey

Stacks utilisées : Next/React, TyepScript, Styled Components, React-Three-Fiber / ThreeJS.

Pour plus de détails : Le code sur GitHub, l'accès au site.

Pour voir l'ensemble de mes projets, vous pouvez vous rendre sur mon portfolio.

Vous trouverez également quelques liens pouvant être interessants ci-dessous :

Ma veille technologique

  • Différentes technologies web recommandées et en devenir :

Statistiques sur les librairies web les plus utilisées en 2022 ✅.

Statistiques sur les plateformes les plus utilisées en 2021.

Les toutes dernières versions et informations sur le Framework React (V18.2 ✅).

Les toutes dernières versions et informations sur NextJS (V13 ✅).

Les toutes dernières versions et informations sur Angular (V17 ✅).

Livre pour approfondir ses connaissances en Angular (02/22, V12 🆗.

Liste de challenges à réaliser en Angular (avec solutions).

Comprendre visuellement la programmation réactive (RxJS avec Angular).

Les toutes dernières versions et informations sur C# (V11 ✅).

Les toutes dernières versions et informations sur Cypress.

Documentation officielle de Nuxt 3 (framework basé sur VueJS).

Documentation officielle de NestJS (lien pointant vers le cycle de vie d'une requête HTTP).

Les toutes dernières versions et informations sur le Framework NestJS (V10 ✅).

Livre pour approfondir ses connaissances en React (01/20, V16 🆗).

Livre pour apprendre à utiliser Docker spécifiquement pour .NET.

  • Différentes ressources pour se perfectionner :

Dans le developpement web (:computer:) :

React :

Documentation sur les hooks React principaux (useState, useEffect, useRef, useContext).

Maîtriser le hook useEffect.

Comparaison des performances entre CRA et Next.js.

Optimisation des performances React (Vidéo sur le hook useCallback).

Choix de bibliothèque pour générer des formulaires.

Mieux gérer l'organisation de ses dossiers / fichiers dans un projet React.

Roadmap interactive pour React (également pour les Frontend, Backend, DevOps et QA Testers).

Approfondir ses connaissances en React et savoir répondre à des questions techniques.

Newsletters publics et intéressantes sur React et les écosystèmes qui gravitent autour.

Actualité sur React (Sébastien Lorber).

State Management :

Documentation sur les hooks Redux principaux (useDispatch, useSelector).

Zustand : Une alternative de state management possible face aux différents problèmes liés au Context API ou à Redux.

Tests :

Documentation générale sur les tests unitaires (Jest).

Méthodes utilisables pour les tests unitaires avec Jest.

Documentation sur les tests de composants (React Testing Library).

Tester les performances d'un site.

Installer Jest dans NextJS (V13 ✅).

Installer Vitest dans Nuxt 3.

Installer Storybook dans Nuxt 3.

Article intéressant sur l'utilisation de Storybook par Doctolib.

Article intéressant sur la pyramide des tests.

API REST :

Documentation sur React Query.

Blog sur React Query.

API fiable sur les recettes de cuisine.

API fiable sur les films et séries.

API du gouvernement permettant d'obtenir des données publiques sur les entreprises (chiffre d'affaire, cotation en bourse, etc.).

API de la RTE fournissant la consommation électrique française et la production électrique par filière.

API fournissant des données spatiales : Spaceflight News API, Launch Library 2 et Horizons System (NASA).

Liste d'APIs sur de nombreux thèmes variés, accessibles gratuitement.

Créer une API REST en 2 minutes, avec données personnalisables, pour effectuer des tests dessus.

API GraphQL :

AWS Amplify : Utilisation avec React.

AWS Amplify : Migration de GraphQL Transformer v1 à v2.

Article intéressant sur le GraphQL.

HTML/CSS/JS :

Hébergeurs de code permettant de visualiser le résultat directement :

Blog sur le développement web.

Données techniques (HTML/CSS/JS).

Données techniques et tests ludiques (HTML/CSS/JS).

Flex Box tout en 1.

Précautions à respecter lors du développement d'un site web.

Patterns usuels en JS recommandés par la W3C.

Les promises en JS (syntaxe, async/await).

Générateur de regex en fonction du cas utilisé (username, mail, password, etc..).

Questions-Réponses en JavaScript

CSS-in-JS :

Présentation de librairies CSS-in-JS sans runtime (≠ styled-components)..

Tendance entre styled-components (+ CRA) et emotion (+ NextJS).

Icons :

Icons variées pouvant être utilisées avec React / Vue (Font Awesome).

Icons de google pouvant être utilisées avec Angular (Material Icons).

3D :

Implémentation de React-Three-Fiber et ThreeJS dans NextJS.

TypeScript :

Les bases à connaître avant de démarrer un projet en TypeScript.

Transformer du JS en TS de façon amusante.

Récapitulatif des erreurs possibles en Typescript.

Fiche pratique sur les types en TypeScript.

Tips : Éviter toute librairie non mise à jour depuis plus d'une année et ne supportant pas TypeScript (filestack-react).

Clean Code :

Liste des différents Design Patterns, principes SOLID et autres sujets.

Article intéressant sur la structure d'une architecture héxagonale.

Vulgarisation des Design Patterns (refactoring guru).

Suite d'articles interessants sur les Design Patterns en C#.

Le Factory Pattern (C#, Unity).

Respecter les conventions de commits git avec le package commitlint (feat, fix, chore, ...).

C# :

Ensemble des packages utiles pour la réalisation d'API en ASP.NET.

Extensions requises dans VS Code (autocomplétion, linter, etc..) : .NET Install Tool, C# Dev Kit (Microsoft).

Se challenger sur C#, ASP.NET, Azure et du DevOps.

Réaliser des tests unitaires en C# avec xUnit.

C++ :

Formations Unreal Engine 5.

Graphiques :

Réaliser des graphiques en React grâce à react-chartjs-2.

Réaliser des graphiques en Angular grâce à ng2-charts.

Comparatif des différentes librairies permettant de créer des graphiques en React (Nivo, Victory, React-chartjs-2, Recharts).

Comparatif des différentes librairies permettant de créer des calendriers en React.

Librairie pour réaliser des graphiques responsives sur React, Angular et Vue.

BDD :

Générateur de requêtes SQL.

Infographie très complète sur PostgreSQL.

ORM permettant de manipuler les BDD relationnelles (PostgreSQL) et non relationnelles (MongoDB) : Prisma.

Railway, un cloud générant des BDD facilement et rapidement (que ce soit du PostgreSQL, MongoDB ou autre).

Site web permettant de réaliser facilement des modèles conceptuels de base de données SQL (dbdiagram).

Plateforme serverless pour du MySQL : PlanetScale.

Plateforme permettant d'héberger gratuitement PostgreSQL : Render.

Big Data :

Articles de blog sur la Big Data, notamment sur du monitoring (Elasticsearch, Kafka, Kibana, etc.).

.NET :

Démystification et présentation des technologies récentes en .NET.

UI/UX :

Différents modèles et dimensions de mobiles pour le responsive).

Pour réaliser des maquettes UI/UX design (Figma).

Projets donnant des idées créations et/ou modifications de design (Adobe Labs).

Différents sites web avec une très belle expérience UI/UX.

Choisir les bonnes couleurs pour un design optimal de son site web.

Collection d'outils permettant la réalisation facile et gratuite de motifs, dégradés, textures et formes.

Illustrations libres de droits pour le UI/UX design.

Utilisation pratique de Figma avec différentes interactions possibles.

Différents fonds d'écran pour sites web avec des motifs générés en CSS.

Tester le contraste entre deux couleurs pour vérifier la bonne lisibilité d'un texte (Critère 3.2 RGAA).

Creative Design :

Ensemble des sites web ayant obtenu des prix pour leur design et interface UI/UX.

Générateur de logo en fonction du contenu et des réponses données.

Générateur d'images en fonction du contenu (image possible) et description donnée (gratuit avec recharge de crédits toutes les 24h).

Site web permettant de faire de la segmentation d'images.

Site web permettant d'effacer certains éléments d'une photographie et de remplir automatiquement le vide laissé.

Compresseur d'image sans nuire à la qualité de l'image.

Exemples de site web avec différents designs intéressants.

SVG :

Bibliothèque permettant de récupérer des cartes géographiques sous format svg : react-simple-maps.

Site web permettant de télécharger les SVG de différentes cartes géographiques.

Générateur d'illustrations sous format SVG.

Versioning :

Vérifier l'état de GitHub en cas de problème d'actualisation d'un projet.

Méthodologie agile :

Exemple concret d'un projet réalisé avec la méthodologie agile SCRUM.

Mieux gérer l'organisation et les dead-lines de ses projets avec Jira.

Services cloud (authentification, gestion des données, etc..) :

Firebase avec Firestore pour la gestion des données.

AWS avec DynamoDB pour la gestion des données.

Une alternative aux 2 premiers pour le système d'authentification : NextAuth.

Liste des Authentication Providers pouvant être utilisés avec NextJS.

Décodeur de tokens JWT.

Les différentes catégories de services en Cloud Computing (IaaS, PaaS, SaaS).

Hébergeurs de fichiers et d'images (avec version gratuite) :

Imgur (simple d'utilisation, mais génère des problèmes d'accès lors des upload en localhost),

Cloudinary (simple d'utilisation, mais génère des problèmes de cookies),

Filestack (simple d'utilisation, mais génère des problèmes lors de la mise en production liés au manque cruel de mise à jour),

Supabase (simple d'utilisation et fonctionne sans générer de problèmes tiers).

Docker :

Plateforme permettant d'héberger gratuitement des images Docker : Zeet.

Package microsoft .NET facilitant la conteneurisation d'une minimal API.

Plateforme permettant d'héberger gratuitement l'image Docker d'une application (ASP.NET) : Render.

SEO :

Analyse du trafic de n'importe quel site web.

Bonnes pratiques avec la balise meta description.

Livre sur le référencement SEO : Le SEO en 500 questions, Olivier Andrieu..

Améliorer la vitesse de chargement du contenu (LCP).

Extensions Google :

Analyse des frameworks, librairies JS et CDN d'un site web (Wappalyzer).

Revoir l'ancienne version et structure d'un site web (Wayback Machine).

Visualisation de l'ensemble des éléments d'une page de façon colorée (Debug CSS).

Récupérer n'importe quelle couleur d'un site web (Smart Color Picker).

Récupérer n'importe quelle police (font-family) d'un site web (Font Finder).

Visualiser son site sur différents formats : ui.dev, screenfly et Responsive Viewer.

Reproduire l'intégralité d'un site web sous forme de maquette sur Figama grâce à HTML to Design.

Visualiser un fichier JSON de façon claire dans le navigateur.

Extensions VS Code :

Extension permettant de visualiser la taille de ses fichiers dans un projet VS Code.

Thème et couleur de script non agressif pour VS Code (Default Themes : Dark+).

Extension permettant de visualiser toutes les icons des fichiers (Material Icon Theme).

Extension permettant de fermer automatiquement une balise HTML (ou JSX) avec le bon nom.

→ Équivalent possible avec "editor.linkedEditing": true (dans settings.json de VS Code).

Bureaucratique :

Alternative open-source et fiable à Adobe Acrobat Reader (payant) : iLovePDF (gratuit).

Développeurs, Formateurs et Youtubeurs respectant les bonnes pratiques à suivre pour progresser :

Jack Herrington - Senior Full Stack Developer (Next/React, Vue, TypeScript, GraphQL).

David Hockley - Senior Full Stack Developer (React, Angular, TypeScript, NodeJS).

Melvyn Malherbe - Senior Full Stack Developer (Next/React, TypeScript).

Simon Dieny - Senior Full Stack Developer (Angular, NodeJS, Design Patterns).

Enzo Ustariz - Senior Front-End Developer (React, Next, Vue, TypeScript, projets CSS, UI/UX Design, Concours Web).

Guillaume Duhan - Senior Front-End Developer (Vue, Nuxt).

Christophe Mommer - Senior DevOps Developer / MVP (C#, .NET).

Anthony Cyrille - Senior Full Stack Developer (Clean Code, Architecture héxagonale, SOLID, TDD).

Autres secteurs (:bulb:) :

Création d'entreprise :

Vérifier la disponibilité d'un nom de société en France (Infogreffe).

Vérifier la disponibilité d'un nom de société aux États-Unis (SEC).

Vérifier la disponibilité d'un nom de société à l'international (TMview).

Analyseur automatique de CV (CV Catcher d'AddViseo).

Finance :

Actualité des marchés financiers.

Vérifier qu'un courtier en ligne ou banque est bien autorisé par l'AMF.

Analyse du PIB, consommation, production, secteurs d'activité, etc.

Analyse des décisions et orientations politiques de la Commission européenne 2019-2024.

Statistiques et données en Europe (taux d'inflation, PIB, prix du logement, etc..).

Indicateurs économiques aux États-Unis (administration fédérale BLS).

Analyse des enjeux géopolitiques (Le dessous des cartes).

Infographies sur l'agriculture et sur d'autres secteurs en France.

Informations pratiques sur les entreprises françaises (CA, dirigeants, comptes annuels, infos juridiques, etc..).

Liste des différentes start up françaises selon leur secteur d'activité (fintech, foodtech, etc..).

Statistiques sur les productions agricoles par pays.

Actualité sur l'agriculture et indicateurs concernant les marchés agricoles en France.

Cybersécurité :

Infographie très complète sur le modèle OSI.

Pinned

  1. District-Money District-Money Public

    TypeScript

  2. Awayver Awayver Public

    TypeScript

  3. site-de-e-commerce site-de-e-commerce Public

    JavaScript

  4. youtube-clone youtube-clone Public

    https://adrienvers.github.io/youtube-clone/

    JavaScript

  5. SpaceOdyssey SpaceOdyssey Public

    TypeScript

  6. IHM-Industrielle IHM-Industrielle Public

    CSS