DEV Community: Moses Nyikwagh

How I Built EduLaunch with AI Tools, and Tailwind — From Idea to Launch

Moses Nyikwagh — Mon, 21 Jul 2025 12:52:52 +0000

The Problem

As a developer, I’ve always wanted to create digital products that are useful and easy to launch. But we all know how overwhelming it can be:

So many ideas, not sure which one to build
Designing from scratch? Not my strength
Writing the perfect landing page copy? 😩
Shipping quickly without cutting corners? Tricky

So I decided to approach this differently.

The Approach
Instead of diving straight into code, I let AI and tools do the heavy lifting in the early phase. Here’s how:

Step 1 – Idea Validation & Market Fit (ChatGPT + Reddit + Twitter)
I asked AI to help me brainstorm problems within the creator economy — especially around online course creation.

Then I did some digging on Twitter, Reddit, and Indie Hackers to validate if people were actually struggling with:

“How do I launch an online course quickly, without dealing with custom design, CMS setup, or hosting stress?”

Turns out — lots of people are.

Step 2 – Prototyping with v0.dev
v0.dev was a game-changer.

I described the idea to it in natural language:

"I need a clean landing page for a course creator with testimonials, pricing, and email capture."

It gave me a clean Tailwind layout. From there, I kept refining with both AI + my own touch.

I still had to tweak layout, colors, and content — but I got a solid 60% done within minutes.

Step 3 – Finishing Touches with Tailwind CSS
I brought everything into my dev environment and styled it manually with Tailwind CSS.
I added animation, polished responsiveness, and made it mine.

Step 4– Packaging & Launch
Once the template was done:

I created multiple versions for different needs (creators, bootstrappers, tutors)
Uploaded it to Gumroad
Shared it on Twitter, LinkedIn, Indie Hackers, Medium, etc.
Results So Far
4 purchases
35+ visits
3 honest reviews
Great feedback on UI and customization ease

Not viral yet — but it’s early. The point is: done is better than perfect.

What’s Next?

DMing potential users with real value
Sharing a real case study from a happy buyer

Takeaways

You don’t need to code everything from scratch
AI is a tool, not a cheat — if used right
Templates are underrated for validating ideas fast
Your first launch doesn’t need to be perfect to be real

If you found this helpful, follow me @mosnyik
You can check out EduLaunch Kit here — ideal for course creators and indie builders.

Why Refunds Don’t End Up in the Wrong Bank Account – Demystifying the Luhn Algorithm in JavaScript

Moses Nyikwagh — Wed, 16 Jul 2025 13:26:35 +0000

Ever wondered how apps know your card number is "valid" even before charging you?
Let me tell you a story.

A while ago, I was working on a refund feature in an e-commerce app.
Pretty straightforward:

"Refund ₦5,000 back to the customer’s card."

But something hit me...

❓What if someone tampers with the card number?
❓What if an honest mistake happens and a user misplaces a number in the sequence?
❓How do we know the card number is even real before sending money?
❓How do we save up the transaction charge for invalid transactions?

Sure, payment processors like Stripe or Paystack will yell at you if it's invalid — but how do they know?

Enter: The Luhn Algorithm – a humble, clever math trick that helps catch typos in card numbers before they cause trouble.

Let’s break it down with JavaScript experiments 💻

Step 1: The “Aha!” – Credit Card Numbers Aren’t Just Random
Card numbers aren’t just a bunch of digits; they follow a rule.
If you type them wrong, the app will know instantly — without ever checking with the bank.

So I searched: “how to validate a credit card number?”

Result? Luhn Algorithm.
Fancy name. Sounds like a Bond villain. But it’s just math.

The Luhn algorithm is a checksum formula used to validate identification numbers. It's a simple method designed to detect common errors in numbers like credit card numbers, IMEI numbers, and other identification numbers. The algorithm works by applying basic arithmetic to the digits of a number and calculating a check digit that must agree with the last digit of the original number.

How It Works
It involves doubling every other digit, starting from the rightmost digit, and summing the resulting digits. If any doubled digit is greater than 9, subtract 9. Then, sum all the adjusted digits and the original digits. If the final sum is divisible by 10, the number is considered valid. eg 1762483 sums up to 30, which is divisible by 10, so it is a valid ID number under Luhn's formula.

Step 2: Let's Code the Luhn Check in Baby Steps

Clean the input: Just digits, no spaces or dashes

function clean(cardNumber) {
  return cardNumber.replace(/\D/g, '');
}

Reverse it – Remember Luhn needs us to count from the right

const reversed = clean(number).split('').reverse();

Apply the Luhn Magic Every second digit, we double it. If that doubled digit is greater than 9, we subtract 9.

function isValidCard(cardNumber) {
  const digits = clean(cardNumber).split('').reverse().map(Number);

  const total = digits.reduce((sum, digit, index) => {
    if (index % 2 === 1) {
      let doubled = digit * 2;
      if (doubled > 9) doubled -= 9;
      return sum + doubled;
    } else {
      return sum + digit;
    }
  }, 0);

  return total % 10 === 0;
}

Step 3: Test It Like a Curious Developer

