https://github.com/mdrianislam0or1/contacts-management-frontend

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.
https://github.com/mdrianislam0or1/contacts-management-frontend

ant-design react reactjs redux reduxtoolkit styled-components styledcomponents typescript

Last synced: 6 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/mdrianislam0or1/contacts-management-frontend
• Owner: mdrianislam0or1
• Created: 2024-04-23T17:11:05.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-25T04:59:05.000Z (7 months ago)
• Last Synced: 2024-10-18T18:38:22.720Z (about 1 month ago)
• Topics: ant-design, react, reactjs, redux, reduxtoolkit, styled-components, styledcomponents, typescript
• Language: TypeScript
• Homepage: https://contacts-management-sys.web.app/
• Size: 688 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Contacts Management Application - Frontend

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.

![ss2](https://github.com/mdrianislam0or1/contacts-management-frontend/assets/67714964/5f14df7e-8e60-4ba3-93ae-eaee511bad6f)

## Project Structure

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.

## Setup

To set up and run the frontend code:

1. Clone the repository to your local machine.

2. Run `npm install` to install dependencies.

3. Run `npm start` to start the development server.

4. Access the application in your browser at `http://localhost:5173`.

## Dependencies

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.

## Development Environment

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.

## Contributors

- [Rian Islam](https://github.com/mdrianislam0or1)

## License

This project is licensed under the [MIT License](LICENSE). Feel free to use and modify the code according to your needs.