This is a learning project to practice React while building a simple HR management app. Each week, you’ll follow steps to add new features and learn new React concepts. By the end, you’ll have a complete app that looks and works like a small HR tool.
- Employee Directory: View and manage employees dynamically.
- Role Management: Promote or demote employees with visual feedback.
- Login Functionality: Uses client-side conditional rendering (no real authentication) to control access to the employee list.
- Form Handling: Add and edit employee details dynamically.
- Routing: Seamlessly navigate between application pages.
- API Integration: Fetch, update, and manage employee data using a mock backend.
- Optimization: Modular styling, reusable hooks, and clean architecture.
- Main Branch: Contains the final version of the project with all features implemented.
- Week Branches: Each week’s branch (e.g., week-1, week-2, etc.) contains the solution for the tasks of that specific week. You can use these branches to follow along or compare your progress.
- Set up a React project using Vite.
- Build two components:
EmployeeCardandEmployeeList. - Pass employee details as props and use them in the cards.
- Add a button to promote/demote employees and update their role using state.
- Write a simple README and push your code to GitHub.
- Create an array of employees with details like name, role, and start date.
- Show this employee list in your app.
- Add a "Log In" button to toggle between seeing the employee list or a login message.
- Display years worked and show reminders for anniversaries or probation reviews.
- Update the app to handle special cases like new hires and long-term employees.
- Use props destructuring to make your code cleaner.
- Create a
Buttoncomponent and use it everywhere you need buttons. - Add an "Edit" button to allow changes to roles, departments, and locations.
- Update styling dynamically based on the department.
- Clean up your code and test all features before pushing to GitHub.
- Install React Router and create pages for the app: Login, List, and Form.
- Set up routes so users can navigate between these pages.
- Build a form to add new employees and manage its input with state.
- Add a login page with basic username/password functionality.
- Use
json-serverto create a mock backend and store employee data indb.json. - Fetch the employee list from the backend instead of using a static array.
- Add functionality to create, edit, and fetch employee data dynamically.
- Add a detailed view page for each employee.
- Use custom hooks to simplify and reuse logic.
- Implement CSS Modules for better styling and scope management.
- Replace inline styles with CSS variables for consistent theming.
- Refactor the file structure to keep everything organized.
- Test the app and ensure all features work smoothly.
This project is licensed under the MIT License. See the LICENSE file for details.