Simple workflow for a tiny project

I have been doing small projects to practice my skills, and adding the GitHub actions gave me some insights into why every project needs to check updates and errors.

My Workflow

This workflow will check if the dependencies installed are clean, cache/restore them, build the source code and run tests across different versions of node.

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

RioCantre / nft-preview-card

A simple react project rendering preview of a NFT card.

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • 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
• See hover states for interactive elements

Screenshot

Links

• Solution URL: https://github.com/RioCantre/nft-preview-card
• Live Site URL: https://nft-preview-card-project.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• React - JS library

What I learned

I learned how to add another layer on hover state of an image. I structured first the HTML elements and use CSS styling to accomplish the ideal design.

See the code snippets below:

    <div className="hero-image">
    <

…

View on GitHub

Conclusion

I haven't got a grip on the GitHub actions to be part of every project. This Hackathon reminds me to explore what's out there, behind every corner, and discover a treasure. I would research and do more about this since it's convenient once you gain the flow of its principal concept.