DEV Community: goldenekpendu

Stop Mixing Them Up: Tailwind’s Space vs Gap Explained

goldenekpendu — Sat, 04 Oct 2025 07:23:40 +0000

Tailwind is an awesome resource when styling web applications. It’s fast, lightweight, and easy to use once you get used to the class-first syntax. But what do you use when you need to add some spacing between items — gap or space?

Let’s get into it.

What do I use?

To tackle this question, let’s create a scenario. We’ll be using three boxes represented by divs in an HTML document.

<section>
  <div class="w-48 h-48 bg-slate-300">Box 1</div>
  <div class="w-48 h-48 bg-slate-400">Box 2</div>
  <div class="w-48 h-48 bg-slate-500">Box 3</div>
</section>

In this example, there are three boxes we need to add some spacing to. Normally, the way to go about this would be to:

Use a flex layout on the section parent element and add a gap value to create space.
Use a margin on each box.

But what happens when there’s no need to use a flex layout or margin? What do we use?

That’s where the space Tailwind class comes in. Picture it as what gap is capable of in a grid or flex layout, but without the flex/grid. So let's see a side-by-side comparison.

<!-- with tailwind space -->
<section class="space-5">
  <div class="w-48 h-48 bg-slate-300">Box 1</div>
  <div class="w-48 h-48 bg-slate-400">Box 2</div>
  <div class="w-48 h-48 bg-slate-500">Box 3</div>
</section>

<!-- with tailwind gap -->
<section class="flex gap-5">
  <div class="w-48 h-48 bg-slate-300">Box 1</div>
  <div class="w-48 h-48 bg-slate-400">Box 2</div>
  <div class="w-48 h-48 bg-slate-500">Box 3</div>
</section>

In the first code block, using Tailwind spacecreates spacing between the items in the section element. The main difference is that when using gap, a flex or grid layout is required, whereas when using space, it's not.

This is something I discovered earlier when exploring more of what Tailwind CSS can do in my projects.

Hopefully, this article has helped to simplify the gap vs. space concept in Tailwind. For more detailed documentation, please visit the official Tailwind docs: Tailwind gap vs. Tailwind space.

Thanks for reading, and have a great day.

Ciao 👋

The @grok craze: What’s behind the hype?

goldenekpendu — Sat, 13 Sep 2025 20:34:56 +0000

“ `@grok` why? `@grok` is this true? `@grok` who did it better? ”

If you’ve been on Twitter (X) lately, you’ve probably seen comments starting with @grok. It’s the new way people fact-check tweets. For anyone unfamiliar, Grok is a generative AI chatbot built by Elon Musk’s company, xAI.

I’ve noticed Grok getting better, especially at understanding context in threads. It even picks up details from videos and images without users spelling things out — and honestly, that’s impressed me more than once.

But here’s the issue: people lean on it a little too much. You’ll see posts about trending events with well-known facts, yet someone still tags @grok. For some, it feels like it’s replaced their own reasoning.

Ever caught yourself double-checking something you already knew, just because an AI might say it differently?

When Grok gets it right, it’s amazing. But it’s not perfect — and putting blind trust in any AI is risky.

Of course, this isn’t just about Grok. Tools like Perplexity and ChatGPT are seeing the same trend. More people are treating AI like fact-checkers, therapists, and even friends. I use ChatGPT myself to explore ideas, but I don’t take its word as final.

And be honest — have you ever used an AI chatbot just to ‘vent’ or see if it agrees with you?

So, here’s the question: are we relying too much on AI, too fast? And what can we do to keep that balance?

I’d love to hear your thoughts in the comments.

Ciao 👋

Read the original article on Medium

What's next after the Bolt hackathon

goldenekpendu — Fri, 01 Aug 2025 03:50:40 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: After the Hack.

If you haven’t read my previous article on my experience during the world’s largest hackathon by Bolt, you can do so here.

