With a brand new grant from the finance department, biotech company SphereCell has hired a new frontend web developer — you! Your boss wastes no time laying out your first project: completely refactor SphereCell’s sales trends dashboard.
The goals of this refactoring are to modernize the dashboard, reduce technical debt with future-proof code, and improve its maintainability. Your boss has also mentioned that SphereCell will soon need another new dashboard for an upcoming subscription service, so you’ve decided to use React Hooks to ensure the work you do will be easily reusable.
Your challenges will include migrating the existing codebase and data fetching logic to React Hooks, move the application’s state to the React Context API, and make sure everything is robust and working with automated tests.
This project is designed for learning purposes and is not a complete, production-ready application or solution.
This liveProject is for intermediate web developers and frontend engineers seeking to learn more about React Hooks, and the React Context API. To begin this liveProject, you will need to be familiar with:
- Basics of frontend development workflow and tooling
- Basics of React
- Basics of modern frontend development
you will learn
In this liveProject, you’ll learn to develop a dashboard using the new React Hooks framework by refactoring a legacy codebase. Dashboards are an important part of almost any business, and a key project to add to your web development portfolio.
- Creating React components with state
- Fetching data with React Hooks
- Handling complex state changes with React Hooks
- Handling application’s state with React Context API
- Mocking API data in the frontend
- Writing unit tests and functional tests for the frontend