This is a built-from-scratch virtualized list, built by me for learning and experimentig purposes
The user lands on the page where he or she sees a virtual list. The user can scroll the list.
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.
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 betweenReact
itself and theDOM
, so it makes possibile to renderReact
components into a web page's DOM by usingReact
's ownvirtual 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
npm i
to install all the dependencies - Once installted, you can run
npm run dev
to start the local server onhttp://localhost
. The default port used will be 3000, otherwise another if it is already occupied by another process - 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
- create a production build (useful to check for any error before creating a commit):