Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column 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 - 3-column preview card component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • Installation
    • Steps to Setup
    • Steps to Run
  • 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
• See hover states for interactive elements

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
• React Icons - Include popular icons in your React projects easily with react-icons
• TypeScript - Strongly typed programming language for JS

What I learned

Using render props to implement DRY approach

  <MainWrapper>
        <LearnMoreClickedWrapper
          render={(learnMoreClicked, onLearnMoreBtnClick) => (
            <Sedan
              learnMoreClicked={learnMoreClicked}
              onLearnMoreBtnClick={onLearnMoreBtnClick}
            />
          )}
        />
        <LearnMoreClickedWrapper
          render={(learnMoreClicked, onLearnMoreBtnClick) => (
            <Suv
              learnMoreClicked={learnMoreClicked}
              onLearnMoreBtnClick={onLearnMoreBtnClick}
            />
          )}
        />
        <LearnMoreClickedWrapper
          render={(learnMoreClicked, onLearnMoreBtnClick) => (
            <Luxury
              learnMoreClicked={learnMoreClicked}
              onLearnMoreBtnClick={onLearnMoreBtnClick}
            />
          )}
        />
      </MainWrapper>

  const LearnMoreClickedWrapper = ({ render }: ILearnMoreClickedWrapper) => {
  const [learnMoreClicked, setLearnMoreClicked] = useState<boolean>(false);

  const onLearnMoreBtnClick = (): void => {
    setLearnMoreClicked(!learnMoreClicked);
  };

  return (
    <div className="learn-more-clicked-wrapper">
      {render(learnMoreClicked, onLearnMoreBtnClick)}
    </div>
  );
};

Continued development

Learning more about SCSS and using it in future projects

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
• ReactJS - Great documentation to understand ReactJS

Author

• Frontend Mentor - lauriselvijs