Learn React: the same TODO list app, upgraded step by step

Recently, I wanted to understand deeply how to create React apps today, which technologies to chose between Redux, RTK Query, React Query, Zustand, NextJS.

I also wanted to understand perfectly the old and new Hooks available in React. And how to connect a store-based app to an external API.

So I decided to create this project of a TODO list application, first static, then connected to an API, then connected to an API with authentication. Feel free to create other versions of the app, it will be very useful.

The rest of this article is simply extracted from the github project README.

Todo List experiments

This is a set of different versions of the very same todo list application in React to experiment with different React architectures and technologies.

Why

There are many ways to create React applications nowadays, and it is useful to have a look at different versions of the same app using different hooks, frameworks, libs, etc.

These version are either :

• static (client only)
• API (connected to an API)
• API + auth (connected to an API and with authentication)

(API) versions are using the API located in task_apifolter.
(API + auth) verssions are using the API located in task_api_with_authfolter.

Versions

done :

1. with useState
2. with useReducer
3. with useReducer and Context
4. with old school redux (connect state to props and dispatch to props)
5. with redux hooks (useDispatch and useSelector)
6. with redux and more hooks (useMemo, useEffect, useCallback)
7. with modern redux (slices)
8. with zustand
9. (API) with modern redux and async thunks
10. (API) with rtk-query
11. (API) with react-query
12. (API + auth) with react-query and zustand

doing:

1. (API + auth) with nextjs (and server actions)

todo:

• with tanstack router
• with old school redux + thunk (manual thunks)
• with Remix

About the API

task_apiand task_api_with_auth are developped in Ruby on Rails in 5 minutes for the first one and add 10 minutes for the second one.

They provide a simple CRUD interface for tasks :

GET /tasks
POST /tasks
PATCH /tasks/:id
DELETE /tasks/:id

The version with autentication provide a kind of oauth authentication with an access token and a refresh token. The routes are :

POST /auth_tokens           # login with email and password
POST /auth_tokens/refresh   # refresh the access token
DELETE /auth_tokens         # logout

The strategy for the client app is to have an apiClient with 2 interceptors to manage the access token and refresh token.

• adds a Bearer token to the Authorization header

• if the request is rejected and we have a refresh token, we try to refresh the access token and retry the request