Time tracking dashboard solution

Frontend Mentor Challenge

View Demo · Report Bug · Request Feature

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.

Links

• Solution URL: Time tracking dashboard (Next.js + TypeScript + Tailwind CSS + ESLint) | Frontend Mentor
• Live Site URL: https://time-tracking-dashboard-hdez.vercel.app/

Table of contents

• Overview
  • The challenge
• My process
  • Built with
• Author
• Acknowledgments

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

My process

Built with

• Tailwind CSS
• TypeScript
• Custom Hooks
• Semantic HTML5 markup
• Eslint
• Framer motion
• Client-side Fetching

Useful resources

• Tailwind CSS
• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Client-side Fetching - Next.js
• Route Handlers - Next.js - A solution to "Type error: Route ... has an invalid export"
• Getting Started into SWR
• Prefetching Data with SWR

Author

• Frontend Mentor - @melvinaguilar
• Linkedin: Melvin Aguilar - Linkedin: Melvin Aguilar

Acknowledgments

Run the project

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.