The story of building Hauntboard, hitting 1.2 million reads on the free tier, migrating to Cloudflare for $0, and reaching our first 20 products.

A few months ago, I was talking to an indie friend who had just finished building his first SaaS app.

He had spent three months coding it late at night after his day job. He skipped weekends. He obsessed over every button and database query.

Then launch day came.

He spent 24 straight hours begging people in WhatsApp groups and Discord channels to upvote his project. He posted on Twitter every two hours. By midnight, he won a shiny badge on a popular launch site.

The next morning, his traffic dropped right back to zero.

He had spent three months building software, one day begging for votes, and made exactly $0. Two days later, his product was buried under 500 new submissions, never to be seen again.

That broke my heart. And it made me realize something painful: the way we launch indie products today is broken.

The problem with the 24-hour hype cycle

Most launch platforms are built for teams with big Twitter followings, marketing budgets, and upvote cartels.

If you are a solo maker with 80 followers on X, you have almost no chance. You launch, nobody sees it, and you assume your product is bad.

In reality, your product wasn’t bad. It was just invisible.

I wanted to fix that. So I started building Hauntboard.

The idea was simple:

1. 7 days on the board, not 24 hours. Give people a full week to actually browse, click through, and test what you made.
2. Human review. A real person looks at every single submission to filter out crypto scams and abandoned templates.
3. Permanent dofollow links. When you launch, your page stays indexed permanently so Google and AI search engines (like Perplexity and ChatGPT) can find you for months.
4. Public outbound clicks. No fake upvote counters. If Hauntboard sends 4 visitors to your site, the page says 4. If it sends 80, it says 80.

Our motto was simple:

“Don’t be a ghost. Show what you built.”

The morning the site disappeared

I launched the first version of Hauntboard built on Next.js 16 and Convex, hosted on Vercel’s free tier.

Makers started trickling in. People submitted productivity tools, image converters, and developer utilities. Search engine bots started indexing all the launch pages.

Then came November 2.

I opened my phone to check the board, and instead of the homepage, I saw a black screen with four words:

“This page doesn’t exist. 404 DEPLOYMENT_NOT_FOUND.”

I rushed to my computer and logged into Vercel. There was a big red banner across my dashboard:

“Paused Nov 2 · Fast Origin Transfer · Upgrade to resume service.”

Because of all the pages being indexed and visited, the site had hit 1.2 million ISR reads and exceeded the 10 GB bandwidth limit.

Vercel’s message was polite but firm: pay up or stay offline.

Why I refused to pay

For a funded startup, a $20/month hosting bill is nothing.

But for a solo founder building a free community tool that makes $0 in revenue, that bill is a trap. Once you upgrade, you’re on a treadmill of paying hosting bills for traffic that isn’t paying you back yet.

I made a rule when I started building: never let infrastructure hold your indie project hostage.

Instead of pulling out my credit card, I grabbed a cup of coffee and decided to migrate the entire application to Cloudflare Workers using OpenNext.

It wasn’t easy. Cloudflare’s edge runtime has strict compatibility rules. I had to fix node module shims, rebuild the deployment pipeline, and wire up custom domains.

By the end of the night:

• The site was back online.
• Pages load in milliseconds across Cloudflare’s global edge.
• Monthly hosting cost: $0.

20 launches and counting

Today, Hauntboard reached a milestone I’m quietly proud of: 20 indie products are live on the board.

These aren’t venture-backed apps with $50,000 ad budgets. They are real tools built by solo makers:

• A tool that turns bank statements into spreadsheets locally without uploading private data.
• A free image tool that never stores your files.
• A tool that color-grades videos directly in the browser.

Our total numbers right now are small: 20 launches, 9 verified outbound human visits, and 0 fake upvotes.

In the startup world, people love to brag about vanity metrics: “10,000 signups in 48 hours!” But behind closed doors, half of those numbers are bots, family members, or people swapping favors in group chats.

Small, honest numbers beat inflated vanity badges every single day.

My goal: 50 before December

My goal is to get 50 indie products onto Hauntboard before December.

If you’re a solo developer, designer, or maker building something in your spare time, don’t let your work sit quietly in a private GitHub repository.

Don’t spend 24 hours begging for upvotes in Slack channels just to watch your traffic vanish the next morning.

Come put it on the board. A real person will review it, it will stay on the front page for 7 full days, and every single visit we send you will be counted in public.

You can submit it for free here:
👉 hauntboard.com/submit

Don’t be a ghost. Show what you built.

In 3 years of building products, I’ve failed more times than I’ve succeeded.

Here are the most expensive lessons, so you don’t have to pay for them too.

Failure #1: Building for 6 Months Without Talking to Users

What happened: I spent 6 months building a “perfect” MVP. Beautiful design. Clean code. Every feature I could think of.

Launched to zero customers.

The lesson: Build the smallest possible thing that solves a real problem. Then talk to users. Then iterate.

I could have saved 5 months by launching a landing page first.

Failure #2: Competing on Price

What happened: My competitor charged $49/month. I thought I’d win by charging $19/month.

I attracted price-sensitive customers who churned immediately and complained constantly.

The lesson: Competing on price is a race to the bottom. If your only value proposition is “cheaper,” you don’t have a value proposition.

Now I price premium and attract customers who value quality over cost.

Failure #3: Saying Yes to Every Feature Request

What happened: Customer asked for a feature. I built it. Another customer asked for something different. Built that too.

Six months later, I had a Frankenstein product that did everything poorly and nothing well.

The lesson: Feature requests are data, not commands. Look for patterns. One request might be noise. Ten requests for the same thing is signal.

Failure #4: Ignoring Churn Until It Was Too Late

What happened: I was so focused on acquisition that I ignored my churn rate. I thought growth would solve everything.

It didn’t. I was filling a leaky bucket.

The lesson: Churn is the silent killer. Track it religiously. Fix it before you focus on growth.

A 5% monthly churn rate sounds small. It means you lose 46% of your customers every year.

Failure #5: The “Launch on Product Hunt” Fantasy

What happened: I thought launching on Product Hunt would make or break my product. I obsessed over the launch day, coordinated votes, wrote the perfect copy.

Got 200 upvotes. 50 signups. 2 conversions. Both churned within a month.

The lesson: Product Hunt is a event, not a strategy. It’s good for a boost, but it won’t save a mediocre product or replace consistent marketing.

Build distribution before you need it.

Failure #6: Solo Founding When I Needed Help

What happened: I thought I could do everything myself. Code. Design. Marketing. Sales. Support.

