Frontend Mentor - Time tracking dashboard solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• SveltKit Readme

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

• Solution URL: solution in FrontEnd Mentor
• Live Site URL: Live Site solution

My process

Built with

• Semantic HTML5 markup
• SCSS
• Flexbox
• CSS Grid
• Mobile-first workflow
• Svelte - FrontEnd Compiler
• Sveltekit - Svelte Framework

What I learned

1. Make posible use SCSS in Sveltekit and make a global style file import whit the svelte.config.js file

   **first** -> npm i -D svelte-preprocess sass

   **second :

   //svelte.config.js
   import adapter from '@sveltejs/adapter-auto';
   import preprocessor from 'svelte-preprocess';
   
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
       preprocess: preprocessor({
           scss: {
               includePaths: ['src/scss'],
               prependData: `@import './global';`
           }
       }),
       kit: {
           // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
           // If your environment is not supported or you settled on a specific environment, switch out the adapter.
           // See https://kit.svelte.dev/docs/adapters for more information about adapters.
           adapter: adapter()
       }
   };
   
   export default config;
   

2. Lear how to use the svelte-motion library

   **first-> import the Motion tag -> import Motion from 'svelte-motion/src/motion/MotionSSR.svelte'

   **second-> wrap the componente that u already styled:

   <Motion
       whileHover={buttonHover}
       whileTap={buttonTap}
       animate={$timeframe === text ? linkSelected : ''}
       let:motion
   >
       <button on:click={changeTimeframe} use:motion>
           {text}
       </button>
   </Motion>
   

3. And finally of course, learn how to use Svelte and Sveltkit (as a first interaction)

Continued development

I wanna continue learning Svelte, It's something new to me and some times I get lost but it's amazing when you understand things.

Useful resources

• Svelte Motion - This helped me for make the animations,Although it didn't seem intuitive to me, I was able to get the hang of it later.

• Deploy on netlify - This is an amazing video which helped me to deploy this challenge on netlifly.

• How to add SCSS to sveltekit - A Video that explain how to add SCSS in a easy way

Author

• Frontend Mentor - @avalonxii
• Instagram - @avalondev_xii

SveltKit Readme

create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.