It’s been a journey, and like most participants in this hackathon, I plan to continue working on my project, Invoyceez, and to integrate the core features of the application. Some of the features I intend to add include single and batch invoice uploads, auto-reminders when an invoice is about to expire, and possibly a feature to create invoices via voice commands.

I’ll also be redesigning the UI, which I’m currently working on in Figma. Once that’s done, I’ll apply the updated UI to the app.

After completing these steps, I’ll begin testing with users. The goal of this application isn’t to be expensive—I want it to be accessible to freelancers and small business owners at an affordable price, while supporting them in creating and tracking their branded invoices.

Oh, and I also plan to add a few updates to PlayMyFeelz, the app that matches a user’s mood to a Spotify playlist.

Skills Gained

Throughout the hackathon, I’ve been experimenting with different prompting techniques to explore the best ways for an AI tool like Bolt to capture my ideas. I’ll continue using Bolt to rapidly generate mock-ups for product ideas.

I also used Supabase for the first time during this hackathon! I had been considering it for a future project, and I’m glad I finally gave it a go. As the line between frontend and full-stack development blurs with vibe coding, this might just be the beginning of my exploration into more full-stack projects. How exciting!

Career Changes

The frontend development landscape is evolving, and with AI being adopted across teams and industries, it’s important for me to explore how I can leverage it in my projects and career. I’m genuinely optimistic about the future. I currently work as a graphic designer, but coding has been something I’ve admired since childhood.

With brilliant tools like Bolt, I can now blend these two passions to create meaningful products.

These are just a few things I plan to focus on now that the hackathon has ended. I’m grateful to Bolt and the sponsors for the opportunity to explore vibe coding for the first time. I’m confident this will grow into something far greater.

Thanks for reading my little article.

Ciao 👋

My journey building with Bolt during the World's Largest Hackathon

goldenekpendu — Thu, 31 Jul 2025 07:48:40 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

What a journey this hackathon has been! But first, let me tell you about my first encounter with Bolt.

I first heard about Bolt during a Contra livestream, where the Bolt Expert Programme was announced and some experts showcased the product. It blew my mind! The idea of creating websites and applications in a fraction of the usual time was incredibly motivating.

I followed Bolt on Twitter (X) and turned on all post notifications so I wouldn’t miss any updates. I was thrilled when it was announced that everyone would get a chance to try Bolt—alongside other tools—for free, during the World's Largest Hackathon.

The Idea

As soon as I saw this, I registered for the hackathon and received the builder pack (thanks so much for this, Bolt team), and began thinking of product ideas. That's how Invoyceez came to life.

For almost a year, I’d had an idea for an invoice web app that did more than just invoices, and most importantly, was built specifically for freelancers and small businesses. This was very important to me due to my own experiences working on freelance projects and creating invoices.

I had also begun working on the application's user interface in Figma, though I had to wait for about two weeks before starting due to my schedule. Before I began working on my project, I bookmarked tweets from the Bolt team and other builders that highlighted project setups, prompting techniques and more. The builder/project highlight livestreams on Twitter were incredibly helpful and motivating.

After redeeming my Bolt coupon code, I began with a prompt to create the essential pages for the application. Within minutes, it was done—truly amazing stuff. I then started tweaking certain elements to fine-tune the landing page (more on this later). The dashboard pages were also edited, while I kept a close eye on my token usage.

There were challenges in the hackathon linked to sponsors like Supabase, RevenueCat, Expo and more. So I began adding integrations to my project, starting with Supabase. Bolt helped create schemas and tables in Supabase, based on my prompts.

I’d also like to highlight a literal lifesaver in Bolt—the discussion feature. This is a mode that allows you to chat with the platform for help or suggestions on your project, with optional actionable buttons to fix, implement, or research further. I found this tool extremely useful throughout my hackathon experience.

