Employee Manage System 🚀
This project is a React Profile Management System that allows users to create, manage, and update their account information. It is built with React (v16+) and leverages modern hooks like useState and useEffect for state management. The system provides a seamless user experience, offering features such as registration, login, and profile management, where users can view and edit their personal information. The application's focus is on clean UI, responsive design, and secure data handling.
Features ✨
- User Registration: Allows new users to sign up by providing essential details.
- User Login: Secure login system using JWT or session-based authentication.
- Profile Management: 1. View Profile: Users can view their profile details such as name, email, and other personal information. 2. Edit Profile: Allows users to update their personal information like contact details, experience, and education. 3. Experience & Education: Users can add, edit, or delete their professional experience and educational background. 4. Skills & Certification: User can add, edit, or delete their skills and certification they achieved. 5. Peronsla Details: User can manage their personal details such as name, email, mobile, image, etc.
- Responsive Design: Fully responsive and optimized for mobile and desktop platforms.
- Pagination: Efficiently manage large data entries such as experience or education records, using pagination for better performance and usability.
- Material UI Integration: Clean and consistent UI elements with Material-UI for a modern look and feel.
- Custom Hooks: Reusable custom hooks for managing profile data and handling form inputs.
- Modular Architecture: Organized and modular code structure for easy scalability and maintainability.
Installation 🛠️ To run this project locally, follow these steps:
1. Clone the repository git clone https://github.com/KhyatiChawda26/final.git cd react-profile-management-system
2. Install dependencies npm install
3. Create .env file and setup the firebase configuration as below You need to go to firebase official site and get the below things from the project settings - VITE_API_KEY= Your API Key - VITE_AUTH_DOMAIN= Your Authentication Domain - VITE_PROJECT_ID= Your Project ID - VITE_STORAGE_BUCKET= Create a new storage in the project and paste the link/id here - VITE_MESSAGING_SENDER_ID= Your Unique ID - VITE_APP_ID= Your Unique App ID - VITE_MEASUREMENT_ID= Your Mesaurement ID
3. Run the project npm start
4. Create an Account Navigate to the registration page and create a new account by entering your personal details.
5. Login Use your registered email and password to log in and access the profile management features.
7. Manage Your Profile - View and update your account information. - Add or edit your professional experience and educational background. - Easily navigate through your experience records with pagination.
Technologies Used 🧑💻
- Frontend: React, Material UI
- Database: Firebase
- Version Control: Git, GitHub
Project Structure 📂 /src /components /pages /assets /services
Contributing 🤝 We welcome contributions! Here's how you can help:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Make your changes and commit (
git commit -m 'Add a new feature'). - Push the branch (
git push origin feature-branch). - Create a Pull Request.
Contact ✉️ Feel free to reach out for any questions or contributions: