Activity Tracker Application: determining the UI architecture

This is the continuation of the activity tracker application I first introduced here.

We have several criteria to look at before we code and start setting up the user interface. My approach involves first determining the UI architecture. This is done by answering the question:

• What is the flow of information from what we see on the screen to the server side? Observe the server side is already set and functioning. To set it up, you can read more about it here.
• What actions does the user take to achieve a goal?

The purpose of those questions is to guide me toward capturing what’s essential for the application to function. The requirements must be satisfied for the application to satisfy our goal.

However, this approach only guarantees to know some things about the application. If I need clarification or have limited information about the application, I start by coding and gathering information to set up the architecture better.

Regarding the flow of information from UI to the server side, abstractly, this is generally answered on how the Internet functions. On the UI, a function sends a request, such as GET, a list of goals, and the server side responds with a list of goals.

In the Activity Tracker application context, I look at the question from the technology being used to achieve the goal of sending a request to the server side or the vehicle in which all user interaction is taking place.

User interactions are things such as the user clicking the create goal button, and the expected result is a form with information that the user has to input to complete the goal. Once they click a button to save a goal, a post request is made to the server side to save it in the database. The flow of information here is the mechanism that makes it happen.

Architectural decisions here are what mechanism/tool to use and how they are all orchestrated to enable us to answer the two questions I set up at the start.

I have chosen React as the tool to use to capture user interaction and how to orchestrate things on the UI to make the application user-friendly on the UI.

Prerequisite

• Use node 20.2.0
• Npm 9.6.6

Install React, Vite, and Typescript

To install React, run the following command on the terminal:

npm create vite@latest

Enter the following when prompted by the above command.

Now, cd into the folder and run the following command:

npm install

This will install all necessary files needed in a directory called node_module.

Run the following command:

npm run dev

This command tells Vite to start a local server and serve our UI application on localhost:5173; open the browser, and you should see this:

In my next article, I will demonstrate how you can list, create, update, and delete goals.

Thank you for reading!

Happy Coding!