Frontend Mentor - Time tracking dashboard solution

This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

To run this project:

1. clone Repo
2. check node version (v20.18.4) and npm version (v10.7.0)
3. run: npm install
4. run: npm run dev
5. for unit tests run: npm run test

Table of contents

• Overview
  • Screenshots
  • Links
• Coverage
• My process
• Built with
• Author

Overview

Screenshots

Desktop

Mobile

Active

Links

• Solution URL: GitHub Repo
• Live Site URL: GitHub Pages

Coverage

My process

• download project files
• setup project with React/Vite/SWC/TypeScript/Jest
• check ux design
• recreate index.html
• create scss styles
• identify components
• create atom and container components
• create components s/css classes
• create components constants
• outsource component logic in hooks
• write unit tests
• open html in browser
• polish layout
• refactor javascript/typescript code
• clean up code semantically
• add screenshots
• update README
• clean up project
• upload solution

Built with

• React/Vite/SWC/TypeScript/Jest
• SCSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

Author

• Website - GitHub Account
• Frontend Mentor - @kephalosk