English dictionary

Overview

This is an English dictionary that was 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.

Purpose

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.

Features

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 managing the projects in a monorepo. The global components are a library in the monorepo and its resources can be shared across different projects (such as the dictionary app and this portfolio).

Tech stack

These are some of the tools and technologies I used to build the application.

• Development Tools
  As stated in a previous section, the code base of this app lives in a mono repo, and I manage the mono repo using Nx.

  I also 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.

Learnings and thoughts

• 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.