ContactBook | My Contacts

Included Technologies

This project utilizes a diverse array of technologies, including:

• Styled Components
• TypeScript
• React Query
• React Hook Form
• Rodal
• Yup
• Jest
• React Testing Library
• Storybook
• Eslint
• Prettier
• Husky
• Axios
• MSW
• Docker

Getting Started (Development)

Follow the instructions below to set up the project for development:

1. Install Global Dependencies

   Start by installing the global dependencies with the following command:

   npm install -g json-server

2. Install Project Dependencies

   Next, install the project dependencies using:

   yarn install

3. Run JSON Server

   In a separate terminal, run the JSON Server using the command:

   json-server --watch mock/db.json

4. Create a Service Worker

   Before starting the Storybook, you'll need to create a Service Worker so that MSW can intercept requests. Do this with:

   npx msw init public

5. Run the Development Server

   Finally, start the development server using:

   yarn dev

   You can now open http://localhost:5173/ with your browser to see the result.

Docker Deployment

If you prefer to use Docker, ensure that you have the appropriate environment setup. You can then use the following command:

docker-compose up -d

After running the command, open http://localhost:5173/ with your browser to see the result.

Use a REST client like Insomnia to inspect the endpoint at:

http://localhost:5000/contactBook

Available Commands

• dev: Runs your application on localhost:5173.
• build: Creates the production build version.
• storybook: Runs the Storybook stories.
• build-storybook: Creates the Storybook build.
• test: Runs Jest to test all components.
• test:watch: Runs Jest in watch mode to test all components.

Important Note

The local backend server (JSON SERVER API) is only intended to provide data to the frontend during development. Do not use it in a production environment.