Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/souravpl8092/users-profile-app
A simple React application to manage user profiles. It allows users to view, edit, delete, and like profiles.
https://github.com/souravpl8092/users-profile-app
antd css react redux redux-thunk
Last synced: 10 days ago
JSON representation
A simple React application to manage user profiles. It allows users to view, edit, delete, and like profiles.
- Host: GitHub
- URL: https://github.com/souravpl8092/users-profile-app
- Owner: souravpl8092
- Created: 2024-11-22T06:00:34.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-11-22T06:37:50.000Z (about 1 month ago)
- Last Synced: 2024-11-22T07:26:44.800Z (about 1 month ago)
- Topics: antd, css, react, redux, redux-thunk
- Language: JavaScript
- Homepage: https://user-profile-apps.vercel.app/
- Size: 217 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
User Profile Management App
Overview
### A simple React application to manage user profiles. It allows users to view, edit, delete, and like profiles. The app also includes a loading indicator and uses Redux for state management.
Large Screen View - Computer/Laptop
Medium Screen View - Tablet
Small Screen View - Mobile
Edit User Profile Form
Features
- Display a list of user profiles with names, email, phone, and website information.
- Add interactive features
- Like/Unlike a user.
- Edit user details using a modal form with validation.
- Delete a user from the list.
- Loading spinner implemented while fetching data.
- Uses Redux for state management, ensuring a clean and scalable architecture.
- Responsive design with Ant Design (antd) components.
Technologies Used
- React: For the user interface.
- Redux: For state management
- Ant Design (antd): For UI components like the modal and icons.
- Spinkit: For the loading spinner animation.
- DiceBear API: To generate random user avatars.
- CSS Modules: For styling individual components.
Prerequisites
### Make sure you have the following installed:
- Node.js
- npm (Node Package Manager)
## Installation
### 1. Clone the repository and install the dependencies:
- git clone https://github.com/yourusername/user-profile-app.git
### 2. Navigate to the project directory
- cd user-profile-app
### 3. Install dependencies
- npm install
### 4. Start the development server
- npm start
### 5. Open the app in your browser at http://localhost:3000.
## Folder Structure
### The project follows the following folder structure:
```
├── public
│ └── index.html
│
└── src
├── components/
│ ├── UserCard.js // Component for rendering user details
│ ├── UserCard.css // Main component to display list of profiles
│ ├── EditModal.js // Edit user modal form
│ └── LoadingSpinner.js // Spinner component
|
├── redux/
│ ├── userSlice.js // User-related reducer logic
│ └── store.js // Redux store setup
|
├── pages/
│ └── UserProfiles.js // Main component to display list of profiles
|
├── App.css // CSS files for styling
├── App.js // Main app component
├── index.css // Index CSS files for styling
└── index.js // App entry point
```
- The public folder contains the HTML template file and other static assets.
- The src folder contains the application source code.
- The Components folder includes reusable components used in the application.
- The Pages folder contains the main page components.
- The App.js file is the entry point of the application.
- The index.js file is the root JavaScript file that renders the application.
## Redux Integration
The app uses Redux for state management:
- userReducer.js manages actions like:
- Fetching users.
- Editing user details.
- Deleting users.
- Toggling the "like" status of a user.
- Centralized state in store.js.
## Key Components
UserCard
- Displays individual user information with options to like, edit, or delete.
- Uses Ant Design icons (HeartOutlined, HeartFilled, EditOutlined, DeleteFilled).
EditModal
- A modal (from Ant Design) to edit user information.
- Includes form validation for fields: Name, Email, Phone, and Website.
LoadingSpinner
- Uses Spinkit to display a loading animation while fetching user data.
## How to Use
1. The app fetches a list of user profiles when loaded.
2. Each card displays:
- User details (name, email, phone, website, address, company).
- An avatar fetched from DiceBear API.
3. Use the following actions
- Like: Click the heart icon to toggle between liked and unliked.
- Edit: Click the pencil icon to open a modal and update user details.
- Delete: Click the trash icon to remove the user from the list.
## Dependencies
- React: ^18.x
- Redux: ^9.x
- Redux-Thunk: ^3.x
- Ant Design: ^5.x
- Spinkit: Used for loading indicators.
Thank You