Loading project content...
|Developed in 2023
English dictionary
A reference of the pronunciation, definitions and synonyms of English words
View live projectA reference of the pronunciation, definitions and synonyms of English words
View live projectLoading project content...
This is an English dictionary leveraged with the Free Dictionary API.
This app is a simple Next JS application that allows users to search for the definition of a word. It provides the user with the pronunciation of the word, synonyms, antonyms, and definitions with example sentences of each part of the speech (such as noun or verb).
In the application (button on top of the page), you will have the option to select the a "server" and a "client" version of the application. The server version will render the page on the server and hydrate it on the client, while the client version will render the page entirely on the client.
Back in 2022 Next JS released version 13, it introduced the app router and server components. It set a different mindset for building reactive applications and I decided to build this app to learn more about the new features and how to use them in a real-world application.
These are some of the most relevant features of this application:
Dark theme mode
The dark theme mode feature has become popular in the last few years. Before this application I have never implemented a dark theme mode in any other application and this was great chance to do it.
Sharable URLs
The application makes use of URL parameters to manage the state of the application. This is allows users to share the definition of a word with others using by simply sharing the URL.
Server and client rendering
Rendering the page on the server or on the client has its own pros and cons, and it is not a one-size-fits-all solution.
However, given the nature of this application, the server version is the most performant.
Global design system
As you can notice, the user interface and look and feel of the dictionary application is consistent with this website (my portfolio). This is because I developed a global design system that could be shared across different projects. This is a great way to maintain consistency and save time.
I was able to achieve this by developing a components library that can be used by any react application (such as the dictionary app and this portfolio).
These are some of the tools and technologies I used to build the application.
Development Tools
I used Husky and GitHub actions in the deployment pipelines, Jest for unit testing and ESLint and Prettier for code consistency.
Project Management
I used Notion to plan and organize ideas for developing this product.
Backend
Something amazing about using Next JS is that you can use it as a full stack framework. So in this application I used Next JS to manage all backend related tasks.
Frontend
The frontend end is served and hydrated by Next JS. Naturally, the interactivity is leveraged by React JS. And styles are set using TailwindCSS.
This project was a great opportunity to get my hands and dirty learn more about the new features of Next JS and how to use them in a real-world application.
I used to work a lot with PHP, WordPress and React JS, and I had to develop "static" components using PHP and "reactive" components using React JS. This was a bit of a hassle because it was like managing two different code bases. Being able to write components using solely React and render them on the server or the client, depending on the need, is a game changer.
Even Next JS has had some critics about being the new PHP, but I think it is a great tool to build reactive applications.
I also saw the benefits of having a global design system. It is a great way to maintain consistency and save time.