# Introduction This project will lead you through creating a heatmap calendar in React, resembling GitHub's contribution graph. This kind of calendar can be a compelling way to visualize activity data over time, with the intensity of color indicating the level of activity on a given day. By the end of this project, you will have a clear understanding of how to integrate and use a calendar heatmap in a React application. ## 👀 Preview <video src="https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/web/project-building-a-react-github-heatmap-contributions/challenge-1/assets/effect.mp4" width="100%" autoplay loop muted playsinline> ## 🎯 Tasks In this project, you will learn to: - Install necessary dependencies for the heatmap calendar. - Create the basic structure of the heatmap component. - Add state for filtering the data. - Generate dummy data to populate the heatmap. - Render the calendar heatmap with dummy data. - Implement filtering logic to filter the heatmap based on activity level. - Style the heatmap component and filter buttons. - Integrate the heatmap component into the main application file. - Launch the application to view the heatmap calendar. ## 🏆 Achievements In this project, you will learn: - How to install dependencies and set up a React application for a heatmap calendar. - How to create and structure a React component for a calendar heatmap. - How to manage state and filter data in a React component. - How to generate and populate dummy data for visualization purposes. - How to render and style a calendar heatmap using React and CSS. - How to integrate the heatmap component into the main application. - How to launch and view the heatmap calendar application.
Click the virtual machine below to start practicing