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.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Have node JS installed.
- In the project root directory, run
npm install
- In the project root directory, run
npm run start
- 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
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;
Continue to work with BEM methodology
- 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
- Website - Lauris
- Frontend Mentor - lauriselvijs