https://github.com/timbar09/fem-time-tracking-dashboard
This is a solution to the Time Tracking Dashboard challenge on Frontend Mentor. The project focuses on creating a responsive dashboard interface for tracking time. I put my skills into practice and brought the design template to life with flawless accuracy, paying close attention to detail.
https://github.com/timbar09/fem-time-tracking-dashboard
linting reactjs responsive-web-design sass vite
Last synced: 12 months ago
JSON representation
This is a solution to the Time Tracking Dashboard challenge on Frontend Mentor. The project focuses on creating a responsive dashboard interface for tracking time. I put my skills into practice and brought the design template to life with flawless accuracy, paying close attention to detail.
- Host: GitHub
- URL: https://github.com/timbar09/fem-time-tracking-dashboard
- Owner: Timbar09
- Created: 2023-06-23T16:36:05.000Z (over 2 years ago)
- Default Branch: dev
- Last Pushed: 2023-06-27T17:27:02.000Z (over 2 years ago)
- Last Synced: 2025-02-04T10:49:00.296Z (about 1 year ago)
- Topics: linting, reactjs, responsive-web-design, sass, vite
- Language: SCSS
- Homepage:
- Size: 281 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Time tracking dashboard solution
This is a solution to the [Time tracking dashboard challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/time-tracking-dashboard-UIQ7167Jw).
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#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
### Screenshot
### Links
- Solution URL: [Add solution URL here](https://your-solution-url.com)
- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- [SASS](https://sass-lang.com/) - React framework
- [React](https://reactjs.org/) - JS library
- [Vite](https://vitejs.dev/) - Build tool
### What I learned
In this project, I didn't acquire any new knowledge or skills. However, it offered me a valuable opportunity to apply my existing skills and demonstrate my attention to detail. It allowed me to bring a design template to life with precise accuracy, showcasing my ability to faithfully execute a given design.
### Continued development
In my future projects, I am eager to delve into React further, particularly those that involve a substantial number of components. This will enable me to explore concepts and technologies such as Redux Toolkit and REST APIs. I am excited to expand my skills and knowledge in these areas through practical application and hands-on experience.
### Useful resources
- [React Official Documentation](https://reactjs.org/docs) - The official documentation for React provided comprehensive information on the React library, its concepts, and how to use it effectively.
- [ChatGPT](https://www.example.com) - This helped me in understanding or breaking down some of the concepts that I have been using but did not fully gasp.
## Author
- Website - [Miles Mosweu | Software Developer](https://timbar09.github.io/My-Portfolio/)
- Frontend Mentor - [@Timbar09](https://www.frontendmentor.io/profile/Timbar09)
- Twitter - [@Milez](https://www.twitter.com/Milez09)
## Acknowledgments
I would like to extend a special thanks to [Frontend Mentor](https://www.frontendmentor.io/) for providing the free design template that served as the foundation for this project. Their platform offers a valuable resource for designers and developers, offering a wide range of challenges to practice and enhance our skills.