Frontend Mentor - NFT preview card component solution

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

Preview

💡Git Pages of the Project

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned

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

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Typescript - JS "superset"
• Tailwind - CSS Framework
• PostCSS - CSS tranformation tool
• Autoprefixer - PostCSS plugin
• Sass - CSS preprocessor

What I learned

I wanted to learn as much as possible with these kinds of project so I use a lot of unecessary technologies for this type of project, like Next.js, Typescript, Tailwind and Sass.

To see how you can add code snippets, see below:

• Nesting with SCSS ("&" equals ".card" in this position)

.card{
  background: $veryDarkBlue1;
  &:hover{
    background: $cyan;
  }
}

• Using gap with flexbox

&-creator {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

• Creating the hover effect with the eye (see boilerplate.scss)
• Using Git Pages for deployment
  1. Using the dependency gh-pages in package.json

    "dependencies": {
      "gh-pages": "^3.2.3",
    }

  2. Using a different images loader than the default in next.config.js

    const nextConfig = {
      images: {
        loader: 'akamai',
        path: '/',
      }
    }

  3. Use next export to create a out folder

    "scripts": {
      "export": next export,
    }

  4. Use gh-pages to deploy using a github bot

    "scripts": {
      "predeploy": "npm run build && npm run export",
      "deploy": "gh-pages -d out",
    }

  5. You can also create a github action that automate the deployment on github pages on each modification of the main

    name: Node.js CI
  
    on:
      push:
        branches: [ main ]
      pull_request:
        branches: [ main ]
  
    jobs:
      build:
  
        runs-on: ubuntu-latest
  
        strategy:
          matrix:
            node-version: [16.x]
            # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
  
        steps:
        - uses: actions/checkout@v3
        - name: Use Node.js ${{ matrix.node-version }}
          uses: actions/setup-node@v3
          with:
            node-version: ${{ matrix.node-version }}
            cache: 'npm'
        - run: npm ci
        - run: npm run build
        - run: npm run export
        - run: touch ./out/.nojekyll
        
        - name: Deploy 🚀
          uses: JamesIves/github-pages-deploy-action@v4.3.3
          with:
            branch: gh-pages # The branch the action should deploy to.
            folder: out # The folder the action should deploy.