comendrun / applied-jobs-dashboard

A fun little spin off from "Time-tracking-dashboard" that i used the layout to store some data on it.

Frontend Mentor - Job Applications Dashboard

This is an application which i created from this solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• 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

• Github URL: Github Repo
• Live Site URL: live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• TailwindCSS
• Flexbox
• CSS Grid
• Mobile-first workflow
• ReactJS
• react-spinner library

What I learned

this challenge was a good way to practice SASS and SCSS and also I learned about its limitations. still, by now, I prefer CSS and its custom properties more. also, it was good practice for my CSS grid knowledge, and watched a couple of videos about it.

How to make background-color to take a specific percent of the container:

I used this method by justisb from stackoverflow that helped me to make my Job page background-color to take up a specific percentage of the container with the help of gradients.

Continued development

Useful resources

• mockaroo Great website to generate fake data

• Web Dev Simplified wonderful tutorial how to make react portals.

  -Codevolution a youtube tutorial to add loading state using react-spinners library.

Author

• Website - @comendrun
• Frontend Mentor - @comendrun
• Twitter - @comendrun

Acknowledgments