I burned out within a year.

The lesson: Know your limits. Either find a cofounder who complements your skills, or outsource what you’re bad at.

The “solopreneur” fantasy is often just a recipe for exhaustion.

Failure #7: Waiting Too Long to Charge

What happened: I offered my product for free for 8 months to “build an audience.” When I finally added pricing, users revolted.

Turns out, people who sign up for free and people who pay are different markets.

The lesson: Charge from day one. Even if it’s $5. You want to attract customers who value your product enough to pay for it.

Free users teach you how to serve free users. Paying customers teach you how to build a business.

Failure #8: Building for Myself, Not the Market

What happened: I built a tool I personally wanted. I was convinced others wanted it too.

They didn’t.

The lesson: You are not your market. Validate demand before building. Talk to potential customers. Look for people actively trying to solve the problem.

If you can’t find 10 people who want to pay, reconsider the idea.

Failure #9: Overcomplicating the Tech Stack

What happened: I used the latest frameworks, microservices, Kubernetes, the works. For an app with 12 users.

I spent more time maintaining infrastructure than building features.

The lesson: Boring tech scales. Use the simplest stack that solves your problem. You can always migrate later when you have the “good problem” of too many users.

A Rails/Next.js/Django monolith will take you to $1M ARR. Microservices can wait.

Failure #10: Not Celebrating Small Wins

What happened: I hit $100 MRR. Didn’t celebrate. Hit $500 MRR. Didn’t celebrate. Hit $1,000 MRR. Thought “still not enough.”

I was miserable at every stage because the goalpost kept moving.

The lesson: Celebrate everything. First user. First dollar. First bad review (it means people are using it!). First failure.

This is why I built HackerBadges. To create a ritual of celebration. To make progress feel real.

And yes, we even have Failure Badges. Because surviving failure is itself an achievement.

The Meta Lesson

Failure is the tuition fee for success. Every failed product taught me something I couldn’t have learned any other way.

The founders who succeed aren’t the ones who avoid failure. They’re the ones who fail faster, learn quicker, and keep going.

So if you’re in the middle of a failure right now: good. You’re learning. You’re growing. You’re doing it right.

Celebrate your failures with us:

Create a Failure Badge →

Building HackerBadges in public. Follow: @iPritamX

Tags: Startups, Failure, Lessons Learned, Entrepreneurship, Indie Hackers

I’m going to say something controversial.

The most successful founders I know are the ones who proudly display their failures.

Not hide them. Display them.

The Toxic Positivity of Startup Twitter

Scroll through any indie hacker timeline. What do you see?

• “$50K MRR! 🚀”
• “Quit my job! Living the dream! 🎉”
• “Just raised $2M! Let’s go! 💪”

It’s an endless highlight reel. Everyone’s winning. All the time. Forever.

Here’s the problem: it’s complete bullshit.

Behind every “$50K MRR” tweet, there were probably:

• 3 failed products
• 2 years of zero revenue
• 1 near-bankruptcy
• Countless sleepless nights
• A partner who almost left
• A mental breakdown or two

But we don’t tweet about those. Because failure is embarrassing. Because it doesn’t get likes. Because we’re performing success instead of living it.

The Rise of Failure Culture

Something is shifting, though. The smartest founders are starting to share their L’s publicly:

• Pieter Levels talking about products that flopped
• Sahil Lavingia writing about Gumroad’s struggles
• Indie hackers sharing “$0 MRR months”

Why? Because they discovered something counterintuitive:

Failures build more trust than wins.

Why Failures Work Better Than Wins

1. Authenticity is Rare

Everyone claims wins. Few admit losses. When you share a failure, you immediately stand out as real.

2. Relatability Creates Connection

Know what’s alienating? Hearing about someone’s “$100K month” when you’re struggling to get your first customer.

Know what’s connecting? Hearing someone say “I’ve been building for 8 months and still have $0 in revenue. Here’s what I’m learning.”

3. Vulnerability = Likability

There’s psychological research on this. People like you more when you’re vulnerable. It’s called the Pratfall Effect. A competent person who shows weakness is more likable than a competent person who seems perfect.

4. Memes Spread Faster Than Humble Brags

A tweet saying “ACHIEVED $10K MRR!!!” gets likes from supportive friends.

A tweet saying “Just got my first refund. Customer said my product ‘barely functioned.’ 💀” gets engagement from everyone, because it’s funny, relatable, and real.

Introducing Failure Badges

This is why we built Failure Badges.

Not as a joke (though they’re funny). As a philosophy.

Every failure deserves recognition.

Because:

• Your first pivot means you’re adaptable
• Your $0 MRR month means you’re still in the game
• Your product shutdown means you learned what NOT to build
• Your first angry customer means you have customers

The Failure Badge Categories

We created templates for every type of startup failure:

💸 Revenue Failures

• “$0 MRR this month”
• “Burned through savings”
• “First refund request”

🚀 Product Failures

• “Launched to crickets”
• “Feature nobody wanted”
• “Pivot #7”

❌ Validation Failures

• “0 waitlist signups”
• “Market said no”
• “Built for myself only”

👋 Customer Failures

• “First churn”
• “Negative NPS”
• “Ghost customer”

😵 Founder Failures

• “Burnout month”
• “Almost quit”
• “Imposter syndrome peak”

💀 Epic Failures

• “Shutdown complete”
• “Cofounder quit”
• “Domain expired”

How to Use Failure Badges

1. For Authenticity

Share a failure badge alongside your wins. It makes everything more believable.

2. For Community Building

Start a thread: “My failures this year” with failure badges. Watch how many founders relate.

3. For Perspective

Looking at your failure badges reminds you how far you’ve come. Every failure you survived made you stronger.

4. For Humor

Let’s be honest: startup life is absurd. Might as well laugh at it.

The Failure Hall of Fame

On the HackerBadges homepage, we now have a “Failure Hall of Fame” section.

Right there, below the win badges.

Because we refuse to hide failures at the bottom of the page. They deserve equal billing.

Join the Movement

I’m calling on every founder reading this to do one thing:

Share a failure this week.

Not a humble brag disguised as a failure (“I’m so exhausted from all my success!”). An actual, real failure.

• A product that flopped
• A month with no sales
• A customer who churned
• A launch that bombed

Then create a badge for it. Display it proudly. Own your L’s.

Because the founders who embrace failure are the ones who eventually succeed.

And that’s the truth nobody wants to admit.

Ready to celebrate your failures?

Create Your Failure Badge →

