BFF Todo App with React Router v7 (formerly Remix)

Example implementation of the Backend-for-Frontend (BFF) pattern with a Remix Todo app serving as the frontend complement to my ASP.NET Todo API backend.

screencast.mp4

Features

• Based on the latest stable React Router (^7.9.4)
• Simple cookie-based user authentication and session management.
• Authenticated routes with CRUD UI for todos, categories, users and proflle.
• Unauthenticated routes handling miscellaneous API endpoints.

Usage

• Start the backend Todo API.
• Set the API_BASE environment variable.

TZ=UTC;                         # Not required, but a good practice to ensure timezone consistency in node projects
API_BASE=http://0.0.0.0:8000/   # Backend API url

• pnpm/npm run dev starts a server listening on localhost port 3030. (port can be changed in package.json)

Notes

If you cannot run the backend dotnet Todo API or prefer to use your own Todo API, please have a look at the code in Todo API. It is based on SQLite and uses straightforward raw SQL queries, which can be easily ported to other languages or frameworks. Check out the schema in initdb.sql and the queries in the relevant C# files (api.cs, todo.cs, user.cs, category.cs) to get started.