Frontend Mentor - Stats preview card component solution

This is a solution to the Stats preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Stats preview card component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
  • Installation
    • Steps to Setup
    • Steps to Run
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

Screenshot

Installation

Steps to Setup

1. Have node JS installed.
2. In the project root directory, run npm install

Steps to Run

1. In the project root directory, run npm run start

Links

• Solution URL: Github
• Live Site URL: Netlify

My process

Built with

• HTML5 markup
• SCSS - advanced variant of CSS
• React - JS library
• TypeScript - Strongly typed programming language for JS
• Babel - Babel is a JavaScript compiler
• Webpack - Webpack is a module bundler

What I learned

Using BEM methodology to improve css reusability

.StatsCard {
  align-items: center;
  background-color: var(--primary-color);
  border-radius: 12px;
  display: flex;
  height: 446px;
  justify-content: center;
  width: max-content;

  &_Clicked {
    background-color: var(--primary-light-color);
    color: var(--primary-dark-color);
  }

  &-LeftSection {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 80px;
    height: 100%;
    justify-content: center;
    padding-left: 65px;
    width: 50%;
  }
}

Using compound components pattern to improve react component reusability

const StatsCard = ({ children, ...restProps }: IStatsCard) => {
  const [clickMode, setClickMode] = useState < boolean > false;

  return (
    <StatsCardContext.Provider value={{ clickMode, setClickMode }}>
      <div block="StatsCard" mods={{ Clicked: clickMode }} {...restProps}>
        {children}
      </div>
    </StatsCardContext.Provider>
  );
};

StatsCard.LeftSection = StatsCardLeftSection;
StatsCard.RightSection = StatsCardRightSection;

Continued development

Continue to work with BEM methodology

Useful resources

• TypeScript Docs - Docs to better understand typescript
• JavaScript Docs - JS docs
• w3schools CSS docs - Great documentation to understand CSS
• w3schools HTML docs - Great documentation to understand HTML
• SASS - Great documentation to understand SASS
• ReactJS - Great documentation to understand ReactJS
• Docker - Documentation for docker setup and use
• BAM - Naming convention for css classes
• Webpack - Webpack setup
• Babel - Babel setup

Author

• Website - Lauris
• Frontend Mentor - lauriselvijs