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: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/soun1005/op-p14_hrnet
• Owner: soun1005
• Created: 2023-06-01T13:39:30.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-30T16:28:32.000Z (over 1 year ago)
• Last Synced: 2025-01-27T06:32:10.415Z (5 months ago)
• Topics: npm-package, reactjs, reduxpersist, reduxtoolkit, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://hrnetsoeunlee.netlify.app
• Size: 2.64 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

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

```