https://github.com/gauravooo2/full-stack_user-profile-management_project_frontend
https://github.com/gauravooo2/full-stack_user-profile-management_project_frontend
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/gauravooo2/full-stack_user-profile-management_project_frontend
- Owner: GauravOOO2
- Created: 2024-09-13T05:57:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-22T09:14:30.000Z (over 1 year ago)
- Last Synced: 2025-01-08T07:17:07.100Z (over 1 year ago)
- Language: TypeScript
- Size: 228 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Full-Stack User Profile Management Project Frontend
## Description
This project is the frontend component of a full-stack application, built using Next.js and React. It provides a user interface for managing users and their profiles, interacting with the backend API to perform CRUD operations.
### What This Project Does
1. **User Management Interface**:
- Displays a list of all users
- Allows creation of new user accounts
- Provides forms for updating user information
- Supports deletion of user accounts with confirmation
2. **Profile Management Interface**:
- Shows detailed user profiles
- Enables creation and editing of user profiles
- Allows viewing of profile information
3. **Responsive Design**:
- Utilizes Tailwind CSS for a responsive and modern UI
- Ensures a seamless experience across various device sizes
4. **State Management**:
- Uses Redux for efficient state management across the application
5. **Form Handling**:
- Implements React Hook Form for efficient form state management and validation
6. **API Integration**:
- Communicates with the backend API to perform all CRUD operations
This frontend application provides an intuitive and user-friendly interface for managing user data, making it suitable for various applications such as admin panels, user management systems, or as part of a larger application requiring user account functionality.
## Tech Stack
- **Framework**: [Next.js](https://nextjs.org/)
- **Language**: TypeScript
- **State Management**: Redux
- **Styling**: Tailwind CSS
- **Form Handling**: React Hook Form
- **API Calls**: Axios
## Features
- User listing, creation, editing, and deletion
- User profile management
- Responsive design
- State management with Redux
- Form validation and handling
- API integration with backend
## Prerequisites
Before you begin, ensure you have met the following requirements:
- Node.js (v14 or later)
- npm (v6 or later)
- Backend API running (see backend repository)
## Installation
1. Clone the repository:
```bash
git clone https://github.com/GauravOOO2/full-stack_two_endPoints_project_Frontend.git
```
2. Navigate to the project directory:
```bash
cd full-stack_two_endPoints_project_Frontend
```
3. Install dependencies:
```bash
npm install
```
4. Set up your environment variables:
- Create a `.env.local` file in the root directory
- Add necessary variables, such as the API URL
## Running the Application
To run the application in development mode:
```
npm run dev
```
To run the application in production mode:
```bash
npm run build
npm run start
```
## Available Scripts
In the project directory, you can run:
- `npm run dev`: Runs the app in development mode
- `npm run build`: Builds the app for production
- `npm start`: Runs the built app in production mode
- `npm run lint`: Runs the linter to check for code quality issues
## Contributing
Contributions to this project are welcome. Please follow these steps:
1. Fork the repository
2. Create a new branch: `git checkout -b feature-branch-name`
3. Make your changes and commit them: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin feature-branch-name`
5. Create a pull request
## Contact
If you have any questions or feedback, please contact:
Gaurav - varmagaurav840@gmail.com
Project Link: [https://github.com/GauravOOO2/full-stack_two_endPoints_project_Frontend](https://github.com/GauravOOO2/full-stack_two_endPoints_project_Frontend)
## Acknowledgments
- [Next.js Documentation](https://nextjs.org/docs)
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [Redux Toolkit](https://redux-toolkit.js.org/)
- [Tailwind CSS](https://tailwindcss.com/docs)
- [React Hook Form](https://react-hook-form.com/)