Requesrs Users

1. Getting Started
2. Description
3. Demo
4. Stack
5. Types
6. Atomic approach
7. Memoization
8. Next Config
9. Dynamic routes
10. 404
11. Alias
12. Testing
13. Accessibility
14. Responsiveness
15. Further implementation

Getting Started

First, install node modules:

npm install

Add .env file to the root of the project and declare REQUESRS_API_ENDPOINT_USERS (the endpoint provided in the task),

Then, run the development server:

npm run dev

Node.js 18.17.0 or later required.

Open http://localhost:3000 with your browser to see the result.

Description

App that displays users fetched from external API. Scroll down to reach the end of user list and use pagination for moving forward the pages and fetch new users.

The URL gets updated based on params passed and the users get fetched based on those params. Once you reach the end of the available pages, you cannot click to move forward and you can only go back to previous pages.

Click on an specific page number to jump to that page, or change the URL manually. If the page number entered manually does not have users, a warning message gets rendered in the page saying "There are not users".

The number of pages available in pagination are based on number of pages available coming from API.

Select a user to be redirected to a dynamic route based on user ID and see that specific user's details.

Click on page header logo and go back to page 1 of users list.

If the user changes manually the URL and the user does not exist, we redirect the user to a custom 404 page to notify that the user does not exist.

Demo

Stack

• Next.js
• Typescript
• Tailwind
• Jest
• React Testing Library

Types

All types and enums have been declared in a Types/types.ts

Atomic approach

Atomic approach has been used for structuring and ordering the componets devided by Atoms, Molecules and Organisms.

Memoization

Memoization has been implemented for better performance, faster rendering and avoid unnecesary re-renderings by using useMemo and useCallback React Hooks.

Next Config

Next.config.js file modified to set /users?page=1 as home page so when users land on localhost:3000 or localhost:3000/ they get automaticaly redirected.

  module.exports = {
    async redirects () {
      return [
        {
          source: '/',
          destination: '/users?page=1',
          permanent: true,
          basePath: false,
        }
      ]
    },
  }

Dynamic routes

Dynamic routes created for redirecting the user to a route based on the userId selected.

All routes organised inside (routes) dir so it doesn't affect the URL.

For example /users/1.

Structure:

  src/
    | app/
    | (routes)/
      | 404
      | users/
        | [id]

404

If the user enters manually an URL for fetching a user by ID but this user does not exist, we receive status 404 from fetchUserOne utility and we redirect the user to 404 route where we render a component with a 404 SVG icon and a message

Alias

Alias added for improting utilities, types and icons.

import Chevron from "@icon/Chevron";

import { User } from "@customTypes/types";

import { fetchUserOne } from "@util/fetchUserOne"

Testing

Jest and React Testing Library have been used for testing. Testing has been added for some components but, as further implementation, it would be necessary to add more unit and integration testing for other functionalities and components.

To run tests: npm run test

Accessibility

Native HTML tags with WAI-ARIA Roles have been used for accessibility which would allow screen readers to navigate through the page.

An 96 overall score achieved in Lighthouse tool

Responsiveness

The app is responsive and adjusts to desktop, tablet and mobile viewports, media queries have been added via Tailwind for adjusting the design to the screen size.

Mobile

Tablet

Desktop

Further implementation

1. Implement getServerSideProps for fetching the data in the server side instead of client side for better performance. This will require a page dir with all the routes which will add the word "pages" in the URL like localhost:3000/pages/users?page=1. In order to avoid that there will need to be some further implementation to hide it in order to have the following URL localhost:3000/users?page=1.
2. Add edit user, create new user, delete user functionality.
3. Add elastic search for filtering users by name, surname, email...
4. Add go to last page, go to first page in pagination.