Bolt also introduced more tokens over the final weekend—sadly, my schedule didn’t allow me to fully take advantage of this opportunity. Bolt also distributed coupons for sponsor tools. One of these was a free domain name from IONOS. I redeemed mine and applied to purchase a domain name for my application. This was an important step, as I was keen to enter the domain name challenge. Unfortunately, I received an email from the domain provider stating they couldn’t provide the desired domain. That stung 😢

The One-Shot Mini Challenge

Towards the end of the hackathon, Bolt announced a mini challenge—the One-Shot Challenge—where participants had to create something amazing using just one prompt. This was a true challenge given the numerous ideas I had, but I eventually settled on an idea called PlayMyFeelz—an application that matches your current mood to a Spotify playlist.

The main issue was integrating the Spotify API with my application, which didn’t seem viable given the constraints of a one-prompt challenge (plus the UI). So I explored other options and decided to use a few hardcoded playlists from Spotify. I asked the good ol’ ChatGPT for some help and got a few playlist links, then crafted a prompt using a UI I had previously designed in Figma just for this challenge.

Submission Deadline

I started freaking out slightly when the deadline was a day away. I was stuck on a critical part of my project—exporting the generated invoices as an image or PDF. For some reason, the JavaScript libraries I used weren’t compatible with Bolt. I tried multiple fixes, but nothing worked 😫. To top it off, I had fewer than 1 million tokens remaining!

So I tried a different approach. I made some quick edits to the homepage and then spent most of my tokens trying to fix core issues (still no success). I also discovered that manually editing the files didn’t deduct tokens, which allowed me to keep experimenting—including temporarily breaking the invoice preview screen in the process.

With only a few hours left, I started to panic. I even considered not submitting the project at all because it was incomplete. But in the end, I decided to submit it anyway.

I learnt a lot from this hackathon and from the community. Keep an eye out for my next article, where I’ll talk more about that. Until then, thanks for reading.

Ciao 👋

Easily overwrite the Vercel 404 page in ReactJS

goldenekpendu — Wed, 18 Jun 2025 18:13:39 +0000

I had just deployed a React application to Vercel, complete with routing and a custom 404 error page. I tested the live site in Vercel and tried visiting a non-existent route, but I couldn’t! Vercel’s default 404 page was rendered instead of my custom component.

Here’s how I fixed it

I needed to find a way to overwrite the default action by Vercel, so I conducted some research. So here’s what was happening - Vercel served its own 404 page before my React app loaded.

To fix this, first create a vercel.json file. Use the following code snippet in your file

{
"rewrites": [
{ "source": "/(.*)", "destination": "/" }
]
}

That was it! I redeployed the application, and now my 404 component was rendered instead of the default one from Vercel.

I hope this solution helped you. If so, please leave a comment below.

Thanks for reading, ciao 👋

P.S. If your cursor starts acting up in VS Code, check out this article

How to install Tailwind v4 in a Vite project

goldenekpendu — Sat, 07 Jun 2025 03:56:00 +0000

A few days ago, I created a new React project using Vite, and I intended to use Tailwind for styling. However, I ran into some issues — Tailwind just couldn’t be initialised! I used the usual command npx tailwind init -p, but I got errors in my console.

So here’s what I did and how you can avoid similar issues when using Tailwind in your next Vite project.

## Update NodeJS and NPM

This was the first step I took as my Node version was outdated. To check your Node version, use the command node -v. The latest version of Node can be obtained via the official website.

For NPM update, first check your version using npm -v, and to update it, use the command npm install -g npm. If you still encounter issues, let’s head onto the next step.

Use the new Vite installation guide for Tailwind

Since Tailwind v4, the process for installing Tailwind in a Vite project has slightly changed. The full guide can be found on the Tailwind website. It’s been simplified, and below are the steps.

// Install tailwindcss via npm
npm install tailwindcss @tailwindcss/vite

// vite.config.ts 
// (Configure the Vite plugin)

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

You’d notice in the second code block that the configuration is now done in the vite.config.ts and not the tailwind.config.js as in earlier versions. This step is crucial in determining whether your installation is successful or not.

