Frontend Mentor - Personal blog solution

This is a solution to the Personal blog 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
• Acknowledgments

Overview

The challenge

Users should be able to:

• Navigate to all pages by clicking links or using their keyboard
• Read all articles
• Select their color theme
• Submit their email to subscribe to the newsletter
• Receive an error message when the newsletter form is submitted if:
  • The Email Address field is empty
  • The Email Address is not formatted correctly
• Receive a success message if submitted correctly
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: LivePage

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• CSS Modules - For styles
• Supabase DataBase - For store data
• MDX Parser - For parse content
• BPROGRESS - For style page transition
• NODEMAILER - For sending a message

What I learned

Just wanted to share something important from my recent coding experience! I ran into some serious problems while building my Next.js app. Even though I set up Turbopack exactly as the docs said, things broke during the build process. After hours of debugging and breaking my project into tiny pieces, I finally discovered the culprit - an SVG plugin that doesn't play nice with Turbopack. The fix was actually pretty simple once I knew what was wrong - just needed some extra webpack config. The big lesson here? Be really careful with those experimental features in Next.js - they can cause you major headaches!

To see how you can acctualy set config for svg, see below:

 webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            icon: true,
          },
        },
      ],
    });
    return config;
  }

Continued development

Since Next.js took up so much of my time, I'm planning to build my next project with vanilla JavaScript and perhaps some browser APIs. I'm still considering my options.

Useful resources

• Next cache and ORM Supabase - This helped me to add next fetch in supabase server client, good article.
• MDX option issue - This is an amazing article which helped me finally parse out blog content.

Author

• Website - Dmytro Voitovych
• Frontend Mentor - @dmytrovoitovych