https://github.com/cloudydaiyz/time-tracking-dashboard-react

Time Tracking Dashboard built using React + Vite bundler
https://github.com/cloudydaiyz/time-tracking-dashboard-react

css html reactjs typescript vite

Last synced: about 1 month ago
JSON representation

Time Tracking Dashboard built using React + Vite bundler

• Host: GitHub
• URL: https://github.com/cloudydaiyz/time-tracking-dashboard-react
• Owner: cloudydaiyz
• Created: 2024-08-22T17:17:27.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-08-23T19:36:41.000Z (6 months ago)
• Last Synced: 2024-11-09T00:12:29.875Z (3 months ago)
• Topics: css, html, reactjs, typescript, vite
• Language: TypeScript
• Homepage: http://github.cloudydaiyz.com/time-tracking-dashboard-react/
• Size: 226 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). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

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

## My process

### Built with

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

### What I learned

- How to deploy a React.js application as a static website on GitHub Pages using Vite ([source](https://vitejs.dev/guide/static-deploy.html#github-pages))

- Going from imperative functionality in JS (and some declarative in HTML and CSS) to complete declaritive functionality in React.js is a bit greater transition than I thought it'd be

- For files in the public folder, use `import.meta.env.BASE_URL` instead of `/` as the root directory, as `vite.config.ts` can change your root directory.

**Note: Delete this note and the content within this section and replace with your own learnings.**

### Useful resources

- [React.js Learn](https://react.dev/learn)

- [Vite Getting Started](https://vitejs.dev/guide/)

## Author

- Website - [Kylan Duncan](https://www.cloudydaiyz.com)

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