https://github.com/ibrsec/contacts-react
Frontend of the contacts app
https://github.com/ibrsec/contacts-react
react redux
Last synced: 2 months ago
JSON representation
Frontend of the contacts app
- Host: GitHub
- URL: https://github.com/ibrsec/contacts-react
- Owner: ibrsec
- Created: 2024-07-08T21:07:07.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-09T13:15:46.000Z (almost 2 years ago)
- Last Synced: 2025-02-26T07:44:18.271Z (over 1 year ago)
- Topics: react, redux
- Language: JavaScript
- Homepage: https://contacts-react-express.vercel.app/
- Size: 304 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Frontend of Contacts App
An awesome Frontend of Contacts App
View Demo
·
Backend repo
·
Report Bug
·
Request Feature
📎 Table of Contents 📎
---
[](https://contacts-react.vercel.app/)
---
📦 Frontend of the my Contacts App project | [Contacts Backend](https://github.com/ibrsec/backend-stockapi)
🎯 React Development: Built a responsive frontend with React.js, offering a seamless user experience for managing contacts and users.
🛠 State Management: Employed Redux Toolkit and Redux Persist to maintain consistent state across sessions, ensuring reliable data handling.
🚀 React Router: Integrated React Router for smooth navigation between different sections such as contacts list, user management, and profile settings.
🔔 User Notifications: Used React Toastify to provide real-time feedback for actions like adding, editing, or deleting contacts.
💾 CRUD Operations: Developed full CRUD functionality for managing user and contact data efficiently.
🎨 Styling: Applied plain CSS to create a clean and user-friendly interface, maintaining simplicity and performance.
```sh
# clone the project
git clone https://github.com/ibrsec/contacts-react.git
# enter the project directory
cd contacts-react
# install dependency
npm install || yarn install
# develop
npm run dev || yarn start
```
```diff
contacts-react (folder)
|
|---public (folder)
|
+ |---src (folder)
| |
| |---pages (folder)
| |
| |---components (folder)
| |
| |---app (folder)
| | └---store.jsx
| |
| |---features (folder)(Slices)
| |
| |---router (folder)
| | |---PrivateRoute.jsx
| | └---AppRouter.jsx
| |
| |---services (folder)
| | |---useContactsApis.jsx
| | └---useLoginApis.jsx
| |
| |
| |---helper (folder)
| | └---ToastNotify.js
| |
| |---App.js
| |---Index.js
| └---Index.css
|
|----package.json
|----.env
└----readme.md
```
---