After taking these steps, my installation was successful, and I could use Tailwind to style my application as I wanted freely.

In the coming articles, I’ll be writing articles about Tailwind and how to customise themes with the tailwind.config.js now gone in v4. If you appreciate this article, consider leaving a comment below. I’ll swiftly reply to you.

Thanks for reading and have a good day. Ciao 👋

VS Code Cursor Problem: Why It’s Deleting Instead of Inserting Text

goldenekpendu — Sun, 02 Feb 2025 07:52:57 +0000

You’re in the flow state, coding up your project when BAM, your cursor gets thicker than usual and starts deleting characters. How is that possible? And most importantly, how do you fix it?

Overtype mode in VS Code — how to toggle & disable it

Visual Studio Code known simply as VSCode is a top code editor for many around the world. It’s no surprise. It’s easy to work with, has great extensions, and supports many programming languages.

Now let’s go back to the scenario mentioned in the intro. What causes your cursor to change into a bulldozer, clearing characters in its path instead of modifying it?

Let’s have a brief look at what’s called the Overtype Mode

Overtype Mode is a text editing mode where new characters replace existing ones instead of being inserted. When activated, typing a letter will overwrite the character in front of the cursor rather than pushing it forward.

So for the reason you probably clicked on the article — how do you fix this in VSCode? It’s fairly easy. Let’s go over 3 different steps to stop that cursor from ruining your code.

1. Press Insert Key

toggle on/off ovr mode with the insert key

Simply press the Insert key on your keyboard (usually near the Backspace key).
This toggles between Insert Mode (normal typing) and Overtype Mode.

2. Check the Status Bar

VSCode status bar with OVR mode on

Look at the bottom right corner of VS Code.
If you see “OVR” , it means Overtype Mode is active.
Click on it to disable it.

3. Disable Overtype Mode Permanently

how to disable overtype mode in VSCode

Open Command Palette (Ctrl + Shift + P or Cmd + Shift + P on Mac).
Search for “Toggle Overtype Mode”.
Click it to turn it off.

It’s that easy! Now you have control over this issue. If you found this article helpful, please share it with your fellow coders and let me know in the comments. Thank you for reading.

Ciao 👋

What happened to the constraints tab? | Figma UI3 update

goldenekpendu — Fri, 06 Sep 2024 03:23:39 +0000

Constraints on Figma have been useful tools when positioning elements in a frame, especially noticeable when resizing said frame. However, if you have looked closely, the Constraints section vanished after the UI3 update by Figma. Or has it?

I’ll show you a quick way to find this now-hidden gem.

With an element selected, look at the top right-hand properties panel, especially the Position tab. You should see the usual stuff—alignment tools and information about the element's position and angle.

a visual of the new constraints position in Figma

Now look very closely to the right of the X and Y values. You should see a rectangle next to it. Click on it, and voila, you found the Constraints section!

active constraints section in Figma

My thoughts

I am a huge fan of the visual changes after the UI update; things look better and more intuitive. However, some core tools we use have been hidden for a more minimalist look, which may cause some user issues.

TLDR: To access the Constraints section, select an element in your frame. On the right-hand properties panel, you should see a tiny shape next to the position values. Click on that and you’ve got back constraints.

Let me know what you think about the new update. Are there some tools which have been tucked away? Leave a comment below.

I found this useful resource from this Figma forum

Have a splendid day and happy designing!

Ciao

These Figma Shortcuts Have Improved My Workflow, You Should Try Them Too

goldenekpendu — Tue, 14 May 2024 20:05:37 +0000

Designing interfaces in Figma can become very time-consuming, especially if it’s a large project and things must be done quickly.

I recently came across these Figma shortcuts that have drastically improved my speed and workflow.

1. Toggle between Layers and the Assets panels

Toggle between Layers and Assets panels in Figma

Mousing around toggling the Layers and Assets panels could become repetitive and time-consuming, but there’s a faster way to do so — without moving your mouse!

