More Premium Hugo Themes Premium Tailwind Themes

Remix Hexagonal Architecture

Using Remix SSR as an opportunity to explore hexagonal architecture for Web Apps

Remix Hexagonal Architecture

Using Remix SSR as an opportunity to explore hexagonal architecture for Web Apps

Github Stars Github Stars: 130
Last Commit Last Commit: Jun 13, 2022 -
First Commit Created: Jan 15, 2024 -
Remix Hexagonal Architecture screenshot

Overview

The Todo List Manager project showcases a hexagonal architecture approach for front-end projects. It is built using Remix and Nest applications and leverages modern tooling to blur the line between front-end and client-side development. The project follows certain principles, such as performing most of the work on the server and using traditional web features on the client-side.

Features

  • Hexagonal architecture approach for front-end projects
  • Integration of Remix and Nest applications
  • Blurring of the line between front-end and client-side development
  • Leveraging server-side logic for improved security and ease of use
  • Use of traditional web features on the client-side
  • Separation of concerns between data preparation on the server and client-side responsibility
  • Organized project structure for React components and Remix implementation
  • Implementation of domain modeling, persistence, and querying layers
  • Use of simple JSON objects for client-server communication

Installation

To run the Todo List Manager project on your local machine, follow these steps:

  1. Clone the repository to your local machine.
  2. Open your terminal and navigate to the project’s root directory.
  3. Install the necessary dependencies by running the following command:
    npm install
    
  4. Start the app in development mode by running the command:
    npm run dev
    
  5. Open your web browser and access the app at http://localhost:3000.
  6. To run automated tests, use the following command in your terminal:
    npm run test
    
  7. To run end-to-end tests using Cypress, use the following command:
    npm run e2e
    

Summary

The Todo List Manager project demonstrates the use of a hexagonal architecture approach in front-end development. By integrating Remix and Nest applications and taking advantage of modern tooling, the project blurs the line between front-end and client-side development. It follows certain principles that prioritize server-side logic and use traditional web features on the client-side. The project also provides a structured organization for components, domain modeling, persistence, and querying. However, it has limitations in terms of using simple JSON objects for client-server communication and restrictions on using complex objects like Date in responses.