Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/soun1005/op-p14_hrnet

Code for project 14 of the Openclassrooms Front-End Developer path
https://github.com/soun1005/op-p14_hrnet

npm-package reactjs reduxpersist reduxtoolkit tailwindcss typescript

Last synced: 26 days ago
JSON representation

Code for project 14 of the Openclassrooms Front-End Developer path

Awesome Lists containing this project

README

        

# Wealth Health - HR net

![mockup combined readytouse](https://github.com/soun1005/op-p14_HRNet/assets/79379473/d71c4eb9-3725-4d82-9306-3591cb5c2519)
πŸ€ΈπŸΌβ€β™‚οΈ [Visit live demo](https://hrnetsoeunlee.netlify.app/) πŸ„πŸΌβ€β™€οΈ

## Project overview πŸ‘‡πŸΌ

![JavaScript](https://img.shields.io/badge/Language-TS-D64045)
![REACT](https://img.shields.io/badge/Framework-React-00AFB5)
![CSS Module](https://img.shields.io/badge/Style-TailwindCSS-F78764)
![Redux](https://img.shields.io/badge/Redux-Toolkit&Persist-357DED)

#### This project has undergone a complete transformation from a jQuery-based project to a fully-fledged React project, utilizing Typescript, Redux toolkit & redux persist and a total of four npm packages.

## NPM Libraries 🧳

![datepicker](https://img.shields.io/badge/Datepicker-ReactDatepicker-083D77)
![tankstack](https://img.shields.io/badge/Table-TanstackTable-DC7F9B)
![dropdown](https://img.shields.io/badge/Dropdown-Reactselect-00AFB5)
![modal](https://img.shields.io/badge/Modal-@soeunlee/reactjsmodal-D64045)

##### These are the NPM libraries used in the project for specific functionalities.

##### Each library provides a different feature. Feel free to explore the documentation and resources of each library to gain more insight into their usage.

- Datepicker -> [React-datepicker](https://reactdatepicker.com/)
- Dropdown -> [React-select](https://react-select.com/home)
- Table -> [Tanstack React-table V8](https://tanstack.com/table/v8)
- Modal -> [@soeunlee/reactjs-modal](https://www.npmjs.com/package/@soeunlee/reactjs-modal)

## Features

- Controlled forms are implemented, ensuring precise control and validation of each inputs.
- Data is persisted using Redux Persist, ensuring the preservation of state across page reloads or session durations.
- The table component includes advanced search and sorting functionalities, allowing users to easily find and organize data according to their needs.
- Fully responsive design.

## Deployment

### 1. Requirements

- [NodeJS (**version 12.18**)](https://nodejs.org/en/)

### 2. Installation

Clone the project

```bash
git clone https://github.com/soun1005/op-p14_HRNet
```

Go to the project directory

```bash
cd op-p14_HRNet
```

Install dependencies

```bash
npm install
```

Start the server

```bash
npm start
```