Users list

This project creates a users list consuming the Random user API. The project requests thousands of users to handle this data performative way.

Project Architecture

src/
├── components
│   ├── CardUser
│   │   ├── CardUser.tsx
│   │   ├── __tests__
│   │   │   ├── CardUser.test.tsx
│   │   │   └── mock.ts
│   │   ├── components
│   │   │   ├── CardDescription.tsx
│   │   │   ├── CardDetail.tsx
│   │   │   ├── CardImage.tsx
│   │   │   ├── CardUserContainer.tsx
│   │   │   ├── CardUserContext.tsx
│   │   │   ├── __tests__
│   │   │   │   ├── CardDescription.test.tsx
│   │   │   │   ├── CardDetail.test.tsx
│   │   │   │   ├── CardImage.test.tsx
│   │   │   │   ├── CardUserContainer.test.tsx
│   │   │   │   └── CardUserContext.test.tsx
│   │   │   └── index.ts
│   │   ├── index.ts
│   │   └── type.d.ts
│   ├── GlobalCss
│   │   ├── GlobalCss.tsx
│   │   ├── animations.ts
│   │   ├── cardAnimation.ts
│   │   ├── cssVariables.ts
│   │   ├── index.ts
│   │   └── resetCss.ts
│   ├── GlobalErrorMessage
│   │   ├── GlobalErrorMessage.tsx
│   │   └── index.ts
│   ├── GlobalLoader
│   │   ├── GlobalLoader.tsx
│   │   └── index.ts
│   ├── Header
│   │   ├── Header.tsx
│   │   └── index.ts
│   ├── InfinityScroll
│   │   ├── InfinityScrollContext.ts
│   │   ├── InfinityScrollControl.tsx
│   │   ├── InfinityScrollProvider.tsx
│   │   ├── index.ts
│   │   ├── reduceInfinity.ts
│   │   ├── type.d.ts
│   │   └── useInfinityScroll.tsx
│   ├── Loader
│   │   ├── Loader.tsx
│   │   ├── __tests__
│   │   │   └── Loader.test.tsx
│   │   └── index.ts
│   ├── TabPanel
│   │   ├── TabPanel.tsx
│   │   └── index.ts
│   ├── TabProvider
│   │   ├── TabProvider.tsx
│   │   └── index.ts
│   ├── UserProvider
│   │   ├── UserProvider.tsx
│   │   └── index.ts
│   └── index.ts
├── constants
│   └── index.ts
├── helpers
│   └── index.ts
├── hooks
│   ├── index.ts
│   └── useFetchApi.ts
├── index.tsx
├── input.css
├── pages
│   ├── FullProfile
│   │   ├── FullProfile.tsx
│   │   └── index.ts
│   ├── Main.tsx
│   └── UserList
│       ├── UsersList.tsx
│       └── index.ts
├── type.d.ts
└── vite-env.d.ts

The project is spited by:

• pages: responsible for having each page the project contains.
• components: responsible for containing the sharable components. In the case, that the component has more complexity the component folder could contain an internal component folder, a hook, type etc.
• constants: has the sharable values which are used inside the application
• hooks: has the sharable hooks which all pages or components can take advantage

---

Project developed with:

• Typescript
• HTML
• CSS in JS - Emotion

Test developed with:

• Vitest

To run the project you need to install:

• Node
• Yarn

And clone the repository

$ git clone [email protected]:nathpaiva/users-list.git

Before starting the project you must install the dependencies:

$ yarn

To start the project you must run the command:

$ yarn start

• This command to access http://localhost:3000

If you want to run the tests

$ yarn test

To build the project, by running the command

$ yarn build