This is the frontend code for a contacts management application, built using React.js, Redux, and TypeScript. It allows users to manage their contacts by adding, viewing, updating, and deleting contact details.
The frontend codebase is organized into several directories:
- src/components: Contains reusable React components used throughout the application.
- src/pages: Contains page-level components responsible for rendering different pages of the application, such as the "Add Contacts" page and the "All Contacts" page.
- src/redux: Contains the Redux store setup, including reducers, actions, and slices for managing application state.
- src/utils: Contains utility functions used across the application.
To set up and run the frontend code:
- Clone the repository to your local machine.
- Run
npm install
to install dependencies. - Run
npm start
to start the development server. - Access the application in your browser at
http://localhost:5173
.
The frontend code utilizes the following dependencies:
- React.js: JavaScript library for building user interfaces.
- Redux: State management library for managing application state.
- Redux Toolkit: Provides utilities for efficient Redux development, including simplified Redux setup.
- React Router: Routing library for navigation within the application.
- Styled Components: Library for styling React components using tagged template literals.
- Axios: HTTP client for making requests to the backend API.
- React Query: Library for data fetching and caching, used for API data fetching.
- Ant Design: styling and model and dashbord layout.
- framer-motion: styling animation.
The frontend code is developed using:
- Visual Studio Code: Code editor for writing and debugging code.
- ESLint: JavaScript linting tool for maintaining code quality and consistency.
- Prettier: Code formatter for ensuring consistent code style.
- TypeScript: Superset of JavaScript that adds static typing and improves code quality and readability.
This project is licensed under the MIT License. Feel free to use and modify the code according to your needs.