This is a solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- Solution URL: My Solution on GitHub
- Live Site URL: My Solution hosted on Netlify
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
The intention for this project was to practice building an app using functional React components. The only React hook used in this app was 'useState', which was used to define a piece of state for the user selected timeframe.
The 'timeframe' piece of state was defined on the App.js component so that it could easily be passed down as a prop to the Profile.js and Card.js components. From within those sub components the 'timeframe' state could be updated (resulting in a rerender) or used to reference properties in the data response.
A few concepts which I look forward to using are the other React hooks which seemed to be unnecessary for this application, particularly of those being useEffect and useRef.
- LinkedIn - Mike Uffelman
- Frontend Mentor - mike-uffelman
- GitHub - mike-uffelman