Frontend Mentor - Expenses chart component solution

This is a solution to the Expenses chart component 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
  • Flow diagram
• Author

Overview

The challenge

Users should be able to:

• View the bar chart and hover over the individual bars to see the correct amounts for each day
• See the current day’s bar highlighted in a different colour to the other bars
• View the optimal layout for the content depending on their device’s screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Expenses chart

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• shadcn - reactjs component library
• tailwindcss - CSS framework

What I learned

Creating the barchart with Shadcn

• Shadcn uses Recharts under the hood.
• the project was created using vite npm create vite@latest
• add Tailwind and its configuration npm install -D tailwindcss postcss autoprefixer and then intialise tailwind with npx tailwindcss init -p
• Edit tsconfig.json file. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

• Edit tsconfig.app.json file

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

• Update vite.config.ts with the following command npm i -D @types/node so that I can import path without error

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

• Run the CLI. Run the shadcn-ui init command to setup your project: npx shadcn-ui@latest init

• Configure components.json. A few questions will be asked to configure components.json

• Run the following command to install chart.tsx npx shadcn-ui@latest add chart

• a chart tutorial guide is found on this link.

Flow diagram

graph TD
    A[Main] --> B{Flex Container}
    B --> C(Balance Card Container)
    B --> D(Chart Card)
    C --> E{Balance Card Inner Red Container}
    E --> F{Flex content container}
    E --> G(Decorative circle container)
    G --> T((Decorative circle))
    F --> H(Heading text - Balance)
    F --> I(Content text - amount)
    D --> J{Chart Card Container}
    J --> K{Card header}
    J --> L(Card content)
    J --> M{Footer Content}
    K --> N(Card title - Spending...)
    K --> P(Card Description - sr)
    L --> Q(Bar Chart)
    M --> R([Total Amount])
    M --> S([Percentage Change])

Loading

Author

• Frontend Mentor - ChamuMutezva