isValidCard('4242 4242 4242 4242'); // true
isValidCard('1234 5678 9012 3456'); // false
isValidCard('1762483'); // true

That’s it! 🎉 You just built a credit card validator using the Luhn algorithm.

🤯 Mind blown? Same.
What I love about this algorithm is:

It's lightweight and doesn't need any API

It’s fast, runs instantly in your app

It’s used everywhere from banking to SIM cards

The next time you build a payment form, form validator, or just want to impress at your next tech meetup — pull this card out (pun intended 😄)

HOW TO ADD TAILWINDCSS TO A REACT APP BUILT WITH VITE (2025 Guide)

Moses Nyikwagh — Sun, 06 Apr 2025 18:34:46 +0000

I recently decided to create some React features as a way to relax and unwind, and while trying to set up Tailwind CSS with React, I found it challenging because following the steps outlined in the official Tailwind docs did not help me successfully set up Tailwind CSS in my React app. It took me a couple of days to figure out a way around, and I thought to document my procedures here for later reference, and maybe, this could also save you some time on your project setup.
I recently decided to create some React features as a way to relax and unwind, and in the process, I tried to add Tailwind CSS to a React app built with Vite. What I thought would be a straightforward setup turned out to be more challenging than expected. Following the official Tailwind CSS documentation didn’t help me successfully set up Tailwind in my Vite + React project — and I ran into errors that made me question what I was missing. After spending a couple of days troubleshooting and testing, I finally figured out a way that works. So I decided to document how to install Tailwind CSS with React and Vite — both for my future self and for anyone else who might be stuck trying to do the same.

STEP 0. Create a React app with Vite
Make sure you have Node.js installed. Then create your Vite project with:
npm create vite@latest

This will prompt you to name your app and choose a framework (select React) and language (JavaScript or TypeScript).
Next, install dependencies and start your dev server:
npm install && npm run dev
You should now see your app running at http://localhost:5173/

STEP 1. Install TailwindCSS, PostCSS, and Autoprefixer as a dev dependency in your app

Run the following command to install Tailwind and its required dependencies:

npm install -D tailwindcss postcss autoprefixer

This installs the latest version of tailwindcss, postcss and autoprefixer dependencies.
Tailwind is the utility-first CSS framework itself, postcss is the tool that processes your CSS and adds features like nesting, custom plugins, etc. Tailwind uses it to transform your CSS, and the autoprefixer ensures CSS compatibility across different browsers.

Then run: npx tailwindcss init -p

This command initializes the TailwindCSS framework and creates the config files needed to wire Tailwind into your build process- tailwind.config.js, postcss.config.js.

Troubleshooting: Tailwind CSS Binary Missing in node_modules.bin

I found that this is the troublesome step in the installation, because at the time of writing, the Tailwind CSS framework would not install successfully even if the process completed successfully.
To see what I am saying, run:
dir node_modules\.bin

You should see:
You should see:
`tailwindcss

tailwindcss.cmd

tailwindcss.ps1`

as part of the printout in your terminal, if not, it means the installation failed silently.

If you go ahead to run

npx tailwindcss init -p

You would get an error that indicates that no executable to install TailwindCSS

*The Fix: Use an Older Tailwind CSS Version (v3.4.1)
*
The latest version of Tailwind might not install correctly in some environments, so I used version 3.4.1

npm install -D tailwindcss@3.4.1 postcss autoprefixer

Now run:

dir node_modules\.bin

Now look!!!,

We have Tailwind installed successfully!

We can now go ahead and do the rest of the setup steps.

Rerun:

npx tailwindcss init -p

This command would create a tailwind.config.js and postcss.config.js file in your project

STEP 2. Configure tailwind.config.js for React and Vite

In your generated tailwind.config.js, add the paths where Tailwind should look for class usage:

/** @type {import('tailwindcss').Config} */

export default {

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

],

theme: {

extend: {},

},

STEP 3. Add Tailwind Directives to Your CSS File

Now that we have Tailwind added to the project, we can make it accessible in the entire project by editing or creating index.css insrc/ folder and add the following:

@tailwind base;

@tailwind components;

@tailwind utilities;

@tailwind base: Adds base styles (resets, typography normalization)

@tailwind components: For any pre-built UI components, Tailwind might offer

@tailwind utilities: Gives you access to all the utility classes like bg-red-500, flex, etc.

STEP 4. Import the CSS into Your React App Entry File
If you do not have the index.css already imported into the entry point of your app, then import it. For me, the entry point of my app is main.tsx so I would add the index.css at the top of my main.tsx, yours could be main.jsx

STEP 5: Test Tailwind CSS Setup in Your Vite React App

So to check if my installation is complete and working, I would go into the App.tsx and replace the App function with

function App() {

return (

Hello Tailwind + Vite + React!

);

}

export default App;

Now run

npm run dev

And…

Viola!! We have successfully added TailwindCSS to our Vite React app and this is what we have

Final Thoughts: Tailwind CSS Working in Vite React App

It’s always a little frustrating when "official" instructions don’t work out of the box, but that’s part of the dev journey — figuring things out, learning, and sharing.

You’re welcome. Don’t mention it. 😄

Was this helpful?

Let me know in the comments or reach out if you run into any issues — happy to help!