Skip to content

Latest commit

 

History

History
163 lines (126 loc) · 6.24 KB

README.md

File metadata and controls

163 lines (126 loc) · 6.24 KB
Tractian Challenge Banner

@Tractian Challenge

A performant enterprise dashboard application featuring asset trees, designed to efficiently manage and visualize large sets of data.

The app optimizes rendering, cache management, and memory usage to ensure smooth interaction and fast loading times, even with extensive asset hierarchies. 🧢

Table of Contents
  1. About The Project
  2. Getting Started

About The Project

TS-TST-REACT - Environment

Live demonstration: https://tr-tst-react.vercel.app

Demonstration video: https://youtu.be/4ic1Qhtfa4A

The project was developed using Next.js version 14, leveraging several key technologies such as TanStack Query, TanStack Virtual, and Zustand. These tools were essential for managing HTTP state, global state, and DOM virtualization, ensuring efficient memory allocation.

Although it's a SPA, the project is large, complex, and challenging. I aimed for a clean architecture, applying SOLID principles with service layers, a Network Service built with Axios, an API Service implemented as a singleton, and an Atomic Design approach with tokens.

The primary focus of the project was performance, particularly in rendering large lists, applying filters, and managing state, cache, and memory. DOM virtualization was crucial to ensure that, even with 50, 100, or 400 elements returned from the endpoint, only the visible items in the container were rendered. The video showcases an average of 25 items rendered at a time.

Virtualized/paginated DOM:

Areas to improve if more time was available:

  • HTTP Pagination with Infinity Query: Alongside DOM virtualization, this solution would be a highly scalable combo for handling large lists. If pagination from the endpoint wasn't possible, it could be implemented through Next.js' BFF.

  • Responsiveness: Since the focus was performance, I dedicated all my time to optimization, leaving less time to work on making the app fully responsive for mobile devices.

  • Using the developed multi-theme support: The structure for the Dark Theme is ready, but the project defaulted to the Light Theme. With more time, I would have adjusted the color palette and implemented a theme switcher.

  • Get greater test coverage: rendering, dom, and stress testing.

Built With

This project was developed using the following technologies:

  • Next
  • React
  • Axios
  • Tanstack Query
  • Tanstack Virtual
  • Testing-library
  • Vitest
  • Zod
  • Zustand

Getting Started

Prerequisites for installing and running the application locally.

Prerequisites

  • npm 
    npm install npm@latest -g

Installation

  1. Clone the repo

    git clone https://github.com/andrewgerez/tr-tst-react.git

  2. Install NPM packages

    npm install

  3. Set the environment variables

    Example in .env.example

  4. Run the app

    npm run dev

    or use docker :)

  5. Build the container using Docker Compose

    docker-compose build

  6. Start the container using Docker Compose

    docker compose up

Contact

Andrew Gerez - Linkedin - [email protected]

Project Link: https://github.com/andrewgerez/tr-tst-react