For years, I have used myTinyTodo to manage my to-do lists. It is super light, fast and easy to use. At some point, I struggled to update it to use my up-to-date version of PHP. Last year, I wanted to explore other languages than Python. I decided to start a small project to replace myTinyTodo. As I wanted to explore Go and React, I created two projects to build my to-do list system.
The project fulfills my needs for now. The IU is not perfect, and it lacks a lot of functionalities of MyTinyTodo but I don't really need them for now.
Development
I named the project AgayonTodo. The repositories can be found here:
The Javascript frontend relies on React and calls the API to display the data. I used the create-react-app tool to build the whole thing and followed the main tutorial. Even if I had to download the whole internet of dependencies, it is pretty efficient. I used the Bulma CSS Framework because I wanted to try something else than Bootstrap. It can be used without Javascript, which could be helpful in some of my other projects.
The Go backend service relies on gorm, an ORM in Go. The service only provides a small CRUD API and some small tools because I don't need much at the moment. I did not want to do all the SQL requests by myself, especially if I want to add access control in the future. I thought it would be better to learn how to use that popular library.
Production
The frontend is built and copied in a nginx virtual host and the backend static executable is run with a systemd unit. The system is basically launched like that. Running the frontend and the backend in the same virtual host prevents dealing with CORS issues.
server {
listen *:443 ssl;
listen [::]:443 ssl http2;
server_name example.org;
ssl_certificate /etc/letsencrypt/example.pem;
ssl_certificate_key /etc/letsencrypt/example.key;
location = /robots.txt {
add_header Content-Type text/plain;
return 200 "User-agent: *\nDisallow: /\n";
}
error_log /var/log/nginx/error.log;
include /etc/nginx/global.d/letsencrypt.conf;
root /srv/http/example.org;
location / {
auth_basic "Authorized users only";
auth_basic_user_file /etc/nginx/security.txt;
}
location /api {
auth_basic "Authorized users only";
auth_basic_user_file /etc/nginx/security.txt;
proxy_pass http://localhost:8080/api;
}
}
Captures
