Virtualized list

This is a built-from-scratch virtualized list, built by me for learning and experimentig purposes

Demo hosted on Vercel

User journey

The user lands on the page where he or she sees a virtual list. The user can scroll the list.

Infinite load

The list has the infinite load feature: when the user scrolls near the end of the list, it triggers a function that fetches more data and appends it to the list, giving the user the possibility to scroll almost inifitely. This feature makes possibile to render more than 100k entries incrementelly, instead of loading everything at once.

Technologies used

Here are the technologies being used

• Next.js as the core framework
• React as the rendering library
• React DOM: this is the React package that acts as a bridge between React itself and the DOM, so it makes possibile to render React components into a web page's DOM by using React's own virtual DOM and diffing algorithm
• Redux Tooklit as the main tool to store a global state object across the entire application
• Typescript as the safety layer above JavaScript, to ensure less errors during development
• Css modules as the main tool to develop modular style with unique component-centered classes
• Jest as the main unit test framework

Run locally

1. Run npm ito install all the dependencies
2. Once installted, you can run npm run dev to start the local server on http://localhost. The default port used will be 3000, otherwise another if it is already occupied by another process
3. Other useful commands:
   • create a production build (useful to check for any error before creating a commit): npm run build
   • run unit tests (written in Jest): npm run test