Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive time tracking dashboard using Svelte and Tailwind

@kanuos

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my solution to the Time tracking dashboard challenge. Even though the app was fairly simple and mostly needed CSS for layout - I chose to code the entire app using Svelte. Instead of using HTML to render the cards manually, I decided to use the data.json to render the entire UI.

Tech Stack

  1. Svelte.js as UI framework
  2. Tailwind CSS as styling library
  3. TypeScript for type-safety
  4. Vitest, STL for testing the library
  5. FontSource library for external fonts

Tools used

  1. VS Code as code editor
  2. Svelte extension for VS Code
  3. Firefox and Chrome browser/dev tools
  4. Git as SVN
  5. GitHub as code repository
  6. Netlify for deployment

Check out my solution. Any feedback/suggestion is appreciated :)

Community feedback

P

@grmbyrn

Posted

It looks good. Nothing in particular to say.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord