https://github.com/devmor-j/fm-time-tracking-dashboard
FrontendMentor - Time Tracking Dashboard
https://github.com/devmor-j/fm-time-tracking-dashboard
Last synced: 4 months ago
JSON representation
FrontendMentor - Time Tracking Dashboard
- Host: GitHub
- URL: https://github.com/devmor-j/fm-time-tracking-dashboard
- Owner: devmor-j
- Created: 2022-05-24T19:13:27.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-31T11:45:30.000Z (about 4 years ago)
- Last Synced: 2025-07-27T06:17:42.566Z (11 months ago)
- Language: Vue
- Homepage: https://devmor-time-tracking-dashboard.netlify.app/
- Size: 376 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Time tracking dashboard solution
This is my solution to the [Time tracking dashboard challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/time-tracking-dashboard-UIQ7167Jw). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#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
Designed with responsiveness in mind. Mobile-first developement means this project was styled for small screens with a `flexbox stack layout`. Tablet breakpoint is on 768px which means that screens larger than that will view the `grid layout`.
Desktop [1536px]
Mobile [375px] iPhone 5/SE
### Links
- Solution URL: [Github repository](https://github.com/devmor-j/fm-time-tracking-dashboard)
- Live Site URL: [Hosted on Netlify](https://devmor-time-tracking-dashboard.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- Mobile-first workflow
- CSS custom properties + Flexbox and Grid
- [Vue.js 3](https://vuejs.org/) - The Progressive JavaScript Framework
- [TypeScript](https://www.typescriptlang.org/) - TypeScript is JavaScript with syntax for types
- [Vite.js](https://vitejs.dev/) - Next Generation Frontend Tooling
- [Modern Css Reset](https://github.com/hankchizljaw/modern-css-reset) - One of the best resetters
- [SASS](https://sass-lang.com) - CSS with superpowers
- [CSS Modules](https://github.com/css-modules/css-modules) - A CSS Module is a CSS file in which all class names and animation names are scoped locally by default
- [ESLint](https://eslint.org/) - Find and fix problems in your JavaScript code
- [Prettier](https://prettier.io/) - Opinionated Code Formatter
### Continued development
If you wanna work on a new feature try adding transition on tracking cards when profile timeframe changes.
Another feature would be showing 'zero' instead of `0hrs` which I already implemented but you can clone this repo and strat from scratch.
If you like to debug and refactor css then try to drop css modules and use native vue scoped styles.
One more task for css development is to drop dependency for `css-modern-reset` which I don't recommend personally but if you hate css magics then this will make you write all those hidden reset styles.
### Useful resources
- [Dynamic image source `![]()
` not working](https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working) - Note that setting your img src via v-bind (`:{property}`) does not work in vite build process. instead put your images in `public` folder. [another discussion](https://forum.vuejs.org/t/dynamic-img-src-of-item-in-for-loop/119695)
- [ISO 8601 Duration in JavaScript](https://www.twilio.com/blog/parse-iso8601-duration-javascript) - Helps robots to know this app is about time and also Google will love this semantic tag:
```html
An example will be `datetime="PT36H"` witch means 36 hours duration. For more info please refer to [TinyDuration](https://github.com/MelleB/tinyduration) and [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time).
## Author
- Frontend Mentor - [@devmor-j](https://www.frontendmentor.io/profile/devmor-j)