Cet article provient de mon article de blog. J’ai mis cet article pour montrer comment vous pouvez rédiger des articles de blog en utilisant le thème Point Rouge.
Développer un site web de type terminal en utilisant ReactJS, TypeScript et Styled-Components. Comprend des fonctionnalités telles que la saisie semi-automatique, plusieurs thèmes, des astuces de commande, etc.
Table des matières
Introduction
Récemment, j’ai développé et publié mon portfolio + un blog. Je suis content d’avoir reçu de bons retours à ce sujet. Aujourd’hui, je souhaite vous présenter mon nouveau site web de portfolio de type terminal. Il est développé en utilisant ReactJS, TypeScript. J’ai eu cette idée de CodePen et YouTube.
Pile technologique
Ce projet est un projet frontend sans aucun code backend. La partie UI/UX est conçue dans Figma. Pour l’interface utilisateur frontale, j’ai choisi React plutôt que JavaScript pur et NextJS. Pourquoi?
- Tout d’abord, je veux écrire du code déclaratif. Gérer le HTML DOM en utilisant impérativement JavaScript est vraiment fastidieux.
- Deuxièmement, parce que c’est React !!! C’est rapide et fiable.
- Enfin, je n’ai pas besoin de beaucoup des fonctionnalités de référencement, de routage et d’optimisation d’image fournies par NextJS.
Et bien sûr, il existe TypeScript pour la vérification du type.
Pour le style, j’ai adopté une approche différente de ce que je fais habituellement. Au lieu de choisir CSS pur, Sass ou Utility CSS Framework comme TailwindCSS, j’ai choisi la méthode CSS-in-JS (Styled-Components). Bien que je connaisse Styled-Components depuis un certain temps, je ne l’ai jamais essayé. Ainsi, le style d’écriture et les structures des Styled-Components dans ce projet peuvent ne pas être très organisés ou très bons.
Ce projet ne nécessite pas une gestion d’état très complexe. J’utilise simplement ContextAPI pour gérer les différents thèmes et éviter le prop drilling.
Voici un bref récapitulatif de la pile technologique.
- Front-end : ReactJS, TypeScript
- Style : Styled-Components
- UI/UX : Figma
- Gestion d’état : ContextAPI
- Déploiement : Netlify
Caractéristiques
Voici quelques caractéristiques du projet.
Thèmes multiples
Les utilisateurs peuvent modifier plusieurs thèmes. Au moment de la rédaction de cet article, il y a 5 thèmes ; et d’autres thèmes seront probablement ajoutés à l’avenir. Le thème sélectionné est enregistré dans le stockage local afin qu’il ne change pas lors de l’actualisation de la page.
Autocomplétion de la ligne de commande
Pour se rapprocher le plus possible d’un véritable terminal, j’ai mis en place une fonction d’autocomplétion qui complète les commandes partiellement saisies lorsque l’utilisateur appuie sur « Tab » ou « Ctrl + i ».
Commandes précédentes
Les utilisateurs peuvent revenir aux commandes précédentes ou parcourir les commandes précédemment saisies en appuyant sur les flèches haut et bas.
Afficher/Effacer l’historique des commandes
les commandes précédemment saisies peuvent être visualisées en tapant « historique » dans la ligne de commande. Tout l’historique des commandes et l’écran du terminal peuvent être effacés en tapant « clear » ou en appuyant sur « Ctrl + l ».
Sortie
C’est un projet vraiment amusant, et une partie spéciale de ce projet est que j’ai dû me concentrer sur la logique plutôt que sur l’interface utilisateur (même s’il s’agit d’une sorte de projet frontend).
Liens du projet
- Site Internet : https://terminal.satnaing.dev/
- Dépôt : https://github.com/satnaing/terminal-portfolio