Frontend Mentor - Time tracking dashboard solution

This is a solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Switch between viewing Daily, Weekly, and Monthly stats

Screenshot

Links

• Solution URL: Visit the solution
• Live Site URL: Visit site

My process

Built with

• Next.js - React framework
• React - JS library
• Tailwind CSS - CSS framework
• TypeScript - TypeScript language
• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I learned to use Nextjs and React with Tailwind CSS for styling. I was able to create a responsive website with the help of Tailwind CSS. I also learned to use the grid system. I also learned more about certain React core concepts like State management and passing down the Props. I also learned to use TypeScript for type checking. I tried my best to use type-checking wherever needed. Also I tried to use AI whenever I was stuck and had errors.

Continued development

I want to continue learning React and Next framework. I want to learn more about the core concepts of React and Next. I also want to learn TypeScript and use it in my future projects.

Author

• Frontend Mentor - @Aniket200-ind
• Twitter - @AniketBotre2604