Just use the shortcuts Alt + 2 (or ⌥ + 2 on Mac) to switch to the assets panel, and Alt + 1 ( ⌥ + 1 on Mac) to switch back to the layers panel. Quick and easy!

2. Toggle between the Design and Prototype panels

Toggle between Design and Prototype panels in Figma

This is almost the same as the previous example, however, you may be using this more often as you prototype your designs.

So, instead of moving your mouse to the top right of your screen to switch panels, use the shortcut Alt + 9 (or ⌥ + 9 on Mac) to switch to Prototype and back to the Design panel with Alt + 8 (or ⌥ + 8 on Mac).

Note : this can also be done using another shortcut Shift + E.

3. Easily search for saved plugins

Quick search shortcut for plugins in Figma

Before knowing this shortcut to access saved plugins, I’d go to the plugins side menu, and scroll through the list until I found the one I would use. Also, when reusing the plugin, I’d repeat the same process…again.

However, those days are now officially over with this shortcut. The next time you want to access your saved or recently used plugins, try Ctrl + / (or ⌘ + / on Mac). Type in the name of your desired saved plugins and you should see them right there!

For recently used plugins, use this instead: Alt + Ctrl + P (or ⌘ + ⌥ + P on Mac).

4. Align selections to any side of a frame

Align a selection to any side of a frame in Figma

When creating frames, shapes, text and components in Figma (within a frame), there is the need to align these selections to either the left, top, right or bottom of a frame.

The go-to approach is to use the alignment tools in the top right of the Design panel. However, there are faster ways to do so.

If you game on a computer using a keyboard, you may be familiar with these keys: W , A , S , and D.

If you don’t game, that’s alright too. Here’s how these keys help to align to any side of a frame:

Alt (or ⌥) + W — Aligns to the top of the frame
Alt (or ⌥) + A — Aligns to the left of the frame
Alt (or ⌥) + S — Aligns to the bottom of the frame
Alt (or ⌥) + D — Aligns to the right of the frame

5. Align horizontally and vertically

Align selections horizontally and vertically in Figma

This has been a valuable shortcut when aligning horizontally or vertically. Use the shortcuts Alt + H (or Option + H on Mac) to align horizontally and Alt + V (or Option + V on Mac) to align vertically.

This saves a lot of time when aligning assets in a design, without mousing all over align via the Design panel.

These are a few shortcuts that have been a timesaver for me. I hope you find value in this article and if you do, please share and leave me a comment below.

Thanks for reading. Ciao 😀

How to easily style active link in NextJS

goldenekpendu — Mon, 06 Nov 2023 06:23:43 +0000

Having a web application without the appropriate styling of active links can be a nightmare for users. In this article, we see how to easily style active links in NextJS

Today, we’re be taking a look at how to style active links in NextJS. There’s no worse feeling as a user than having no visual clue to know where you currently are on a webpage. If this was a React app, we could utilise the React Router’s NavLinkcomponent, using the activeclass to style whichever links are active.

But this is a NextJS app, and we’re certainly not using React Router as Next has it’s own routing. So let’s begin: I’ll be using Tailwind CSS for this example, but you’re free to use whatever you’re comfortable with. Let’s install NextJS alongside TailwindCSS.

npx create-next-app@latest active-links --typescript --eslint
cd active-links

npm install -D tailwindcss postcss autoprefixer

Set up your tailwind.config.ts as needed, if you’re not using Tailwind, please kindly skip this step. Also, adjust your globals.css according to your preference.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {},
      container: {
        center: true,
        padding: {
          DEFAULT: "1rem",
          sm: "2rem",
          lg: "4rem",
          xl: "5rem",
        },
      },
    },
  },
  plugins: [],
};
export default config;

Next, we’re going to create a simple navbar with 3 links: Page One, Page Two and Page Three. For this, I usually create a Components folder and create a new file titled Navbar.tsx. Once you’ve created this file, please remember to import it into the layout.tsx file so it can be rendered across all pages.

