TodayTM is a minimal and simple task management application designed to help you efficiently manage all your daily tasks. The motivation behind this project is to demonstrate how to build and deploy a minimal and simple full-stack cloud-native application using modern and trending technologies such as React, Golang, and Kubernetes/OpenShift.
- Clone the repository
- Run
docker compose up
to start the three services namely db, backend and frontend. The Docker Compose is use to orchestrate the Frontend, Go Backend API and MySQL services. - The backend API is avaialable at "http://localost:4000" and frontend is at "http://localhost:3000"
- Stop and remove the docker containers for the services if you ran
docker compose up
earlier - Change to the project directory "/taskmanager/backend" and run
docker compose up
to start the MySQL server
cd /taskmanager/backend
docker compose up
- Open another terminal, and change to the backend directory "/taskmanager/backend"
- Run
go get
to fetch and install backend dependencies - Run
go run .
to start the Go backend API server on locahost port 4000 - Open another terminal, and change to "/taskmanager/frontend"
- Run
yarn && yarn dev
to launch the React frontend application on locahost port 3000.
The list tasks page is the main dashboard of the TodayTM application, where users can view and manage their tasks for the day. Users can also sort the task list in ascending or descending order, and the ratio of completed to uncompleted tasks is displayed on the right side. Users can toggle a task list item to display the details view, where they can see detailed information about a specific task, including its title, description, due date, and status, allowing them to prioritize their tasks effectively.
The add task page contains a form where users can input details for a new task, including the title, description, due date, and priority. The add form is disabled until the user enters at least a task title, and the default time is used if the time is not selected.
Since the motivation behind this project is for demonstration, we will deploy the application onto the OpenShift sandbox, which offers a free tier version for experimentation. See the following link on how to get free tier access to the OpenShift sandbox cluster. After you have log into OpenShift sandbox cluster, then follow the instructions below to deploy the application to the cluster:
- Build the backend and frontend applications using the
Dockerfile.prod
in each folder, and push to a registry of your choice. - Update the images in the backend and frontend manifests to match the names of your Docker images.
- Update the
<namespace>
in the k8-manifests files to match your project namespace. - Log in to the OpenShift cluster. Get a token from the "Copy login command" in the profile menu on the Masthead toolbar. Copy the login command and execute it in a CLI terminal. Then apply the k8-manifests files that contain all the resources used for the deployment of the application. Alternatively, you can use the Import YAML (+) editor feature also located on the Masthead to upload the k8-manifests files.
- Create the database in the MySQL pod. You can use the Terminal tab on the pod details page to access the MySQL pod. Enter the MySQL username and password. See the syntax below:
- Create the database in the MySQL pod container.
- Exec into the MySQL pod container and run the following command:
mysql -u root -p
- Enter the password value encoded in the mysql-secret resource: password
CREATE DATABASE taskmanager;
- Finally, copy the backend exposed route. You can find it on the Route details page under the location field, and update the frontend deployment
env
variableREACT_APP_BACKEND_URL
value to whatever your backend URL is. Then, wait for the update to take place or delete the frontend pod so that it is recreated with the updatedenv
variable. Visit the frontend URL. You should see the running application.