Building HackerBadges in public. Following the journey: @iPritamX

Tags: Startups, Entrepreneurship, Failure, Build in Public, Indie Hackers

Scroll through any indie hacker timeline. You’ll see it everywhere:

“Just hit $10K MRR! 🚀💰”

Attached: A Stripe dashboard screenshot.

Or worse: Just text. No proof. Just vibes.

I’ve always found this… unsatisfying. Not because I don’t believe people, but because there has to be a better way.

So I built one.

The Problem with Screenshots

Let me be clear: I’m not accusing anyone of lying. Most founders sharing revenue are honest.

But screenshots have problems:

1. They’re ugly

Stripe’s dashboard wasn’t designed to be shared. It’s functional, not beautiful. Sharing a screenshot of analytics feels… lazy?

2. They lack context

“$10K MRR” means nothing without context. Is that up or down from last month? How long did it take? What’s the churn rate?

3. They’re not verifiable

Anyone with basic Photoshop skills can fake a dashboard. This erodes trust across the entire community.

4. They’re temporary

A screenshot only shows a moment in time. There’s no consistent way to track or display your journey.

What I Built Instead

I created HackerBadges — a way to create beautiful, verified achievement badges for startup milestones.

Here’s how it works:

1. Connect your payment provider (Stripe, LemonSqueezy, or Polar)
2. We fetch your actual revenue data
3. Badges are marked “Verified” when connected to real data
4. Share beautiful badges instead of ugly screenshots

The key difference: when someone sees a verified badge, they know it’s real. It’s not a screenshot I made in Canva. It’s pulled from actual data.

The Verification Problem

Why does verification matter?

The indie hacker community is built on trust. We share our numbers. We celebrate each other’s wins. We learn from each other’s failures.

But that trust relies on honesty. When people fake numbers — and some do — it poisons the well. New founders see inflated success stories and feel inadequate. Real achievements get lost in the noise.

Verification is a solution. If your $10K MRR badge is connected to your actual Stripe account, there’s no question. It’s real.

But It’s Not Just About Verification

I’ll admit something: I initially thought verification was the whole product.

I was wrong.

After building and launching, I discovered the real value isn’t just verification. It’s ritualized celebration.

The act of creating a badge when you hit a milestone — even a small one — changes how you feel about your progress. It’s not just about proving something to others. It’s about acknowledging something to yourself.

My $38 MRR badge matters to me. Not because anyone else cares about $38. But because I took the time to recognize my own progress.

The Features People Actually Use

I thought people would love:

• Rarity tiers (Common → Legendary)
• Multiple badge styles
• Leaderboards

And they do. But the features that get used most?

1. Basic badge creation — Just making a badge for a milestone
2. Sharing to X/Twitter — One-click export to social
3. Badge pages — Public pages people can link to

Simple stuff. The gamification is nice, but the core utility is just: “I hit a thing, I want a badge for it.”

What I Learned

Building this taught me a few things:

1. Verification is a feature, not the product

I thought “verified badges” was the hook. Turns out, most people just want beautiful badges. Verification is a bonus.

2. Simple beats complex

I added rarity tiers, leaderboards, streaks… all fun stuff. But 80% of value comes from basic badge creation + sharing.

3. Celebrate your own milestones

Eating my own cooking here. Using the product myself reminded me why I built it. Every milestone matters.

Try It

If you’re an indie hacker, founder, or anyone building something:

1. Go to hackerbadges.com
2. Create a badge for whatever milestone you’ve hit lately
3. Share it

It doesn’t have to be $100K MRR. My first badge was for $38.

Small wins matter. Celebrate them.

Follow the build journey @iPritamX

Tags: Startup, Indie Hackers, SaaS, Build in Public, Product Development

I hit $38 in monthly recurring revenue last week.

Thirty-eight dollars. Not thirty-eight thousand. Just $38.

And I made a badge for it.

Some people might think that’s silly. “Wait until you have something real to celebrate,” they’d say. But here’s the thing: they’re wrong.

The Science of Small Wins

There’s a concept in psychology called the Progress Principle, studied extensively by Teresa Amabile at Harvard Business School. Her research found that of all the things that can boost emotions, motivation, and perceptions during a workday, the single most important is making progress in meaningful work.

Not finishing work. Progress in work.

This is huge for founders. We’re often so focused on the end goal — $10K MRR, 100K users, the big exit — that we forget to acknowledge the steps along the way. And that’s a mistake.

Why We Skip Celebrations

Founders are notorious for moving goalposts:

• “I’ll celebrate when I get my first user” → Gets first user → “I’ll celebrate when I get my first paying customer”
• “I’ll celebrate at $1K MRR” → Hits $1K → “I’ll celebrate at $5K”
• “I’ll celebrate when I quit my job” → Quits job → “I’ll celebrate when I’m profitable”

The celebration never comes. There’s always another milestone ahead.

This isn’t just about being humble. It’s self-sabotage. You’re training your brain that no achievement is ever enough.

The Dopamine Problem

Your brain runs on dopamine. When you accomplish something and acknowledge it, you get a dopamine hit. That dopamine reinforces the behavior that led to the accomplishment.

But if you never acknowledge your wins:

• No dopamine
• No positive reinforcement
• No motivation to continue
• Burnout

It’s a vicious cycle.

The Fix: Ritualized Celebration

The solution isn’t to throw a party every time you get a signup. It’s to create small rituals that acknowledge progress without breaking your flow.

Here’s what works:

1. Visual Markers

Create something visible that marks your progress. This could be:

• A badge you display
• A chart on your wall
• A screenshot saved to a “wins” folder
• A progress bar somewhere visible

I built HackerBadges specifically for this. When I hit a milestone, I create a badge and share it. It takes 30 seconds, but it gives my brain the “yes, this matters” signal it needs.

2. Public Acknowledgment

Building in public isn’t just for audience growth. It’s for accountability and celebration.

When you tweet “Just hit $500 MRR 🎉”, you’re not just informing the world. You’re:

• Cementing the win in your memory
• Getting social validation (which releases more dopamine)
• Creating a record of your journey

3. Milestone Definitions

Pre-define what counts as a milestone for you:

StageMilestonesPre-revenueFirst user, first feedback, first bug reportEarly revenueFirst dollar, $100 MRR, $500 MRRGrowth$1K, $2.5K, $5K, $10K MRRScale$25K, $50K, $100K MRR

Having clear milestones means you know when to celebrate. No ambiguity.

4. Failure Milestones

This one’s counterintuitive, but important: celebrate failures too.

