https://github.com/amrmabdelazeem/time-tracking-dashboard

Monitor project timelines, and gain valuable insights into your team's performance—all in one intuitive platform. Optimize efficiency and stay on top of your projects with precision and ease.
https://github.com/amrmabdelazeem/time-tracking-dashboard

ecmascript6 frontend html-css-javascript json npm-package reactjs

Last synced: 3 months ago
JSON representation

Monitor project timelines, and gain valuable insights into your team's performance—all in one intuitive platform. Optimize efficiency and stay on top of your projects with precision and ease.

• Host: GitHub
• URL: https://github.com/amrmabdelazeem/time-tracking-dashboard
• Owner: amrmabdelazeem
• Created: 2023-12-16T21:56:33.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-17T10:16:03.000Z (over 2 years ago)
• Last Synced: 2025-01-14T09:41:05.600Z (over 1 year ago)
• Topics: ecmascript6, frontend, html-css-javascript, json, npm-package, reactjs
• Language: CSS
• Homepage: https://amrmabdelazeem.github.io/time-tracking-dashboard/
• Size: 872 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Time tracking dashboard solution

[Time tracking dashboard](https://www.frontendmentor.io/challenges/time-tracking-dashboard-UIQ7167Jw). Improve your coding skills by building realistic projects. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

  - [Built with](#built-with)

- [Author](#author)

## Overview

- This is a preview of how it should look like in desktop

![preview](public/design/desktop-preview.jpg)

### 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

- Mobile (375px) 


![mobile](public/screenshots/mobile.png)

- Desktop(1440px)

![desktop](public/screenshots/desktop.png)

- Active States

![active-states](public/screenshots/active-states.jpg)

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- [React](https://reactjs.org/) - JS library

- React Hooks

- JSON

## Author

- Website - [Github](https://github.com/amrmabdelazeem)

- Frontend Mentor - [@amrmabdelazeem](https://www.frontendmentor.io/profile/amrmabdelazeem)