Since last week, I have been thinking about the best way to develop LexiStep. This is an important step to ensure a solid foundation for the future.
So, I thought about Next.js. It is a framework of a framework. For beginners and to put it simply, a framework provides a structured environment for a developer. It includes libraries, structures, and ready-to-use features that I can then use in my application. This saves a lot of development time and prevents me from reinventing the wheel every time I want to build something. This way, I can focus on the essential: business logic.
Next.js is therefore a framework of React, which itself is a framework of JavaScript. So, we can say that Next.js is a framework of a framework.
After some research, I decided that my application would use this technology. It seems to be the most suitable for scalability. That said, there is still a learning curve. I am neither a React developer nor a JavaScript developer. So, I have everything to learn. I need the basics first, and then the rest will come with practice.
On the Next.js website, there are some courses that can be followed. I spent part of last Thursday and Friday evening reading some documentation and doing a few tests. I started from scratch with Next.js, and after some struggles, I began migrating LexiStep to Next.js.
So far, I have managed to reproduce the basic interface. Achieving the same rendering is tricky because I also have to learn how to use Tailwind. I have also created some files to plan for future pages. This week, I would like users to be able to create an account. This means a database is also needed.
In the meantime, the format I developed in pure HTML/CSS/JS remains open. Since I received feedback from @altheana on this topic (I kept insisting that she test the tool), I made some modifications. I specifically created a section for the challenge with the ability to choose a difficulty level and see the challenge update in real time. Then, I moved the "New Challenge" button into this same section. This makes it easier to understand how the WebApp works.
Version Française
Depuis la semaine dernière, je suis en train de réfléchir à la meilleure manière de développer LexiStep . C'est une étape importante pour garantir une base solide pour la suite.
J'ai donc pensé à Next.js. C'est un framework de framework. Pour les néophytes et pour faire simple, un framework donne un cadre de travail à un développeur. Il contient des bibliothèques, des structures et des fonctionnalités prêtes à l'emploi que je peux ensuite utiliser dans mon application. Cela permet de gagner beaucoup de temps dans le développement et m'évite de réinventer la roue à chaque fois que je souhaite développer quelque chose. Je peux alors me concentrer sur l'essentiel : la logique métier.
Next.js est donc un framework de React, lui-même étant un framework de JavaScript. On peut donc dire que Next.js est un framework de framework.
Après quelques recherches, j'ai décidé que mon application utiliserait cette technologie. C'est elle qui semble la plus adaptée pour la scalabilité. Cela dit, il y a tout de même une certaine courbe d'apprentissage. Je ne suis ni un développeur React, ni un développeur JavaScript. J'ai donc tout à apprendre. Il me faut les bases, ensuite, le reste se fera sur le tas.
Sur le site de Next.js, il y a quelques cours qu'il est possible de suivre. J'ai consacré une partie de jeudi dernier et de vendredi soir dernier à lire un peu de documentation et à faire quelques tests. Je suis parti de zéro avec Next.js, et après quelques galères, j'ai commencé à migrer LexiStep en Next.js
J'ai pour le moment réussi à reproduire l'interface de base. Avoir le même rendu est délicat car il faut aussi apprendre à utiliser Tailwind. J'ai aussi créé quelques fichiers pour prévoir les futures pages. Cette semaine, j'aimerais qu'il soit possible pour un utilisateur de se créer un compte. Cela veut dire qu'il faut aussi une base de données.
En attendant, le format que j'ai développé en pur HTML/CSS/JS reste ouvert. Puisque j'ai eu un retour d'@altheana à ce sujet (je la bassinai pour qu'elle teste l'outil), j'y ai apporté quelques modifications. J'ai notamment créé un encart pour le challenge avec la possibilité de choisir une difficulté et de voir le challenge s'actualiser en temps réel. Ensuite, j'ai déplacé le bouton "New Challenge" dans ce même encadré. Il est ainsi plus simple de comprendre le fonctionnement de cette WebApp.
Images are screenshots that I took. The English translation was done using DeepL's API.
Posted Using INLEO