Your first refund? Milestone. Your first pivot? Milestone. Your first $0 MRR month? Milestone.

Why? Because surviving failure is itself progress. You’re still here. You’re still building. That matters.

The Real Reason I Built HackerBadges

I could tell you I built HackerBadges because I saw a gap in the market. That’s partly true.

But the real reason is simpler: I needed it.

I was building in public, hitting small milestones, and feeling like none of it mattered. I’d screenshot my Stripe dashboard, feel a brief moment of satisfaction, then immediately think about the next goal.

The badge changed that.

When I created a visual marker of my progress — something I could look at, share, and point to — it felt real. The $38 wasn’t just a number anymore. It was an achievement.

Try It Yourself

You don’t need a fancy tool to start celebrating milestones. You could:

1. Keep a “wins” journal
2. Screenshot every milestone
3. Tweet your progress (with specific numbers)
4. Create a visual wall of achievements

Or, if you want something more structured:

Create your first badge for whatever milestone you’ve hit lately. It doesn’t matter how small. What matters is acknowledging the progress.

Because progress, celebrated, leads to more progress.

And that’s how you build something real.

Building HackerBadges in public. Follow the journey @iPritamX.

Tags: Entrepreneurship, Psychology, Startups, Motivation, Indie Hackers

Every indie hacker knows the feeling.

You hit $1K MRR. You want to celebrate. You screenshot your Stripe dashboard and post it on Twitter.

But there’s a problem: anyone can fake a screenshot.

That’s why I built HackerBadges.

The Problem

The indie hacker community loves transparency. We share our revenue numbers, our user counts, our wins and losses.

But there’s no standard way to do it.

Some people screenshot Stripe. Others use Baremetrics. Some just… type numbers. And honestly? There’s no way to know what’s real.

I wanted something better:

• Beautiful — Not an ugly dashboard screenshot
• Verified — Actually connected to real data
• Shareable — Works on Twitter, LinkedIn, websites
• Celebratory — Makes milestones feel like achievements

So I built it.

The Build

I’m a firm believer in shipping fast and iterating.

Week 1: MVP

I started with the simplest possible thing: a badge generator. You type in your milestone, pick a style, and get a badge you can download.

No accounts. No payments. Just badges.

I shipped it in a week and posted on Twitter.

Week 2–3: Verification

The feedback was immediate: “Cool, but how do I know it’s real?”

So I added integrations:

• Connect your Stripe account
• We fetch your actual revenue
• The badge shows “Verified by Stripe” ✓

Now when you share a $5K MRR badge, people know it’s legit.

Week 4: Polish

I added:

• Multiple badge styles (Neo-brutalist, Glassmorphism, Holographic)
• Rarity tiers (Common, Rare, Epic, Legendary)
• Milestone tracking (auto-generate badges when you hit goals)
• Support for LemonSqueezy and Polar

The Tech Stack

For those curious about how it’s built:

• Frontend: Next.js 15 (App Router)
• Backend: Convex (real-time database)
• Auth: Convex Auth
• Payments: Stripe, LemonSqueezy, Polar integrations
• Hosting: Vercel
• Styling: Tailwind CSS

Why Convex? I wanted real-time updates without the pain of managing sockets. When your revenue updates in Stripe, your badge can update instantly. Convex makes that trivial.

What I Learned

1. Build for yourself first

I’m an indie hacker. I wanted to celebrate my milestones. So I built the tool I wished existed.

When you’re your own target user, every decision is easier.

2. Verification is a feature

There are thousands of badge generators online. None of them verify anything.

That one feature — connecting to real payment data — is what makes HackerBadges different. It’s not just about looking pretty; it’s about being trustworthy.

3. Community matters

The indie hacker community is incredibly supportive. When I shared my progress on Twitter, people gave feedback, suggestions, and encouragement.

Build in public. It works.

4. Fun is underrated

Badges are inherently fun. There’s something satisfying about earning a “Legendary $100K MRR” badge with a golden glow.

Gamification works because humans like recognition. Don’t be afraid to make your product enjoyable.

What’s Next

I’m working on:

