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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
  • Continued Learning
• Author
• Contributing
• License

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

Desktop View

Mobile View

• Solution URL: https://github.com/DavidVerghese/time-tracking-dashboard
• Live Site URL: https://time-tracking-dashboard-phi-five.vercel.app/daily

When building webpages, I normally work on adding text, pictures, and icons to the webpage before I work on the color, responsitivy and page layout. For this website, I took the opposite approach: I first worked on color, page layout and responsitivity, using solid blocks of color, before adding in the text, pictures, and icons.

I was inspired by the popular web development Youtube, Kevin Powell. I believe this approach enabled me to complete this project faster, and I will use it in my next Frontend mentor challenge.

• NextJS
• Tailwind CSS
• Typescript

• Dynamic routes: The three webpages for each timeframe (daily, weekly, and monthly) all use the same React component. I use the URL path to figure out the user's desired timeframe, and search the database for information about that timeframe. Eg if the URL path is /daily, the web app will search the database for the 'daily' timeframe.

• Dynamic page titles: The three webpages for each timeframe (daily, weekly, and monthly) have different page titles. The page title is dynamically generated based on the selected timeframe.

• Typescript: I use Typescript types and interfaces in this project to ensure that props recieve the correct datatypes.

• Accessibility: In order to improve accessibility, I put links in each card. Although the links are non functional, they enable a user to navigate between different cards with the tab button.

• NextJS docs - https://nextjs.org/docs
• Tailwind CSS docs - https://tailwindcss.com/docs
• Typescript docs - https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
• Adding Typescript to NextJS apps - https://nextjs.org/docs/pages/building-your-application/configuring/typescript

I might add in the ability to add in custom timeframes, such as 'bimonthly', 'hourly', etc.

• Website - David Verghese
• Frontend Mentor - @davidjverghese

Pull requests are welcome.

MIT