// layout.tsx

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import Navbar from './components/Navbar'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Active Link Test',
  description: 'Easily style active links in NextJS!',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Navbar />
        {children}</body>
    </html>
  )
}

Your file structure should look similar to this

// Navbar.tsx

"use client";
import React from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

const Navbar = () => {
    const currentPath = usePathname();
    return (
        <nav className='w-full h-fit mx-auto border-b '>
            <div className="container flex justify-between h-[14vh] items-center">
                <div className="logo">
                    <Link href={'/'}><h4 className='text-2xl tracking-tight font-bold'>active <span className=' text-green-500 uppercase'>Linktest</span></h4></Link>
                </div>

                <div className="links flex gap-10 text-slate-600">
                    <Link href={'/page-one'} className={currentPath === "/page-one" ? "text-green-500 font-semibold" : "text-slate-600"}>Page One</Link>
                    <Link href={'/page-two'} className={currentPath === "/page-two" ? "text-green-500 font-semibold" : "text-slate-600"}>Page Two</Link>
                    <Link href={'/page-three'} className={currentPath === "/page-three" ? "text-green-500 font-semibold" : "text-slate-600"}>Page Three</Link>
                </div>
            </div>
        </nav>
    )
}

export default Navbar

In the code snippet above, we’ve created a simple navbar component with 3 pages. To create a page via the app router, create a folder with the desired pathname, e.g, mine is pages-one. Then create a page.tsx inside the folder and customise accordingly. Here’s mine:

In order to know the current path, we’re using the usePathname hook from next/navigation, and since this is a Client Component, we need to declare use client at the top of our file . We have a variable called currentPath which stores the value returned by the usePathname hook.

We’ve also added a simple logic that checks if our current path matches the path name. For example, if currentPath === "/page-one" then we style the link accordingly. In this case, the styling is text-green-500 font-semibold which is Tailwind for a shade of green and semibold font weight.

Now, let’s add some content to each page. For simplicity sake, I made the contents the same for all 3 pages. So copy and modify accordingly. I’ll use page one as an example:

// page one
// page.tsx

import React from 'react'

const PageOne: React.FC = () => {
    return (
        <section className='container mt-14 rounded-3xl py-10 '>
            <div className=''>
                <h2 className='text-3xl font-semibold lg:text-4xl '>Page One</h2>
                <div className='py-6'>
                    <p className='text-green-600 max-w-3xl text-xl py-4'>Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Etiam dignissim diam quis enim lobortis. Neque viverra justo nec ultrices. Dui vivamus arcu felis bibendum ut tristique et egestas. Dolor sit amet consectetur adipiscing elit. Purus viverra accumsan in nisl nisi scelerisque.</p>
                    <p className="text-slate-500 max-w-3xl py-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis. Id velit ut tortor pretium viverra. Orci dapibus ultrices in iaculis nunc sed. In iaculis nunc sed augue lacus viverra vitae.</p>
                    <p className="text-slate-500 max-w-3xl py-4">Tellus integer feugiat scelerisque varius morbi enim. Bibendum at varius vel pharetra vel turpis nunc. Ultrices mi tempus imperdiet nulla malesuada pellentesque..</p>
                </div>
            </div>
        </section>
    )
}

export default PageOne

active link now displaying in green text colour

Now, let’s make the menu responsive.