• Failure Badges — Celebrate the L’s, not just the W’s (“Pivot #7”, “$0 MRR This Month”)
• Product Pages — A portfolio for your startup journey
• GitHub Stats — Badges for developers (stars, commits, contributions)

The goal is to become the go-to platform for indie hackers to showcase their journey.

Try It Yourself

If you’re an indie hacker with milestones to celebrate:

1. Go to hackerbadges.com
2. Create a badge (free, no signup required)
3. Or connect your Stripe/LemonSqueezy for verified badges

Every milestone deserves recognition. Big or small.

If you found this useful, give it a clap and follow for more indie hacker content. Building in public at @iPritamX.

A modern, responsive portfolio template built with Next.js, TypeScript, and Tailwind CSS. This template is designed to showcase your skills, projects, and professional experience with a clean and elegant UI.

Features

• Modern UI Design: Clean, minimal interface with smooth animations and transitions
• Responsive Layout: Looks great on all devices from mobile to desktop
• Dark/Light Mode: Built-in theme-switching capability
• Section-Based Structure: Organized sections for introduction, about, projects, skills, experience, services, and contact
• Custom Icons: Unique icons for each section using Lucide React
• Interactive Components: Spotlight cards, project showcases, and more
• SEO Optimized: Ready for search engine visibility
• Fast Performance: Built on Next.js for optimal loading speeds

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Icons: Lucide React, React Icons
• Animations: CSS Animations, Framer Motion
• Deployment: Vercel

Visit https://artifactui.in/templates to get the Portfolio Template and customize it to your requirements.

In today’s fast-paced digital landscape, creating visually stunning and highly interactive web experiences is no longer a luxury — it’s an expectation. Developers constantly seek tools to help them build beautiful interfaces without sacrificing performance or accessibility. Enter Artifact UI, a modern component library designed to transform how developers build websites, web applications, and user interfaces.

What is Artifact UI?

Artifact UI is a comprehensive UI component library built with React, Tailwind CSS, and Framer Motion. It provides developers with a collection of beautifully designed, highly interactive components that can be easily integrated into any React project. The library focuses on aesthetics and performance, offering a modern design system that works seamlessly across devices and screen sizes.
Unlike traditional component libraries that often prioritize functionality over visual appeal, Artifact UI places equal emphasis on both. Each component is meticulously crafted to provide a delightful user experience while maintaining excellent performance and accessibility.

Components

Artifact UI offers 50+ rich collections of components that go beyond basic UI elements. Here are some components that showcase the library’s capabilities:

1. Cursor Spotlight —https://artifactui.in/docs/components/cursor-spotlight
2. Particle Veil — https://artifactui.in/docs/components/particle-veil
3. Icon Text — https://artifactui.in/docs/components/icon-text-substitution
4. Swipe Cards — https://artifactui.in/docs/components/swipe-cards
5. Magnetic Card — https://artifactui.in/docs/components/magnetic-card
6. Infinite Scroll — https://artifactui.in/docs/components/infinite-scroll
7. Sense Card — https://artifactui.in/docs/components/sense-card
8. Ghost Text — https://artifactui.in/docs/components/ghost-text
9. Starfall — https://artifactui.in/docs/components/starfall
10. Sphere Animation — https://artifactui.in/docs/components/sphere-animation

( Many more )

Real-World Applications

Artifact UI is versatile enough to be used in various types of projects:

• Marketing Websites: Create engaging landing pages with interactive components that capture visitors attention.
• Web Applications: Build feature-rich applications with consistent, beautiful UI elements.
• E-commerce Platforms: Showcase products with interactive cards and spotlight effects.
• Portfolios and Creative Websites: Implement unique interactions and animations to showcase creative work.
• Documentation Sites: Enhance user experience with sticky reveal containers and interactive elements

Conclusion

Artifact UI represents a modern approach to UI development, combining aesthetics, performance, and developer experience into a comprehensive library. Whether you’re building a simple marketing website or a complex web application, Artifact UI provides the tools you need to create beautiful, interactive interfaces that engage users and elevate your brand.

By embracing React, Tailwind CSS, and Framer Motion, Artifact UI leverages the best of modern web technologies to help developers build the next generation of web experiences. As the web continues to evolve, tools like Artifact UI will play a crucial role in shaping how we interact with digital content.

Visit artifactui.in to explore the full documentation, examples, and component showcase, and start building beautiful interfaces today.

Thank you!

In this article, We’ll be creating a weather search application using Next.js and Redux Toolkit. This project is a practical way to learn how to build a dynamic web application with powerful state management. We’ll also use Tailwind CSS for styling, making the UI responsive and visually appealing.

Setting Up the Project

Let’s start by setting up our Next.js project. First, create a new Next.js application using the following command:

npx create-next-app@latest weather-app

After the project is created, navigate to the project directory:

cd weather-app

Next, we’ll install the necessary dependencies:

npm install @reduxjs/toolkit react-redux lucide-react axios

Project Structure

Our project will follow a well-organized structure, making it easy to manage and scale. Here’s how it’s set up:

weather-search-app/
│
├── .next/                 # Next.js build output (generated, don't edit)
├── node_modules/          # Node.js dependencies (generated)
├── public/                # Static files
│   └── favicon.ico
│
├── src/
│   ├── app/
│   │   ├── layout.tsx     # Root layout component
│   │   ├── page.tsx       # Home page component
│   │   ├── globals.css    # Global styles (moved to the same level as layout.tsx)
│   │   └──weather/[location]/
│   │       └── page.tsx   # Dynamic route for weather details page
│   │
│   ├── components/
│   │   ├── AutocompleteList.tsx
│   │   ├── SearchBox.tsx
│   │   └── ui/            # ui components
│   │       ├── alert.tsx
│   │       ├── card.tsx
│   │     
│   │
│   ├── lib/
│   │   └── store/
│   │       ├── Provider.tsx   # Redux Provider component
│   │       ├── store.ts       # Redux store configuration
│   │       └── weatherSlice.ts  # Weather-related Redux slice
│   │
│   ├── utils/                # Utility functions and types
│   │   ├── api.ts            # API utility functions
│   │   └── types.ts          # TypeScript types
│
├── .env.local             # Local environment variables (not in version control)
├── .eslintrc.json         # ESLint configuration
├── .gitignore             # Git ignore file
├── next.config.js         # Next.js configuration
├── package.json           # Project dependencies and scripts
├── postcss.config.js      # PostCSS configuration (for Tailwind)
├── README.md              # Project documentation
├── tailwind.config.js     # Tailwind CSS configuration
└── tsconfig.json          # TypeScript configuration

1. First, let’s start with our root layout:

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ReduxProvider } from "@/lib/store/provider";

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

export const metadata: Metadata = {
  title: "Weather Search",
  description: "Search for weather information",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ReduxProvider>
          <main className="bg-white w-full h-screen">{children}</main>
        </ReduxProvider>
      </body>
    </html>
  );
}

2. Now, let’s create our home page:

import React from 'react'
import AutocompleteList from '@/components/AutocompleteList'
import SearchBox from '@/components/SearchBox'
import { Sun, Cloud, CloudRain } from 'lucide-react'

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen bg-gradient-to-b from-blue-100 to-white">
      <main className="flex-grow flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
        <div className="max-w-md w-full space-y-8">
          <div className="text-center">
            <h1 className="mt-6 text-5xl font-extrabold text-gray-900">
              Weather Search
            </h1>
            <p className="mt-2 text-sm text-gray-600">
              Enter a location to get instant weather information
            </p>
          </div>
          
          <div className="mt-8 space-y-6">
            <SearchBox />
            <AutocompleteList />
          </div>
          
          <div className="flex justify-center space-x-4 mt-12">
            <Sun className="text-yellow-400 w-12 h-12" />
            <Cloud className="text-gray-400 w-12 h-12" />
            <CloudRain className="text-blue-400 w-12 h-12" />
          </div>
        </div>
      </main>

      <footer className="w-full py-4 text-center text-sm text-gray-500 bg-white bg-opacity-50">
        <p>© 2024 Weather Search App. All rights reserved.</p>
        <p className="mt-1">Powered by WeatherUnion</p>
      </footer>
    </div>
  )
}

3. Let’s go to the components folder and create our components:

i. SearchBox component: The SearchBox component is responsible for capturing user input. It allows users to type in the name of a location, triggering an autocomplete feature that suggests possible matches.

'use client'

import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useDispatch } from 'react-redux'
import { searchLocalitiesAsync } from '@/lib/store/weatherSlice'
import { AppDispatch } from '@/lib/store/store'

