User Management

Overview   |    Features   |    Technologies   |    Getting Started   |    Commands   |    Screenshots

Overview

This is a web application for user management. This application provides the ability to view users in a table with the functions of searching, sorting, resizing columns and pagination. The application also implements emulation of CRUD operations to work with users.

The main goal of the project is the study and practical application of architectural methodology Feature-Sliced Design (FSD). An additional goal is to study and put into practice new technologies.

Features

• Table component with column resizing and custom cell contents
• Search, sort and paginate users
• Feature-Sliced Design (FSD) architectural methodology
• Emulation of CRUD operations with users using Mock Service Worker (MSW) and @mswjs/data
• React-Query and Axios for fetching data
• Zod to validate API, forms and .env file
• Unit and snapshot testing with Vitest
• Storybook with project components
• Husky for Pre-Commit Hooks
• Workflow to ensure project quality using GitHub Actions

Technologies

Frontend

• Vite
• TypeScript
• React
• React-Query
• React-Hook-Form
• Axios
• Zod

Testing

• Vitest
• Storybook
• Mock Service Worker

Code Quality

• ESLint
• Prettier
• Husky
• Lint-Staged

Getting Started

Requirements

• Node.js
• npm

Installation

1. Clone the repository and go to the project folder:

   # Clone this repository
   git clone https://github.com/Romychan/react-user-table.git
   # Go into the repository
   cd react-user-table

2. Create a .env.local file and include the following variables:

   VITE_API_URL=<YOUR_API_URL>

3. Install project dependencies:

   npm install

4. Run the project in development mode:

   npm run dev

   The application will be available at http://localhost:3000

Commands

The project contains the following commands to run scripts:

Command	Description
npm run dev	Runs application in development mode. The application will be available at http://localhost:3000
npm run build	Builds a project for production. The built project will be located in the dist folder
npm run preview	Runs the local server to preview the production build from the dist folder. The application will be available at http://localhost:4173
npm run test:unit	Runs unit and snapshot tests
npm run lint:eslint	Runs ESLint to check and display code problems
npm run lint:eslint:fix	Runs ESLint to fix found problems with the code
npm run lint:prettier	Runs Prettier to fix code formatting problems
npm run lint:types	Runs the type-checking for the project
npm run lint	Runs all code quality checks sequentially
npm run storybook	Runs the storybook in development mode. The storybook will be available at http://localhost:6006
npm run storybook:build	Builds a Storybook. The built Storybook will be located in the storybook-static folder
npm run prepare	Runs Husky initialization for pre-commit hooks to work

Screenshots

Main page

Add a new user

Edit a user