"use client";
import React, { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { BiMenuAltRight } from 'react-icons/bi'
import { AiOutlineClose } from 'react-icons/ai'

const Navbar = () => {
    const currentPath = usePathname();
    const [toggle, setToggle] = useState(false);
    return (
        <nav className='w-full h-fit mx-auto border-b bg-white'>
            <div className="container flex justify-between h-[14vh] items-center">
                <div className="logo">
                    <Link href={'/'}><h4 className='text-2xl tracking-tight font-bold'>active <span className=' text-green-500 uppercase'>Linktest</span></h4></Link>
                </div>

                <div className='text-3xl text-slate-600 cursor-pointer lg:hidden' onClick={() => setToggle(prev => !prev)}>
                    {toggle ? <BiMenuAltRight /> : <AiOutlineClose />}
                </div>

                <div className="hidden lg:flex links gap-10 text-slate-600">
                    <Link href={'/page-one'} className={currentPath === "/page-one" ? "text-green-500 font-semibold" : "text-slate-600"}>Page One</Link>
                    <Link href={'/page-two'} className={currentPath === "/page-two" ? "text-green-500 font-semibold" : "text-slate-600"}>Page Two</Link>
                    <Link href={'/page-three'} className={currentPath === "/page-three" ? "text-green-500 font-semibold" : "text-slate-600"}>Page Three</Link>
                </div>
            </div>
            {!toggle && <div className='w-full lg:hidden'>
                <div className='container flex flex-col gap-6 py-10'>
                    <Link href={'/page-one'} className={`${currentPath === "/page-one" ? "text-white font-semibold px-3 bg-green-500 rounded-md" : "text-slate-600"} py-3 text-center`}>Page One</Link>
                    <Link href={'/page-two'} className={`${currentPath === "/page-two" ? "text-white font-semibold px-3 bg-green-500 rounded-md" : "text-slate-600"} py-3 text-center`}>Page Two</Link>
                    <Link href={'/page-three'} className={`${currentPath === "/page-three" ? "text-white font-semibold px-3 bg-green-500 rounded-md" : "text-slate-600"} py-3 text-center`}>Page Three</Link>
                </div>
            </div>}
        </nav>
    )
}

export default Navbar

Two icons have been imported from React Icons, and we’re using a state variable toggle to monitor if the menu has been clicked. If so, it displays the menu for mobile. Let’s see how the mobile menu looks.

mobile menu showing active link

Now you have a navbar with styled active links! You can add different active styles that you prefer.

This is a quick and easy way to help a user when navigating your application. If you’re having troubles with images not displaying in NextJS , have a look at this article. For a reusable custom button component in Tailwind , please read this article.

Thanks a lot for reading, see you in the next one!

My thoughts after creating a note web app | QuikNote

goldenekpendu — Sun, 10 Sep 2023 21:56:47 +0000

QuikNote logo

A few months ago, I started coding up a project I’ve always wanted to create. Introducing QuikNote , a note web app.

🌎 https://quiknote.vercel.app/

QuikNote features user authentication, a rich text editor, and a user-friendly interface.

The story behind the project

Originally created in React using JavaScript, I switched to Typescript (because this is my first project using Typescript). Though it was challenging at first, migrating from JS to TS, I later found the process to be a good learning opportunity.

The app is powered by Firebase.

Challenges

The foremost challenge I faced in this project was creating a note and only displaying it to the owner, not everyone else who uses the app.

I must admit, I did spend a lot of time trying to fix this. I read the docs, tried stack overflow and other forums but I couldn’t solve the issue.

Finally, I had a eureka moment, and discovered the solution was looking me in the face all this time 😂. But that’s why I love taking my time on projects, no matter how small it is. If I try new things, errors are bound to happen but with a methodical approach, I’ll find the solution and learn from the experience!

Another challenge was using Typescript. I had watched a Typescript video prior but using it in real-time seemed to be very different. Fortunately, I have the internet and I utilized tools like blogs, forums, docs, videos to get a sense of what I needed to do.

I also utilised a good ol’ AI friend to explain certain Typescript concepts I was unfamiliar with.

Future Plans

I thoroughly enjoyed every second making this — from the frustration of things not working as they should, to the joyous moments seeing the progress being made.

From now on, I’ll try my best to use Typescript in most of my projects.

Also, I plan on using more UI styling libraries/frameworks.

On a final note, I saw firsthand what lack of planning in a project does to everyone involved. So I’ll continuously push myself to create user interfaces for each project before writing a line of code.

I can’t count how many times I had to pause because I didn’t have a set user interface beforehand.

Also, I do enjoy creating user interfaces, so why not combine two things I love?

_Thanks a lot for reading to this point, I really appreciate you. Be on the lookout for my next project (it’s a secret so I can’t tell you exactly what it is.

TOOLS USED IN THIS PROJECT

⚛️ React.js

📃 Typescript

💅 Styled-components

📁 React Icons

🔥 Firebase

undraw.co for illustrations

P.S: If you have some feedback or suggestion, please use this form

Project Deep Dive: TAG Designz website

goldenekpendu — Thu, 13 Jul 2023 20:43:44 +0000

After delays due to personal activities, I have completed the website for my brand TAG Designz.

You can visit it here: https://tag-designz-site.vercel.app/

Some weeks back, I posted an update video and today, I’ll give a deep dive of what I’ve learnt from this project.

Please note: this project isn’t 10/10. I’m still learning new technologies and plan on adding new features later in the future.

With that being said, let’s take a deep dive into the tools used and lessons learnt.

1. Next.js

Prior to this project, I had never used Next.js in a project.

I have come to see the advantages of Next, including having its own routing system, UI and API routes, customization and more.

For example, previously I didn’t always use an alt tag in my images, but with the next/link component, I was forced to do so. And that’s very helpful because alt tags plays a huge role in SEO and for accessibility features.

My favourite feature so far has been the Pages routing system. No need for React Router anymore :)

2. React Transition Group

I have always been frustrated since I started learning React due to one reason. That was because I didn’t have a way of adding smooth transitions between states.

As a person who loves adding motion in certain components, I was stuck. Until I read about React Transition Group.

I used React Transition Group in certain accordion components on the website.

I’m looking forward to using more of it.

3. Tailwind CSS

I have been using Tailwind in all but one of my React projects. However, using Tailwind with Next.js was a little bit difficult to set up.

But with help for various blog articles, I was able to set it up and created some styled components to use throughout the website.

4. Nodemailer

I don’t use tools like Nodemailer often but I had to for this project.

Following some tutorials and help from the good ol’ pal, ChatGPT, I was able to make email sending work via Gmail.

I am aware that Nodemailer might not be the best secure method of sending emails, but until I improve my backend skills, I’ll have to make do with it.

5. ChatGPT

What would this list be without the one and only?

ChatGPT helped me revise my code and suggested changes to make it better.

It helped a lot with major Nodemailer and React Transition Group issues I had.

6. Figma

Planning the design in Figma before starting the development process structured my workflow.

I didn’t have to start guessing layouts, thus extending the time to finish up the project.

From now on, every project I take on will be planned, designed and prototyped in Figma before developing.

It also aids with getting exact dimensions for assets used in the project, so the design looks identical to the live version.

Personal lessons learnt

i. Progress: Life happens and this could affect a project. The key is to keep pushing and trying to move forward, learning new things and practising. Also, having an optimistic mindset helps.

ii. Procrastination: This isn’t new to me, it’s a constant battle. But what helped me reduce procrastinating in this project was looking back at the progress made — not only on this project but also my coding journey. It might not be the most impressive, but personally, I know what it took to reach where I am today.

From coding almost daily, to losing hope in coding, to needing to restart learning fundamentals, it hasn’t been an easy journey and it also won’t be all smooth sailing going forward. But progress and consistency, to me — is key.

iii. Reading: I read lots of articles and documentations during this project, and I’ve come to see firsthand, reading technical articles regularly not only keeps a developer abreast of new trends, but also improves creative thinking and appreciation for code written by others.

There are other lessons learnt but I think it’s best to stop here.

Please let me know in the comments any feedback you have after visiting the site.

More projects with Next.js and Chakra UI (which I’m excited about) coming soon.

Massive thanks to: freeCodeCamp for their Next.js courses. Danny Thompson_ ,_ David Herbert for their inspirational posts.

Thanks for viewing, I appreciate you.