Todo List Manager
This project showcases an hexagonal architecture approach for front-end projects.
This is a Remix application, you may want to check out the Remix documentation.
Modern tooling blurs the front-end line. Front-end does not mean Client-side anymore. Frameworks like
Next.js or Remix.run enable libraries like React to run in a browser-less environment
at request-time (and at build-time if you’re using Next.js‘s
This enables new architectural patterns for front-end developers, which can now move some logic to
the server. This can improve security and make some things easier, for instance :
- authentication using cookies ;
- secrets can be safely stored and used on the server ;
- data fetching can be made directly from the database (the API layer is often abstracted.
Seeing the blurred line between client-side and server-side, there is now an
opportunity to use an “unified hexagon“, leaving generic concerns (like data fetching) to your framework of choice.
This project is based on the following principles :
- most of the work should be done on the server ;
- specifically, any data preparation should happen on the server ;
- the client responsibility is primarily using traditional Web features like forms and navigation ;
The project is organized as such :
app/application: where React components and Remix stuff lives ;
app/domain: where domain modeling happens for writing operations (domain interfaces, behaviors and ports) ;
app/query: where queries are modeled for reading operation (preparing data for our pages) ;
app/infrastructure: where the ports / queries implementation live (repositories / database queries) ;
The following limitations have been identified :
- Since the data structure are sent over the network (client <> server communications), they must be simple
objects used as JSON. For instance, complex objects like
Datecannot be used as a
response for reads or writes.
From your terminal:
This starts your app in development mode, rebuilding assets on file changes.
First, build your app for production:
Then run the app in production mode:
Now you’ll need to pick a host to deploy it to.