const SearchBox: React.FC = () => {
  const [localSearchTerm, setLocalSearchTerm] = useState('')
  const router = useRouter()
  const dispatch = useDispatch<AppDispatch>()

  useEffect(() => {
    if (localSearchTerm) {
      dispatch(searchLocalitiesAsync(localSearchTerm))
    }
  }, [localSearchTerm, dispatch])

  return (
    <form onSubmit={(e) => e.preventDefault()} className="w-full max-w-md">
      <div className="relative">
        <input
          type="text"
          value={localSearchTerm}
          onChange={(e) => setLocalSearchTerm(e.target.value)}
          className="w-full px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-slate-950"
          placeholder="Search for a location..."
        />
        <button
          type="submit"
          className="absolute right-0 top-0 mt-3 mr-4 text-gray-500 hover:text-gray-700"
        >
          <svg className="h-5 w-5" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </button>
      </div>
    </form>
  )
}

export default SearchBox

ii. Now, let’s create our AutocompleteList component: The AutocompleteList component displays suggestions as the user types in the SearchBox. When a user selects a suggestion, the application fetches and displays the weather data for that location.

'use client'

import React from 'react'
import { useSelector } from 'react-redux'
import Link from 'next/link'
import { RootState } from '@/lib/store/store'

const AutocompleteList: React.FC = () => {
  const { suggestions } = useSelector((state: RootState) => state.weather)

  if (suggestions.length === 0) return null

  return (
    <ul className="mt-2 w-full max-w-md max-h-[300px] overflow-y-scroll bg-white border border-gray-300 rounded-lg shadow-lg">
      {suggestions.map((suggestion) => (
        <li key={suggestion.id} className="px-4 py-2 hover:bg-gray-100">
          <Link href={`/weather/${encodeURIComponent(suggestion.id)}`}>
            {suggestion.name}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default AutocompleteList

iii. Reuseable card component:

import React, { ReactNode } from "react";

interface CardProps {
  children: ReactNode;
  className?: string;
}

export const Card = ({ children, className }: CardProps) => {
  return (
    <div className={`bg-white shadow-md rounded-lg", ${className}`}>
      {children}
    </div>
  );
};

interface CardContentProps {
  children: ReactNode;
  className?: string;
}

export const CardContent = ({ children, className }: CardContentProps) => {
  return <div className={`${className}`}>{children}</div>;
};

interface CardHeaderProps {
  children: ReactNode;
  className?: string;
}

export const CardHeader = ({ children, className }: CardHeaderProps) => {
  return <div className={`border-b", ${className}`}>{children}</div>;
};

interface CardTitleProps {
  children: ReactNode;
  className?: string;
}

export const CardTitle = ({ children, className }: CardTitleProps) => {
  return (
    <h2 className={`text-lg font-semibold", ${className}`}>{children}</h2>
  );
};

iv. Alert component:

import React, { ReactNode } from "react";

interface AlertProps {
  children: ReactNode;
  variant?: "default" | "destructive";
}

export const Alert = ({ children, variant = "default" }: AlertProps) => {
  return (
    <div
      className={`p-4 rounded-lg flex items-start space-x-3",
        ${variant === "destructive" ? "bg-red-100 text-red-700" : "bg-gray-100 text-gray-700"}
      `}
    >
      {children}
    </div>
  );
};

interface AlertTitleProps {
  children: ReactNode;
  className?: string;
}

export const AlertTitle = ({ children, className }: AlertTitleProps) => {
  return (
    <h3 className={`text-lg font-semibold", ${className}`}>{children}</h3>
  );
};

interface AlertDescriptionProps {
  children: ReactNode;
  className?: string;
}

export const AlertDescription = ({
  children,
  className,
}: AlertDescriptionProps) => {
  return (
    <div className={`text-sm", ${className}`}>{children}</div>
  );
};

4. Now Let’s do State Management with Redux Toolkit:

To manage our application’s state, we’ll use the Redux Toolkit. We start by creating a slice src/lib/store/ to manage weather-related data. The Redux store manages the global state of our application, including search terms, suggestions, and weather data.

i. Redux store:

import { configureStore } from '@reduxjs/toolkit'
import weatherReducer from './weatherSlice'

export const store = configureStore({
  reducer: {
    weather: weatherReducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

ii. Redux provider:

'use client'

import { Provider } from 'react-redux'
import { store } from './store'

export function ReduxProvider({ children }: { children: React.ReactNode }) {
  return <Provider store={store}>{children}</Provider>
}

iii. Weather Slice:

import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { fetchWeatherByCoordinates, fetchWeatherByLocality, searchLocalities } from '@/utils/api';
import { WeatherData } from '@/utils/types';

interface WeatherState {
  searchTerm: string;
  suggestions: Array<{ id: string; name: string }>;
  weatherData: WeatherData | null;
  loading: boolean;
  error: string | null;
}

const initialState: WeatherState = {
  searchTerm: '',
  suggestions: [],
  weatherData: null,
  loading: false,
  error: null,
};

export const fetchWeatherByCoordinatesAsync = createAsyncThunk(
  'weather/fetchByCoordinates',
  async ({ latitude, longitude }: { latitude: number; longitude: number }) => {
    const response = await fetchWeatherByCoordinates(latitude, longitude);
    return response as WeatherData;
  }
);

export const fetchWeatherByLocalityAsync = createAsyncThunk(
  'weather/fetchByLocality',
  async (localityId: string) => {
    const response = await fetchWeatherByLocality(localityId);
    return response as WeatherData;
  }
);

export const searchLocalitiesAsync = createAsyncThunk(
  'weather/searchLocalities',
  async (query: string) => {
    const response = await searchLocalities(query);
    return response;
  }
);

const weatherSlice = createSlice({
  name: 'weather',
  initialState,
  reducers: {
    setSearchTerm(state, action: PayloadAction<string>) {
      state.searchTerm = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchWeatherByCoordinatesAsync.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchWeatherByCoordinatesAsync.fulfilled, (state, action) => {
        state.weatherData = action.payload;
        state.loading = false;
      })
      .addCase(fetchWeatherByCoordinatesAsync.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || 'Failed to fetch weather data';
      })
      .addCase(fetchWeatherByLocalityAsync.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchWeatherByLocalityAsync.fulfilled, (state, action) => {
        state.weatherData = action.payload;
        state.loading = false;
      })
      .addCase(fetchWeatherByLocalityAsync.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || 'Failed to fetch weather data';
      })
      .addCase(searchLocalitiesAsync.fulfilled, (state, action) => {
        state.suggestions = action.payload;
      });
  },
});

export const { setSearchTerm } = weatherSlice.actions;

export default weatherSlice.reducer;

5. let’s create our API utility functions:

We’ve created utility functions api.ts for interacting with the Weather Union API.

import axios from "axios";

const API_KEY = process.env.NEXT_PUBLIC_WEATHER_API_KEY;
const BASE_URL = "https://www.weatherunion.com/gw/weather/external/v0";

export const fetchWeatherByCoordinates = async (
  latitude: number,
  longitude: number
) => {
  const options = {
    method: "GET",
    url: `${BASE_URL}/get_weather_data`,
    params: { latitude, longitude },
    headers: { "X-Zomato-Api-Key": API_KEY },
  };

  try {
    const { data } = await axios.request(options);
    return data;
  } catch (error) {
    console.error("Error fetching weather data:", error);
    throw error;
  }
};

export const fetchWeatherByLocality = async (localityId: string) => {
  const options = {
    method: "GET",
    url: `${BASE_URL}/get_locality_weather_data`,
    params: { locality_id: localityId },
    headers: { "X-Zomato-Api-Key": API_KEY },
  };

  try {
    const { data } = await axios.request(options);
    return data;
  } catch (error) {
    console.error("Error fetching weather data:", error);
    throw error;
  }
};

export const searchLocalities = async (query: string) => {
  return [
    { id: "ZWL001156", name: "New York", country: "United States" },
    { id: "ZWL008975", name: "Mumbai", country: "India" },
    { id: "ZWL007486", name: "Delhi", country: "India" },
    { id: "ZWL005087", name: "Gurgaon", country: "India" },
    { id: "ZWL005375", name: "Bangalore", country: "India" },
    { id: "ZWL007934", name: "Kolkata", country: "India" },
    { id: "ZWL006743", name: "Pune", country: "India" },
    { id: "ZWL003283", name: "Hyderabad", country: "India" },
    { id: "ZWL007059", name: "Chennai", country: "India" },
    { id: "ZWL003455", name: "Ahmedabad", country: "India" },
    { id: "ZWL006687", name: "Chandigarh", country: "India" },
    { id: "ZWL002150", name: "Goa", country: "India" },
    { id: "ZWL006900", name: "Bhopal", country: "India" },
    { id: "ZWL002155", name: "Surat", country: "India" },
    { id: "ZWL008753", name: "Jammu", country: "India" },
    { id: "ZWL008938", name: "Vadodara", country: "India" },
    { id: "ZWL009668", name: "Coimbatore", country: "India" },
    { id: "ZWL008906", name: "Bhubaneswar", country: "India" },
  ].filter((locality) =>
    locality.name.toLowerCase().includes(query.toLowerCase())
  );
};

Remember to create a .env.local file in your project root and add your Weather Union API key, visit https://www.weatherunion.com to get the key:

NEXT_PUBLIC_WEATHER_API_KEY=your_api_key_here

6. Let’s create a types.ts file for our custom types:

export interface WeatherData {
  locality_weather_data: {
    temperature: number,
    humidity: number,
    wind_speed: number,
    wind_direction: number,
    rain_intensity: number,
    rain_accumulation: number
  }
  }

7. Finally, Let’s create our weather page:

The weather page ([location]/page.tsx) fetches and displays weather data for the selected location.

"use client";

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState, AppDispatch } from "@/lib/store/store";
import { fetchWeatherByLocalityAsync } from "@/lib/store/weatherSlice";
import Link from "next/link";
import { Cloud, Droplets, Wind, Umbrella } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

const WeatherPage = ({ params }: { params: { location: string } }) => {
  const dispatch = useDispatch<AppDispatch>();
  const { weatherData, loading, error, suggestions } = useSelector(
    (state: RootState) => state.weather
  );

  useEffect(() => {
    if (params.location && typeof params.location === "string") {
      dispatch(fetchWeatherByLocalityAsync(params.location));
    }
  }, [params.location, dispatch]);

  const name = suggestions.find((suggestion) => suggestion.id === params.location)?.name;

  if (!weatherData) return null;

  const getWeatherIcon = (temperature: number) => {
    if (temperature > 30) return "☀️";
    if (temperature > 20) return "🌤️";
    if (temperature > 10) return "⛅";
    return "☁️";
  };

  const getWindDirection = (degrees: number) => {
    const directions = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
    return directions[Math.round(degrees / 45) % 8];
  };

  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl ">
      <h1 className="text-4xl font-bold mb-6 text-center text-gray-900">{name}&apos;s Weather</h1>
      
      {error ? (
        <Alert variant="destructive">
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      ) : loading ? (
        <div className="text-center mt-8">
          <div className="animate-spin rounded-full h-20 w-20 border-b-2 border-gray-900 mx-auto"></div>
          <p className="mt-4 text-lg sm:text-xl text-gray-900">Loading weather data...</p>
        </div>
      ) : (
        <div className="space-y-6">
          <Card className="bg-gradient-to-br from-blue-500 to-purple-600 text-white p-6 rounded-md">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-4xl sm:text-6xl font-bold">
                    {weatherData?.locality_weather_data.temperature}°C
                  </p>
                  <p className="text-lg sm:text-xl mt-2">Feels comfortable</p>
                </div>
                <div className="text-7xl md:text-8xl">
                  {getWeatherIcon(weatherData?.locality_weather_data.temperature)}
                </div>
              </div>
            </CardContent>
          </Card>

          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
            <Card className="p-4">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Humidity</CardTitle>
                <Droplets className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-xl sm:text-2xl font-bold">{weatherData?.locality_weather_data.humidity}%</div>
              </CardContent>
            </Card>
            <Card className="p-4">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Wind</CardTitle>
                <Wind className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-xl sm:text-2xl font-bold">{weatherData?.locality_weather_data.wind_speed} km/h</div>
                <p className="text-xs text-muted-foreground">
                  Direction: {getWindDirection(weatherData?.locality_weather_data.wind_direction)}
                </p>
              </CardContent>
            </Card>
            <Card className="p-4">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Rain Intensity</CardTitle>
                <Cloud className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-xl sm:text-2xl font-bold">{weatherData?.locality_weather_data.rain_intensity} mm/h</div>
              </CardContent>
            </Card>
            <Card className="p-4">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">Rain Accumulation</CardTitle>
                <Umbrella className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-xl sm:text-2xl font-bold">{weatherData?.locality_weather_data.rain_accumulation} mm</div>
              </CardContent>
            </Card>
          </div>

          <Link
            href="/"
            className="inline-block w-full text-center py-3 bg-slate-950 text-white rounded-lg hover:bg-gray-900 transition duration-300"
          >
            Back to Search
          </Link>
        </div>
      )}
    </div>
  );
};

export default WeatherPage;

If you are curious about globals.css and tailwind.config.js, then

//globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

body {
  color: black;
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}



//tailwind.config.js
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

By following this article, you will learn about how to build a weather search application with Next.js, Redux Toolkit, and Tailwind CSS. This project not only demonstrates how to manage state and fetch data but also how to structure a scalable web application. Feel free to experiment with the code and extend the functionality to suit your needs.

Thank you for reading this article. if you like this project, then visit GitHub and give it a star: GitHub Link: https://github.com/PrtHub/weather-app

Want to connect with me:

- Twitter: [https://x.com/PritamGhosh010]
- LinkedIn: [https://www.linkedin.com/in/pritam-ghosh-dev]
- GitHub: [https://github.com/PrtHub]

Don’t hesitate to reach out if you have any questions or want to discuss web development further. I’m always happy to connect with fellow developers and tech enthusiasts!

When building web applications with the MERN stack (MongoDB, Express, React, Node.js), handling user authentication is crucial. Authentication helps secure your app by ensuring that only authorized users can access specific resources. In this comprehensive guide, we’ll explore five key authentication methods for MERN applications, providing insights and code snippets to help you implement robust security in your projects.

1. Token-Based Authentication (JWT)

JSON Web Tokens (JWT) are a popular way to handle authentication. After a user logs in, the server generates a JWT and sends it to the client. The client then includes this token in the Authorization header of subsequent requests.

Backend(Node/Express):

const jwt = require('jsonwebtoken');
const express = require('express');
const app = express();

app.post('/login', (req, res) => {
  // Verify user credentials
  const user = { id: 1, username: 'example' };
  
  const token = jwt.sign(user, 'your-secret-key', { expiresIn: '1h' });
  res.json({ token });
});

function authenticateToken(req, res, next) {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (token == null) return res.sendStatus(401);

  jwt.verify(token, 'your-secret-key', (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
}

app.get('/protected', authenticateToken, (req, res) => {
  res.json({ message: 'Protected route accessed' });
});

Frontend(React):

import axios from 'axios';

const login = async (username, password) => {
  try {
    const response = await axios.post('/login', { username, password });
    localStorage.setItem('token', response.data.token);
  } catch (error) {
    console.error('Login failed', error);
  }
};

const getProtectedData = async () => {
  try {
    const token = localStorage.getItem('token');
    const response = await axios.get('/protected', {
      headers: { Authorization: `Bearer ${token}` }
    });
    console.log(response.data);
  } catch (error) {
    console.error('Failed to get protected data', error);
  }
};

2. Token-Based Authentication (Bearer Tokens)

Similar to JWT, bearer tokens are used for stateless authentication. The client sends the token in the Authorization header of the request. The server verifies the token and grants access based on its validity.

const crypto = require('crypto');
const express = require('express');
const app = express();

const tokens = new Map();

app.post('/login', (req, res) => {
  // Verify user credentials
  const userId = 1; // Assume this is retrieved after verification
  const token = crypto.randomBytes(32).toString('hex');
  tokens.set(token, userId);
  res.json({ token });
});

function authenticateToken(req, res, next) {
  const token = req.headers['authorization']?.split(' ')[1];
  if (!token || !tokens.has(token)) {
    return res.sendStatus(401);
  }
  req.userId = tokens.get(token);
  next();
}

app.get('/protected', authenticateToken, (req, res) => {
  res.json({ message: `Protected route accessed by user ${req.userId}` });
});

3. Session-Based Authentication

The server creates a session for the user and stores session data on the server side, often using sessions stored in a database or in-memory store. A session ID is sent to the client as a cookie. Session-based authentication is useful when you need to store complex session data on the server:

const express = require('express');
const session = require('express-session');
const app = express();

app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}));

app.post('/login', (req, res) => {
  // Verify user credentials
  req.session.userId = 1;
  res.json({ message: 'Logged in successfully' });
});

app.get('/logout', (req, res) => {
  req.session.destroy(err => {
    if (err) {
      return res.json({ message: 'Logout failed' });
    }
    res.json({ message: 'Logged out successfully' });
  });
});

4. Social Authentication

Social authentication allows users to log in using their social media accounts (like Google, Facebook, Twitter). These services provide tokens that the application can use to verify the user’s identity. Here’s an example using Passport.js with Google OAuth:

const express = require('express');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

const app = express();

passport.use(new GoogleStrategy({
    clientID: 'YOUR_GOOGLE_CLIENT_ID',
    clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',
    callbackURL: "http://localhost:3000/auth/google/callback"
  },
  function(accessToken, refreshToken, profile, cb) {
    // Save or update user in your database
    return cb(null, profile);
  }
));

app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] }));

app.get('/auth/google/callback', 
  passport.authenticate('google', { failureRedirect: '/login' }),
  function(req, res) {
    // Successful authentication, redirect home.
    res.redirect('/');
  });

5. Two-Factor Authentication (2FA)

Two-factor authentication adds an extra layer of security by requiring a second form of authentication, such as a code sent to a mobile device or generated by an authenticator app. Here’s a basic implementation using the speakeasy library for Time-based One-Time Password (TOTP):

const speakeasy = require('speakeasy');
const express = require('express');
const app = express();

app.post('/setup-2fa', (req, res) => {
  const secret = speakeasy.generateSecret();
  // Save secret.base32 to the user's record in the database
  res.json({ secret: secret.base32 });
});

app.post('/verify-2fa', (req, res) => {
  const { token, secret } = req.body;
  const verified = speakeasy.totp.verify({
    secret: secret,
    encoding: 'base32',
    token: token
  });
  
  if (verified) {
    // Grant access
    res.json({ verified: true });
  } else {
    res.status(400).json({ verified: false });
  }
});

Conclusion: Selecting the right authentication method depends on your specific requirements. JWTs and Bearer tokens are great for stateless applications, session-based auth provides more flexibility with server-side storage, social authentication simplifies the login process, and 2FA adds an extra layer of security. Remember to always follow security best practices, keep your authentication mechanisms up to date, and consider combining methods for enhanced security.

Connect with me:

Thank you for reading this guide on authentication methods in MERN applications. If you found this content helpful and want to stay updated on more web development topics, feel free to connect with me on social media:

- Twitter: [https://x.com/PritamGhosh010]
- LinkedIn: [https://www.linkedin.com/in/pritam-ghosh-dev]
- GitHub: [https://github.com/PrtHub]

Don’t hesitate to reach out if you have any questions or want to discuss web development further. I’m always happy to connect with fellow developers and tech enthusiasts!