https://github.com/meldsz/user-heirarchy

A React application displays User Heirarchy by fetching the user data from an API, constructs a heirarchical tree based on Manager-Subordinate relationships and diplays it with navigation support using React Router. Unit Tests are provided using Jest and React Testing library.
https://github.com/meldsz/user-heirarchy

javascript jest react react-router vite

Last synced: 3 months ago
JSON representation

A React application displays User Heirarchy by fetching the user data from an API, constructs a heirarchical tree based on Manager-Subordinate relationships and diplays it with navigation support using React Router. Unit Tests are provided using Jest and React Testing library.

• Host: GitHub
• URL: https://github.com/meldsz/user-heirarchy
• Owner: meldsz
• Created: 2025-07-06T14:00:05.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-07-06T22:20:04.000Z (12 months ago)
• Last Synced: 2025-07-06T23:27:37.783Z (12 months ago)
• Topics: javascript, jest, react, react-router, vite
• Language: JavaScript
• Homepage: https://6x5xl9-5173.csb.app/
• Size: 802 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# User Tree Heirarchy

A React application displays User Heirarchy by fetching the user data from an [API](https://gongfetest.firebaseio.com/.json), constructs a heirarchical tree based on Manager-Subordinate relationships and diplays it with navigation support using React Router. Unit Tests are provided using Jest and React Testing library.

# 💻 Developer Environment Setup Guide

## 📔 Pre-Requirements:

You need to have Node.js version 14.18+ installed on your computer

## ⚙️ Initial Setup

In order to setup the application locally, Clone this repository and follow the below steps

### Running Application Locally

Install project dependencies:

    $ npm install

Run the application locally on dev server

    $ npm run dev

By default, Vite dev server runs the application on [http://localhost:5173](http://localhost:5173).

### Production Build

To the build the application for production,

    $ npm run build

To Preview the production build locally,

    $ npm run preview

By default, Vite runs the preview application on [http://localhost:4173](http://localhost:4173).

### 🏃 Running Tests

run the below command to run unit tests for react application

    $ npm run test

### ✅ Features:

- Fetches user data from an API and builds heirarchical tree based on `managerId`

- User authentication

- Protected Routing to display User Tree Heirarchy to only logged in users

- User Tree is displayed in Heirarchy page after user is logged in

- User can logout by clicking logout link on Heirarchy page

- Login page displays "User Not Found" if user doesn't exist

- Not Found page is displayed when random routes are used

- Components are unit tested

# Touch

![alt text](image-6.png)

![alt text](image-5.png)

![alt text](image-4.png)

# Desktop

![alt text](image-7.png)

![alt text](image-2.png)

![alt text](image-3.png)