https://github.com/matan3sh/ox-security-assignment

https://github.com/matan3sh/ox-security-assignment

antdesign nuqs react-query reactjs styled-components typescript

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/matan3sh/ox-security-assignment
• Owner: matan3sh
• Created: 2024-11-18T21:58:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-19T09:05:35.000Z (over 1 year ago)
• Last Synced: 2025-03-18T01:46:18.204Z (over 1 year ago)
• Topics: antdesign, nuqs, react-query, reactjs, styled-components, typescript
• Language: TypeScript
• Homepage:
• Size: 79.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## OX Security Assignment

- [ ] **Description** - This is a full-stack application for managing employee statuses.

      The system allows users to view, filter, and update employee statuses via a simple and intuitive interface.

      The backend was pre-made and powered by an Express REST server, and the frontend is built using React.

## Technologies I used

- React JS with Typescript

- React Query

- Styled Components

- Ant Design

## App Screens

     - Employees list

     - Filter employees by status

     - Search employees by name

![Employees list](https://i.ibb.co/yh7M4sn/1.jpg)

![Filter employees by status](https://i.ibb.co/59pL1Cd/2.jpg)

## Create new user modal

![enter image description here](https://i.ibb.co/c6kRCnR/3.jpg)

## UX Improvements

- When the user attempts to enter the employee's name, a validation is performed on the input, allowing only characters from the English alphabet (A-Z) and no special characters. If the user tries to input special characters, a validation message will be displayed below the input field accordingly.

- When the user searches for an Employee in the Search Input, whatever they type will be updated in the URL, so that even after refreshing the page, the search state they performed will remain.

## Usage

- Open Terminal and run `git clone https://github.com/matan3sh/ox-security-assignment`

- Go to `cd ox-security-assignment`

- Open second tab

- In the second tab go to server folder then install dependencies with `npm i` and **run** `npm run dev` running on `http://localhost:8000`

- In the first tab go to client folder then install dependencies with `npm i` and **run** `npm run dev` running on `http://localhost:5173`

- Open Browser --> http://localhost:5173

_Thank you :)_