How did I build Lecturillo?
In this post, I provide a detailed explanation of how I built my side project Lecturillo, including the technologies and tools I used during the development process, and what are the future steps for the project.
What is Lecturillo?
Lecturillo is a game similar to Wordle where players have to guess the book of the day based on an initial hint. If a player fails, an additional hint is given. Players have four chances and four hints to guess the book. Currently, the game is in Spanish, but I intend to develop an English version.
Frontend
To develop the frontend of Lecturillo, I used the React library along with the Next.js framework. Additionally, I used Tailwind CSS for the styling of the application. The main components that I constructed are shown below
Backend
The backend of Lecturillo is implemented using Next.js API Routes within the same project as the frontend. This means that the backend and frontend are combined into a single deployed artifact.
The API exposes two operations:
- GetChallenge: it provides the challenge information (hints).
- TrySolve: it takes a user's attempt as input and responds with whether it is the correct solution or not, along with the remaining count of tries.
Database
The information for Lecturillo is stored in a MongoDB database, which is hosted in a free MongoDB Cloud cluster. The database consists of two collections:
- challenges: it stores the books along with their hints
- gameplays: it stores users' gameplay data, indicating whether they succeeded or failed. As there is no authentication required to play, the gameplay data remains anonymous.
Deployment
The code for the application is stored in GitHub, and whenever commit is pushed to the main git branch, the application artifact is deployed on Netlify. The entire deployment process takes approximately 45 seconds. Domain name lecturillo.com is registered in Google Domains.
Game content
I personally select the books and assign a specific date to each one, manually storing them in the database. The hints are also manually generated using ChatGPT, without relying on the API, and I oversee the process. Typically, I have the books scheduled for the next 15 days in advance.
SEO and Social Media
To monitor the traffic and enhance the positioning, I utilize Google Analytics and Ahrefs. Also, I share Instagram stories on a daily basis, revealing the solution to the previous day's challenge.
Future steps
I have several ideas for the future and there are certain tasks that need to be addressed in the upcoming stages:
- Implement unit tests to increase confidence during the development of new features or when refactoring the code.
- Make the application open source, enabling collaborators to enhance the code and suggest additional features. So far, just a friend of mine and I have participated in the development.
- Automate the generation of game content using the ChatGPT API, eliminating the need for manual intervention on a constant basis.
- Enhance the UI/UX of the application by collaborating with a designer, as my expertise lies primarily in backend engineering.
- Develop an English version of the game.