Forem: Amrasakpare Lawrence

The Tech Stack I Use to Build and Ship Projects Fast as a Web Developer

Amrasakpare Lawrence — Tue, 10 Feb 2026 11:00:00 +0000

Over the past year, I have been building a lot of websites and web applications. Some for learning. Some for clients.

Along the way, I slowly refined my tools and workflow until I landed on a stack that genuinely helps me move fast without feeling overwhelmed.

In this article, I am going to break down the exact tools I use, why I chose each one, and how AI fits into my workflow.

If you build client projects, side projects, or just want to ship faster, this should give you some useful ideas.

Let us dive in.

1. Frontend Frameworks

For web projects, I mainly use Next.js, Vite and Astro.

Next.js

Next.js is what I use for full scale web applications.

I reach for it when I need things like authentication, dashboards, server side logic, or complex user flows. The App Router makes it easy to organize large projects, and the overall developer experience feels very mature.

It is especially useful when I am building products or internal tools where both frontend and backend logic need to live together cleanly.

Vite

I use Vite when I want something lightweight and fast.

For simple websites, small tools, or projects that do not need the full power of Next.js, Vite is perfect. It starts instantly, builds fast, and stays out of your way.

Most of the time, this means pairing Vite with React for projects where I just want to focus on the UI without extra abstractions.

If I am building a straightforward website or prototype and do not need server features, Vite is usually my first choice.

Astro

I use Astro mostly for content focused websites.

Examples include blogs, documentation sites, and marketing websites where performance is extremely important.

Astro ships very little JavaScript to the browser, which leads to fast load times and great Lighthouse scores.

For local businesses that care about SEO and speed, Astro is often the perfect choice.

2. Styling

For styling, I use Tailwind CSS v4 together with shadcn.

Tailwind CSS

I used to write a lot of custom CSS (lol I still do most times), but Tailwind completely changed my workflow.

Instead of switching between files and inventing class names, I can style directly in my components.

Tailwind v4 also brings performance improvements and better developer experience, which makes it even more enjoyable to use.

shadcn

shadcn is one of my favorite tools.

It is not a traditional component library. Instead, you copy components into your project and fully own the code.

That means:

No vendor lock in

Full control over styling

Accessible components by default

If I need a card, button, modal, or dropdown, I grab it from shadcn, paste it into my project, and customize it.

Tailwind and shadcn together allow me to build full landing pages in hours instead of days.

3. Backend and Database

For proper web applications, I use Convex.

Convex gives me:

A database

Backend functions

Real time updates

All in one platform.

Instead of setting up a separate API server, I write JavaScript or TypeScript functions that directly talk to the database.

This is great for things like:

Booking systems

Dashboards

Real time features

Development feels fast and simple, and Convex scales well as projects grow.

Content Management System

I use Sanity CMS, but only when a project truly needs a CMS.

Many business websites barely change content. In those cases, a CMS is unnecessary.

But when clients want to edit:

Blog posts

Menus

Team members

Pages

Sanity becomes extremely valuable.

It is flexible, has a great editing experience, and integrates easily with both Next.js and Astro.

4. Authentication

For authentication, I mostly use Clerk.

Clerk handles:

User management

Magic links

Social logins

The UI components look good out of the box, and setup is straightforward and you can build your own custom UI if you choose to.

I have also been experimenting with Better Auth on some projects where I want more control, but Clerk is still my default because it saves a lot of time.

5. Mobile Development

I am currently getting into mobile development using React Native with Expo.

I am still learning, so I am not taking mobile client work yet.

The biggest advantage is that I can reuse my React knowledge and build for both iOS and Android.

If I already have a web app built with Next.js, I can share logic, validation, and sometimes even components.

Expo removes a lot of the painful setup that usually scares people away from mobile development.

If you are curious about mobile, Expo makes it a great place to start.

6. Monorepo Setup

Recently, I started using Turborepo.

Turborepo allows me to keep multiple projects in a single repository.

For example:

Web app

Mobile app

Shared UI components

Shared utilities

All living together.

This means I can reuse code instead of copying and pasting between projects.

It may sound complex, but once you set it up once, it actually simplifies things.

7. Payments

For client projects in Nigeria, I use Paystack.

It works well for local businesses and has reasonable fees.

For my own products and tutorials that I make, I use Stripe.

Stripe is globally supported and has excellent documentation.

Both integrate nicely with Next.js.

8. Deployment

My main deployment platform is Vercel.

Since Vercel builds Next.js, the experience feels seamless.

Push to GitHub and your site is live.

You also get:

Automatic SSL

Preview deployments

Easy environment variables

For Astro sites, I mostly use Netlify.

In rare cases where I need more backend control, I use Railway.

But Vercel handles most of my deployments.

How I Use AI

I don't use AI powered IDEs like Cursor, at least not yet. I've only tried Cursor once or twice.

I prefer writing my own code (or rather copy from a chat interface and pasting it into my code editor).

I like understanding what I am building, and I learn better when I follow the approach I just mentioned.

The main tools I use:

t3.chat

Claude Interface

ChatGPT Interface

The models I use most:

Gemini 3 Pro

Gpt 5

Claude Sonnet 4.5

Clause Haiku 4.5

Final Thoughts

This stack allows me to go from idea to deployed project very quickly while still learning.

AI plays a big role in my productivity, but it does not replace my thinking or my coding.

I will be sharing more content where I build real projects using this exact stack, including websites, dashboards, booking systems, and mobile apps, later on.

If you have questions about any part of the stack, feel free to ask.

Happy building 🚀

How to Build a Portfolio Website the Right Way

Amrasakpare Lawrence — Thu, 03 Apr 2025 23:00:00 +0000

Creating a personal portfolio is a rite of passage for developers, but for many, it becomes an overwhelming task. You start with excitement, then suddenly, you're stuck overthinking design choices, switching tech stacks, or spending hours tweaking animations instead of showcasing your work. Sound familiar? I’ve been there too.

That’s exactly why I built PortfolioKit— a tool to help developers, designers, and freelancers skip the frustrating parts and get a professional, fully functional portfolio live in minutes.

😫 The Common Struggles of Building a Portfolio

If you’ve ever tried to build a portfolio from scratch, you’ve likely faced some of these issues:

Overthinking Design – Finding the perfect UI can be time-consuming. Should it be minimal, flashy, or somewhere in between?
Tech Stack Dilemma – React, Next.js, Astro, or plain HTML? Every option has trade-offs.
Endless Customization – Instead of launching, you spend hours fine-tuning fonts, colors, and layouts.

These challenges slow you down and distract from what truly matters—showcasing your work and landing opportunities.

✨ How PortfolioKit Fixes These Problems

PortfolioKit is designed to remove the unnecessary headaches from building a portfolio so you can focus on what truly matters. Here’s how it helps 👇🏽

1. Pre-Designed Templates That Look Great

No need to spend hours picking the right design. PortfolioKit provides clean, modern, and professional templates that you can customize to fit your style. Whether you're a developer, designer, or freelancer, there's a template that works for you.

2. No Tech Stack Anxiety – Just Focus on Content

PortfolioKit is built using Astro and Sanity, making it fast, flexible, and easy to update. You don’t need to worry about picking the “right” framework—everything is already optimized for performance and SEO.

3. Easy Customization Without the Overwhelm

Tweak colors, fonts, and layouts in minutes. PortfolioKit gives you enough flexibility to make your portfolio unique without spending endless hours adjusting minor details.

4. Simple Deployment – Get Online Fast

Forget complicated setups. With PortfolioKit, deployment is seamless, whether you choose Vercel or Netlify. Your portfolio can go live with just a few clicks.

5. Built for Growth – Add Projects, Blogs, and More

A good portfolio should evolve with your career. PortfolioKit makes it easy to update projects or even integrate a blog—all without rebuilding from scratch.

💡 Why I Created PortfolioKit

When I built my first portfolio (which now uses PortfolioKit’s developer template), I went through all the struggles mentioned above. I wanted it to be perfect, so I kept redesigning, switching frameworks (frustrating 😅), and delaying my launch in search of perfection. It took far longer than necessary. Eventually, I realized a portfolio’s purpose is to showcase your skills, not to be a never-ending project itself.

That’s why I built PortfolioKit—to help developers avoid these distractions. With PortfolioKit, you can launch a sleek, professional portfolio in minutes, freeing you up to focus on what truly matters which is your work, your projects, and your career.

⚡ Ready to Build Your Portfolio the Smart Way?

If you’re tired of overcomplicating your portfolio, PortfolioKit makes it easy. Get started today and get your portfolio online without the stress.

👉 Check out PortfolioKit

Here Are Some Productivity Tools That I Use Every Day

Amrasakpare Lawrence — Thu, 30 Jan 2025 23:00:00 +0000

Whatsup guys, so staying productive often feels like juggling multiple responsibilities at once. Between managing tasks, staying organized, and reducing distractions, the right tools can make a world of difference.
In this article, I’ll show you some of my favorite productivity tools and Chrome extensions that helps in streamlining my workflow. let’s dive right in 😉.

General Productivity Tools

1. Notion

First up is Notion, which is what I use everyday. (Fun fact I’m even using it right now to write this article 😅). I use it to plan video ideas, track projects, blogs and manage my entire workflow. It does have a little learning curve to it though but the free templates they have will make your life so much easier. That being said let’s move on the next tool.

2. Google Calendar and Google Tasks

When it comes to managing my schedule, Google Calendar and Google Tasks are indispensable. Google Calendar helps me block out dedicated time for work, meetings, and content creation. On the other hand, Google Tasks is perfect for jotting down quick to-dos and keeping track of small but essential tasks. The seamless syncing across devices ensures that I’m always on top of things, no matter where I am.

3. Day One

For a more reflective and mindful approach to productivity, I use Day One. This journaling app helps me document my goals and progress. Taking a moment to write down my thoughts and reflect on my achievements keeps me grounded and motivated, especially when balancing multiple projects and life in general.

4. Ueli

If you’re on Windows, Ueli is a hidden gem. It’s a productivity launcher similar to Alfred on macOS or Raycast. With Ueli, I can open apps, search files, and even run quick calculations without ever touching my mouse. It’s fast, efficient, and eliminates the need to navigate through endless menus.

Chrome Extensions

1. Download All Images

One of my favorite Chrome extensions is Download All Images. It’s a lifesaver when I need to download multiple images from a page at once. Whether I’m gathering assets for a project or doing research, this tool saves me countless hours.

2. Fake Filler

Testing forms is a regular part of my job because I build projects that has them. Fake Filler automatically fills out forms with dummy data, making the testing process much faster and more efficient. It’s especially handy when working on large projects with numerous input fields.

3. Awesome Screenshot and Screen Recorder

For documentation or sharing ideas with clients, Awesome Screenshot and Screen Recorder is a must-have. This extension allows me to take full-page screenshots or record my screen, making it perfect for capturing website layouts or creating tutorials. I have never really tried the screen recorder feature though because I have not really seen the need for it yet but the screenshot feature is really good.

4. VisBug

VisBug is a design tool that lets you make quick edits to a webpage’s layout and visuals directly in your browser. It’s great for experimenting with design changes on the fly without diving into the code.

5. Unhook

Staying focused on YouTube can be challenging with all the recommended videos and comments fighting for your attention. That’s where Unhook comes in. This extension removes distractions from YouTube, allowing me to focus on learning.

6. Other Notable Mentions

Excalidraw

Excalidraw is an amazing tool for creating quick and simple diagrams. If you are a developer or content creator, there are times when you need to visually represent your ideas or workflows. Excalidraw’s hand-drawn style makes it easy to create clear, engaging diagrams without the intimidating complexity of professional design tools.

Google Keep

For lightweight and accessible note-taking, Google Keep is a fantastic option. It’s simple, syncs across all your devices, and lets you quickly jot down ideas, lists, or reminders. I particularly love using it for capturing thoughts on the go especially when I am not with my PC.

Monkeytype: The Essence of Touch Typing

While Monkeytype is a fun and interactive typing practice tool, it highlights a skill that’s essential for anyone working with computers: touch typing. Being able to type quickly and accurately without looking at the keyboard is a game-changer for productivity. Touch typing reduces the cognitive load associated with finding keys, allowing you to focus entirely on your work.

Conclusion

Thanks for making it to the end of the article! 🎉 I hope you found it helpful.

What are your favorite productivity tools or Chrome extensions? Share your recommendations in the comments—I’d love to check them out!

How I’m Turning My Side Project Into a Source of Income

Amrasakpare Lawrence — Thu, 09 Jan 2025 23:00:00 +0000

Introduction

Whatsup guys, So as someone who has always been intrigued by the idea of building something meaningful, I decided to take the step and create a side project. This project is a template system designed to solve a problem I’ve encountered repeatedly: the lack of easy customization in traditional website templates. But beyond solving a problem, this project is also a way for me to explore whether I can build something valuable enough to potentially earn from it and also learn other skills that are not necessarily related to coding. So let’s dive right into the article

Why I Started This Project

As unexpected as it might sound, this project began because I ran into a bug while working on something else and needed a distraction. I had always envisioned creating my own portfolio template website someday, and this felt like the right moment to start. In the past, I tried my hand at building traditional website templates for platforms like ThemeForest, which is an incredible platform (though, fun fact, all my submissions were rejected 😅).

One thing that always bothered me about traditional templates was the amount of time buyers spent tweaking someone else’s code to fit their needs. Sure, documentation is provided, but you know what I mean—most templates don’t offer the flexibility users really need.

That’s when I thought: What if there was a better way? What if I could create templates that were easy to set up and even easier to customize without constantly diving into the code? That’s how this project started taking shape.

What I’m Building

The idea is a template system built with Sanity and Astro. Here’s how it works:

Niche-Specific Templates: Users can choose from templates designed for specific industries, such as photography, developers, creative professionals and more.
Seamless Setup: After downloading the template, users only need to do a few initial installations in the code.
Customizations via Sanity: Most updates and tweaks can be done through Sanity’s user-friendly interface, rather than editing code every time.

The goal is to provide a tool that’s flexible for developers but also approachable for non-developers. It’s a system that I hope can make building and managing websites more intuitive.

The First Step: A Free Photography Template

To kick things off, I’ve built the first template in this system, tailored specifically for photographers. It’s a simple yet functional template designed to showcase photography portfolios effectively. And for now, it’s completely free.

Try It Out

You can download the template right now from Portfolio Kit. Currently, there’s just one template available, but it’s free because I’m looking to:

Gather Feedback: Understand what users like and what needs improvement.
Validate the Idea: See if people find this system helpful and valuable.
Learn Marketing: Experiment with sharing my work and building an audience around it.

If you’d like to see how it works in action, check out this YouTube video where I walk through using the template.

What’s Next?

This is just the beginning. I’m already thinking about templates for other niches and exploring ways to make the system even better. But for now, my focus is on getting feedback and learning as much as I can.

How You Can Help

If this project resonates with you, here’s how you can get involved:

Try the Photography Template: It’s free, and your experience will help me improve.
Share Your Feedback: Whether it’s about the design, usability, or setup process, I’d love to hear your thoughts.
Spread the Word: If you know someone who might find this helpful, let them know about it.

Conclusion

This project is deeply personal to me. It’s not just about creating a product but also about testing myself—can I build something that people find valuable? Can I turn this into something sustainable? These are questions I’m still trying to answer.

For now, I’m taking it one step at a time. If you’ve read this far, thank you for being part of this journey. Your feedback, support, and even just your interest mean a lot. Let’s see where this goes together.

The Basics of Rate Limiting: How It Works and How to Use It

Amrasakpare Lawrence — Thu, 31 Oct 2024 23:00:00 +0000

Rate limiting is a vital concept in web development. It ensures server stability, efficient resource allocation, and protection against malicious attacks. So In this article, we’ll delve into the essence of rate limiting, its importance, various implementation methods, and practical examples to demonstrate its functionality. let’s dive right in 😉

What is Rate Limiting?

Rate limiting is a strategy that is used to control the amount of incoming requests or traffic to a web service or to a server. it helps protect your applications from abuse, ensures fair resource distribution, and maintains service stability.

Why Use Rate Limiting?

Here are some of the reasons why you should use rate limiting 👇🏽

Preventing Abuse: Stops bots or malicious users from overwhelming the server with requests.
Resource Management: Ensures fair usage of resources across all users.
Security: Helps prevent brute-force attacks by limiting attempts of some endpoints in your application.
Cost Control: Helps prevent unexpected charges due to excessive API calls.
Performance: Keeps your server responsive and reduces the risk of downtimes.

Types of Rate Limiting

Fixed Window (or Simple) Rate Limiting: This method limits requests within a fixed time window. For example, "100 requests per minute.""
Sliding Window Rate Limiting: A dynamic time frame that tracks and limits requests over a recent period, such as the last few minutes or seconds.
Token Bucket Algorithm: This method uses a "bucket" filled with tokens to manage requests. Each incoming request consumes a token, and the bucket is refilled at set intervals. This approach allows for bursts of traffic while maintaining an overall rate limit.
Leaky Bucket Algorithm: Similar to the token bucket, but with a twist. When the bucket is full, excess requests "leak" out or are discarded, maintaining a steady flow.

💡 I'm not even going to lie because I don't know much about the Token Bucket and Leaky Bucket algorithms, as I haven't needed them for my current projects. However, Fixed Window and Sliding Window are the most common types you'll encounter. For instance, OpenAI's GPT-4 uses Fixed Window rate limiting with tiered limits—their first tier allows 500 requests per minute This approach can lead to burst traffic, as users might hit their limit just before the window resets.

How Rate Limiting Works

The process typically involves:

Tracking: Monitoring how many requests a user (mostly the userId) or IP has made within a specific timeframe.
Threshold: Defining a limit (e.g., 100 requests per hour).
Response: Sending a warning or blocking further requests when the limit is exceeded (usually with a 429 Too Many Requests HTTP status code).

Implementing Rate Limiting: Practical Examples

Now that you have a basic understanding of rate limiting and how it works, let's get our hands dirty by implementing it in a project we'll be creating.

We'll create two projects demonstrating rate limiting:

A GET request example
A POST request example

Tech Stack

Frontend: React (using Vite)
Backend: Express (Node.js framework)

GET request example

Create a folder with any name of your choice and open it on VS code or whatever code editor you use.

Inside that folder you've created, create two more folders called frontend and backend.

After that, cd into the backend folders and enter this command npm init -y to initialize a package.json file

After that install the follow npm packages inside the backend folder 👇🏽

npm install express cors express-rate-limit

npm install -D nodemon

What these do:

express: Creates your web server and handles API routes
cors: Allows frontend to communicate with backend safely
express-rate-limit: Protects your API from too many requests
nodemon: Auto-restarts server during development (that's why we use D)

After that, create an index.js (you can this whatever you want) file because we’ll be using it to set up the rate limiter.

After you’ve done copy and paste this code that I am going to explain in a bit

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

app.listen(5000, () => {
  console.log("Server running on http://localhost:5000");
});

Here's what each part does:

First two lines import our needed packages
app = express() creates our server
The limiter is configured with:
- windowMs: Sets a 15-minute time window (15 × 60 × 1000 milliseconds)
- max: Allows 5 requests per IP address in that window
- message: The error message users see when they exceed the limit

Then:

app.use(limiter) applies our rate limit to all routes
We create a simple test route at '/api/data' that sends a welcome message
Finally, we start the server on port 5000

When users hit your API more than 100 times in 15 minutes from the same IP, they'll get the error message instead of accessing the API.

Now that you know how it works, we want to enable auto-restart by adding to package.json 👇🏽

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

That’s all for the backend.

It’s time to set up the frontend.

Open a new terminal and cd into the frontend folder and run 👇🏽

  npm create vite@latest .

Go through the following instructions and I’ll advise you select JavaScript if you don’t know typescript
You can do a little clean up by getting rid of some files you won’t need. here is how mine looks

Once you are done, open the App.jsx and paste this code that I’ll explain 👇🏽

  import { useState } from "react";
  import axios from "axios";

  const App = () => {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState(null);

    const fetchData = async () => {
      try {
        setError(null); // Reset error state before making a request
        const res = await axios.get("http://localhost:5000/api/data");
        setResponse(res.data.message);
      } catch (err) {
        setError(err.response?.data || "Error occurred while fetching data");
      }
    };

    return (
      <div className="App">
        <header className="App-header">
          <h1>Rate Limiting Test with Express</h1>
          <button onClick={fetchData}>Fetch Data from Server</button>
          {response && <p>Server Response: {response}</p>}
          {error && <p style={{ color: "red" }}>Error: {error}</p>}
        </header>
      </div>
    );
  };

  export default App;

Here's what's happening:

We import useState for managing data and axios for making API requests
We create two state variables:
- response: Stores successful API responses
- error: Stores any error messages
The fetchData function:
- Gets called when button is clicked
- Tries to fetch data from our API
- Updates either response or error state
- Uses try/catch to handle success and errors
The UI shows:
- A title
- A button to trigger requests
- The API response (if successful)
- Error messages in red (if request fails) When you click the button too many times within 15 minutes, you'll see the rate limit error message because of our backend restrictions!

That’s all about the GET request example. Let’s move on to the next example

POST request example

For this example, you can decide to comment out the code of the first example and paste this code 👇🏽

import express from "express";
import cors from "cors";
import rateLimit from "express-rate-limit";
import bodyParser from "body-parser";

const app = express();

app.use(cors());

app.use(bodyParser.json());

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // limit each IP to 100 requests per windowMs
  message: "Too many requests from this IP, please try again after 15 minutes",
});

app.post("/api/submit-form", limiter, (req, res) => {
  const { name, email, message } = req.body;

  // Simulate processing form data
  console.log(`Received form submission from ${name} (${email}): ${message}`);

  res.json({ message: "Form has been submitted successfully!" });
});

app.listen(5000, () => console.log(`Listening on port ${5000}`));

You can see that most of the code are the same with the first example but here are just some key difference 👇🏽

Added bodyParser to handle form data
Creates a POST endpoint that processes form submissions

Also paste this code on the frontend as well

import { useState } from "react";
import axios from "axios";

const App = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      setError(null); // Reset error state before making a request
      const res = await axios.post(
        "http://localhost:5000/api/submit-form",
        formData,
      );
      setResponse(res.data.message);
    } catch (err) {
      setError(
        err.response?.data || "Error occurred while submitting the form",
      );
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Rate Limiting Form Submission with Express</h1>
        <form onSubmit={handleSubmit}>
          <div>
            <label>Name:</label>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              required
            />
          </div>
          <div>
            <label>Email:</label>
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              required
            />
          </div>
          <div>
            <label>Message:</label>
            <textarea
              name="message"
              value={formData.message}
              onChange={handleInputChange}
              required
            />
          </div>
          <button type="submit">Submit</button>
        </form>
        {response && (
          <p style={{ color: "green" }}>Server Response: {response}</p>
        )}
        {error && <p style={{ color: "red" }}>Error: {error}</p>}
      </header>
    </div>
  );
};

export default App;

Here, we're simply making a request to the server through a form. Let's look at how this differs from the GET example:

Uses a form instead of a single button
Manages form state with formData
Handles input changes with handleInputChange
Uses POST request instead of GET
Shows success message in green

The form allows 5 submissions in 15 minutes - after that, users see the rate limit error message.

Conclusion

Alright guys, congrats on getting to the end of this article 🎉. I hope you now have an idea on how rate limiting works and why you should use it on your projects especially if you are working on bigger projects that involves money. If you have any questions, feel free to ask in the comment. Happy coding 🤠

How to Route Multiple Paystack Webhooks with one Webhook URL

Amrasakpare Lawrence — Thu, 24 Oct 2024 23:00:00 +0000

Paystack offers powerful payment solutions for businesses in Nigeria and across Africa, but one common challenge for developers is the limitation of using only one webhook URL on the Paystack dashboard. For developers managing multiple projects, this restriction can become a major issue, especially when dealing with various applications or environments that require different webhook handling processes.

Fortunately, Hookdeck offers an easy solution to route webhooks from a single Paystack URL to multiple endpoints across various projects. In this article, we’ll learn how to route multiple webhooks on your paystack projects with one webhook URL using Hookdeck. Let’s dive right in 😉

Why You Might Need Multiple Webhook Endpoints for Paystack

So before we go into main stuff, let's examine why having multiple webhook endpoints is necessary 👇🏽

Managing Multiple Projects: If you're handling more than one application that needs to process payment events, routing all webhooks to a single URL won't suffice. Basically what this means is since Paystack only allows one webhook URL, you'd need a way to separate or "route" the incoming webhooks to different places, depending on which project they are meant for and a single URL for all projects won't be able to distinguish between them or allow for tailored responses.
Environment Separation: You may want to route webhooks to different environments (e.g., development, staging, production (this is basically ) to ensure events are handled correctly without interfering with your live environment.
Custom Processing Logic: Different applications or modules might require unique logic to process events, which can be difficult to achieve through a single webhook endpoint.

With these scenarios in mind, let's see how Hookdeck makes managing multiple Paystack webhooks easier.

What is Hookdeck?

Hookdeck is a webhook infrastructure service that allows you to receive, manage, and route webhooks with ease. It acts as an intermediary between your application and webhook providers (like Paystack), enabling you to process webhooks more reliably and flexibly.

One of Hookdeck's powerful features is the ability to route incoming webhook events to multiple destinations based on the rules you define.

How to Use Hookdeck with Paystack

Now that you have a basic idea on what hookdeck is, Let’s now walk through the process of setting up Hookdeck to manage and route multiple Paystack webhooks. 👇🏼

1. Create a Hookdeck Account

The first step is to sign up for a Hookdeck account if you haven't already. You can create a free account on their website, which offers all the essential features to get started.

💡 if for some reason the website does not open on your browser, you can download cloudfare warp. which is a free VPN service that uses Cloudflare's global network to improve your internet connection's speed, security, and privacy. that being said. let’s move on to the next step.

2. Set Up a New Connection on Hookdeck

After signing up, you’ll need to create a connection in Hookdeck. A connection basically acts as a single webhook endpoint that you’ll later use on your Paystack dashboard.

In your Hookdeck dashboard, click on Connection.

After clicking on create connection you will directed to another page where you have to do a couple of things 👇🏽

You have to define your request source by adding a source name (e.g., Paystack webhook or anything you want).

You also need to define your event destination by adding a destination name and an endpoint URL. So if you already have an endpoint you are using as your webhook endpoint, on paystack you can add that one. lastly, you can leave the destination type as it is.

Define your connection rules: I haven't needed this for my current projects. However, it allows you to set up different rules to listen for various events. This is particularly useful if you're using one source URL for multiple platforms (like Paystack, Stripe, or Shopify). You'd set up rules to differentiate between them. It's also helpful if you have two Paystack projects—one using a subscription method and the other using the normal charge method (which we'll discuss in step 4). But if you're just using one webhook URL for all your Paystack projects, you can skip this step.

Lastly, set up a connection name. While optional, it's recommended if you have multiple connections with the same source and destination, or if you use the API. Once you're done, click on Create

You should see something like this after creating a connection. 👇🏽

3. Configure the Paystack Webhook

Now that you have a Hookdeck URL, copy it and go to your Paystack dashboard to configure your webhook:

Log in to your Paystack dashboard.
Navigate to Settings > Webhooks.
Replace your current webhook URL with the one provided by Hookdeck.
Save the changes.

At this point, all Paystack events will be sent to the Hookdeck URL, which will act as your single point of entry for webhook requests.

4. Set Up Destinations in Hookdeck

Once your Hookdeck connection is receiving Paystack events, the next step is to configure Destinations, which is how Hookdeck forwards your webhooks to the appropriate endpoints based on the events.

Go to your Hookdeck dashboard and click on the Connection you created for Paystack.
Click on the connection chain - in this case it will be the test-connection
Once you've clicked on the test-connection, you can use Hookdeck’s built-in filters to control which events are forwarded to which destination. For example:

To forward only successful payment events to a specific endpoint, you can filter the events by event.type == "charge.success".
For subscription-related events, you can filter with event.type == "subscription.create" and route them to your other project.

Save these settings. Now, Hookdeck will automatically forward specific Paystack events to the right endpoints based on the filters you’ve applied.

5. Testing and Monitoring

Once your routes are set up, it's crucial to test and monitor the webhook events to ensure they’re being routed correctly. Hookdeck offers useful tools to help with this.

Conclusion

That’s all guys, and congrats for getting to the end of the article 🎉. Let me know if you had issues with any part of the code on the comment section. Till next time and Happy coding 😀

Should you really Roll your own auth?

Amrasakpare Lawrence — Thu, 20 Jun 2024 23:00:00 +0000

Hey guys, In this article, I want to discuss whether it's better to build your own authentication system or to use a third-party service provider. Let’s dive right in 😃

Why Consider Building Your Own Authentication?

First, let's consider the "WHY" behind building your own authentication system from scratch. The decision depends significantly on your role and the kind of application you are developing. For instance, if you are a backend developer working for a company, they likely already have their own authentication system in place. However, the situation might be different if you're a freelancer (hello🙂), or frontend developer working for clients or personal projects.

Some people advocate for building your own authentication, while others recommend using third-party services like Clerk, Auth0, Kinde, and others. I'll outline the pros and cons of each approach and share my perspective on both solutions.

👨🏽‍💻 The Freelancer's Perspective

As a freelancer, if I have projects to deliver to clients, creating authentication from scratch is not the best solution. Here’s why:

Time Constraints: Freelancers often work with tight deadlines. Building a robust authentication system from scratch is time-consuming and complex, which can delay project delivery.
Resource Management: Freelancers usually handle multiple aspects of a project. Using a third-party service for authentication allows them to focus on other important tasks, enhancing overall productivity.
Cost: While third-party services can be expensive, many offer generous free tiers that are sufficient for small to medium projects. This can be a cost-effective solution for freelancers working on budget-constrained projects.

Cons:

Dependency: Relying on an external provider might raise concerns about reliability and data security.
Cost at Scale: While initial costs might be low, they can increase significantly as the project scales.

💡 But at the end of day the client does not really care what you use. They just want to see results.

👨🏽‍💻 The Frontend Developer's Perspective

As a frontend developer, or more broadly, as a software engineer focused on building frontend applications, the scenario is slightly different:

Ease of Integration: Frontend developers can easily integrate third-party authentication services without delving into the complexities of backend systems.
Time Efficiency: Using third-party services allows frontend developers to concentrate on the UI/UX aspects of the project, ensuring a better user experience.
Learning Opportunity: While it’s beneficial to understand how authentication works, building it from scratch isn’t always necessary for frontend-focused projects. However, gaining some knowledge can help when integrating third-party services securely.

Cons:

Limited Control: Depending on third-party services means you have less control over the authentication process and data management.
Potential Integration Issues: There can be occasional compatibility issues with other parts of the application.

👨🏽‍💻 The Backend Developer's Perspective

For backend developers, the line becomes blurry, and here's why:

Control and Customization: Building your own authentication system offers greater control over the implementation, allowing customization to meet specific security and business requirements.
Security Considerations: Backend developers often need to ensure high security standards. While third-party services are secure, having control over the authentication process allows for more tailored security measures.
Scalability and Maintenance: Maintaining your own system can be challenging but rewarding. Backend developers need to weigh the benefits of customization against the overhead of maintaining and scaling the system.

Cons:

Time and Resources: Developing and maintaining a custom authentication system requires significant time and resources.
Complexity: Ensuring that the system is secure and scalable adds to the complexity of the project.

💡 Here is thing, you are a backend dev which means you chose the path of long suffering, So you don’t need to take the cons into consideration 🙂.

Common Questions

Here are some common questions I was hoping you’d ask as well the answers in mind 👇🏽

What if my project scales quickly?

Using a third-party service can be beneficial as they often provide scalable solutions that can handle increased loads without significant changes.

Are third-party services secure enough?

Most third-party services invest heavily in security and compliance, often exceeding what a small team can implement. However, always review their security policies and practices to ensure they meet your requirements.

💡 But you should try out clerk.dev though 🙂

Can I switch from a third-party service to my own system later?

Yes, but it can be complex. Plan for such transitions by abstracting the authentication layer in your application to make future changes easier.

Conclusion

Alright guys, Thanks for getting to this part of the article 🎊 🎊. The decision to build your own authentication system or use a third-party service depends on your role, project requirements, and constraints. Freelancers and frontend developers might find third-party services more practical due to time constraints and workload, while backend developers might benefit from the flexibility and control of building their own systems. Regardless of your choice, it's crucial to weigh the pros and cons and make an informed decision that best suits your needs.

Have an amazing weekend and see you next week 🙂

Cyclic has shut down and I am migrating my data to another service

Amrasakpare Lawrence — Thu, 13 Jun 2024 23:00:00 +0000

A few weeks ago, I wrote an article on deploying your full-stack application, which you can find

here.

One of the hosting services I discussed was Cyclic. Unfortunately, Cyclic has since shut down. In this article, I'll explore why I believe they closed and share the best alternative I've found for migrating my data to a new platform. Let's dive in! 😉

What is Cyclic?

Cyclic is a popular platform that provided hosting solutions for full-stack web applications specifically for JavaScript application as at the time I deployed my application to their services.

Why did they shut down?

Here is an article I found on their website as to why they are shutting down but I honestly, I think the exact reasons were not disclosed, but here are some potential factors that could have led to Cyclic's decision to cease operations 👇🏽

💸 Financial challenges

Running a hosting platform requires significant infrastructure investments and operational costs.

And I believe that they were not able to get more customers to offset their expenses and this was what they said on their blog 👉🏽 “we were not able to sell enough to make it self sustaining”. And why I am saying this from a good place. I felt they gave just too much for free without striking a proper balance in their pricing tier.

💻 Technical or operational challenges

Maintaining a hosting platform can be technically complex, and issues related to scalability, security, or other operational challenges could have made it increasingly difficult for Cyclic to continue providing reliable services.

🔀 Strategic shift

Companies sometimes pivot their focus or change their business strategy, which could involve discontinuing existing products or services.

While there may be other reasons I haven't mentioned, I believe these three factors contributed to their shutdown.

So this now leads us to 👇🏽

Where am I migrating my data to?

So if you went through the first link of the article you might known already. But nevertheless, I will be migrating my data to the Sanity(sanity.io). So Sanity is a headless CMS (Content management System) which means the content like text, images, videos, etc. is stored separately from the way it's presented on the website. And the cool feature I like about them is that they offer a cloud-hosted option where you don't need to manage your own server infrastructure.

So my full stack website Nike webstore (under maintenance though 😅) was initially built with the MERN stack so you can imagine moving my data from mongoDB to Sanity and I also have to use another method in querying my data.

What I learned from all these?

Besides learning new techniques for migrating data without breaking anything (yet 😅), I also gathered some valuable insights: always strike the right balance between free and paid offerings to incentivize upgrades. Continuously evaluate and adjust pricing models as your product and the market evolve. Focus on converting free users to paying customers through effective strategies. Diversify revenue streams beyond just a freemium model. Consistently improve the product and user experience to justify paid plans. (💡 Just a side note: avoid doing this from your main branch. 😅) 👇🏽

💡 Just to be clear, I really enjoyed Cyclic services because they really made deploying full stack applications very easy which was why I even wrote the article.

Conclusion

Alright guys, that’s the end of the article 🎊🎊. I hope you found it informative, and I would love to hear about better alternatives for migrating your MERN stack app to free web services. Have an amazing weekend, and see you next week! 😃.

Getting Started with SSR

Amrasakpare Lawrence — Thu, 06 Jun 2024 23:00:00 +0000

Hey guys, recently, I've been exploring Next.js which is framework that is built on top of react to streamline web application development, and I've come across a technique it uses for rendering web pages. It's quite distinct from the familiar client-side rendering (CSR) approach that many of us are accustomed to. This technique is known as Server-Side Rendering (SSR).

In this article, we'll delve into what SSR entails, how it differs from CSR, and uncover other intriguing aspects. Let’s dive right 😉

What is SSR?

Server-side rendering (SSR) is a technique in web development where the web page is generated on the server before being sent to the user's browser. This means that the initial content of the page is already rendered and ready to be displayed when the user requests it.

Here's a breakdown of SSR in the context of Next.js:

When a user visits a Next.js page by making an http request, the server executes the necessary code to generate the complete HTML content for that page because it does page splitting by default. This includes the initial data and markup.
The generated HTML is then sent to the user's browser.
Once the browser receives the HTML, it can immediately render the content without having to wait for any additional JavaScript to be downloaded and executed.

This approach offers several advantages such as:

Improved SEO: Search engines can easily crawl and index the content of SSR-rendered pages, which can boost your website's search ranking.
Faster initial load times: Since the initial HTML is already generated, users see the content of the page almost instantly, leading to a better perceived performance.
Enhanced user experience: Users don't have to wait for JavaScript to load before they can interact with the page.

So what sets it apart from client-side rendering? They both seem to render right away, right?

Difference between CSR and SSR

You're correct that both Server-Side Rendering (SSR) and client-side rendering (CSR), the default method in React, can provide an immediate rendering experience for users. However, there's a key difference in when the rendering happens 👇🏽

In SSR (with Next.js), the server renders the initial HTML on the server, including the data needed for the page. This HTML is then sent to the browser, resulting in a faster initial load time because the content is already there.
In CSR (normal React), the browser receives an empty HTML shell and then fetches the necessary JavaScript code to render the page content. This can lead to a slight delay( before the user sees the content, especially on slower connections.

Here is an analogy to differentiate the two

Imagine SSR as getting a pre-made meal at a restaurant. You receive your food instantly, and then the chef prepares any additional dishes you ordered.
On the other hand, CSR is like ordering a custom meal. The chef needs to cook everything from scratch, so it takes a bit longer to get your food.

Considerations for SSR with Next.js

Here are two additional things to keep in mind about SSR with Next.js

Data fetching: SSR is great for SEO and initial load times, but it can add some overhead to your server since it needs to generate the HTML for each request. To optimize this, Next.js offers techniques like getStaticProps and getServerSideProps for fetching data efficiently on the server-side.
Not ideal for highly dynamic content: SSR is less suitable for web applications with constant updates or user interactions that heavily rely on JavaScript. In these cases, client-side rendering or a hybrid approach might be more appropriate.

Understanding `getStaticProps` and `getServerSideProps`

In Next.js, getStaticProps and getServerSideProps are functions specifically designed for data fetching on the server-side, addressing the potential drawbacks of SSR that we talked about earlier. Here's a breakdown of what they are and the difference between them 👇🏽

getStaticProps: This is a function that is ideal for pre-rendering data at build time. It's perfect for content that doesn't update frequently, like blog posts or product pages. The fetched data is directly included in the static HTML, resulting in super-fast load times and excellent SEO since search engines can easily index the content. Here is an example 👇🏽
```
function HomePage({ data }) {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Data fetched at build time: {data}</p>
    </div>
  );
}

export async function getStaticProps() {
  // Simulate fetching data at build time
  const data = "This data was fetched at build time.";
  return {
    props: {
      data,
    },
  };
}

export default HomePage;
```
Here is what is going on from the code above 👇🏽
- We have a simple home page component (HomePage) that receives some data as a prop.
- We use getStaticProps to fetch data at build time. Here, we're simulating fetching data synchronously.
- The fetched data is passed to the HomePage component as props.
getServerSideProps: This is a function that fetches data on the server-side just before a page is rendered for each request. It's a good choice for content that needs to be dynamic or personalized based on the user, like shopping carts or user profiles. While it might add a slight delay compared to getStaticProps, it ensures the data is always up-to-date. Here is an example 👇🏽
```
function AboutPage({ data }) {
  return (
    <div>
      <h1>About Page</h1>
      <p>Data fetched on each request: {data}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // Simulate fetching data on each request
  const data = "This data is fetched on each request.";
  return {
    props: {
      data,
    },
  };
}

export default AboutPage;
```
Here is what is going on from the code above 👇🏽
- We also have a simple about page component (AboutPage) that receives some data as a prop.
- We use getServerSideProps to fetch data on each request. Here, we're simulating fetching data synchronously.
- The fetched data is passed to the AboutPage component as props.

💡 I hope you get a basic idea on how getStaticProps and getServerSideProps works now

These examples are quite basic and demonstrate the fundamental usage of getStaticProps and getServerSideProps. But in real-world scenarios, you would typically use these functions to fetch data from external sources like APIs or databases.

Conclusion

Thank you for reaching the end of the article! 🎉 I hope you found it informative and insightful. If you have any questions or contributions, feel free to leave them in the comments section below. Wishing you an amazing weekend! 😀

Camp Activity Form Markup With Glam - V2

Amrasakpare Lawrence — Fri, 29 Mar 2024 04:06:05 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I built a camp activity inquiries form to get feedback from campers.

Demo

Journey

I've already submitted version 1, but I wasn't satisfied with its creativity and overall appearance. So, I embarked on creating a new version. This time, I focused on utilizing the users' selected activity options to dynamically change the background image of the page, which I'm quite pleased with. As I'm writing this, I've even come up with another idea to enhance it further 😅, but for now, I'll stick with what I have. I genuinely hope there are similar challenges in the future because I found it both enjoyable and challenging to handle most aspects through JavaScript rather than the conventional methods.

Serverless Function - Should You Use Them?

Amrasakpare Lawrence — Thu, 28 Mar 2024 23:00:00 +0000

In this ever-changing world of cloud computing, "serverless functions" has become a widely discussed term. This new way of developing and deploying applications has revolutionized the process, offering developers a more efficient and streamlined approach. In this article you are going to learn what serverless functions are, how they operate, its benefits and drawbacks, popular use cases, types of serverless functions, and the leading cloud platform providers in this space. Let’s dive right in 😉

What are Serverless Functions?

Serverless functions at it’s core are basically functions that run on the cloud. It's a cloud-based development model where you, the developer, focus on writing code (functions) without worrying about server management. The cloud provider handles everything behind the scenes: provisioning servers, scaling resources, and maintaining infrastructure. You simply deploy your code, and the provider takes care of the rest.

There's a quote that often comes to mind from my computer engineering teacher: "Every wireless connection must have a wired backbone." This is particularly relevant in the context of serverless functions because although they operate without explicit server management, there's still a server infrastructure working behind the scenes.

How do Serverless Functions work?

Serverless functions are triggered by events. These events can be anything from an HTTP request to a change in a database. When an event occurs, the cloud provider wakes up your function, executes your code, and then puts your function back to sleep once finished. This event-driven approach ensures that resources are only used when needed, making it highly cost-effective.

Why Go Serverless?

Here are some reasons you should consider using serverless 👇🏽

Faster Development: No server management translates to quicker development cycles. You can focus on writing code and deploying functions without getting bogged down in infrastructure concerns. 💡 You do have to set up your environment variables yourself though.
Scalability: Serverless applications scale automatically based on demand. You don't need to worry about provisioning extra servers during peak traffic or dealing with underutilized resources during downtime.
Cost-Effectiveness: You only pay for the resources you use. Since serverless functions are event-driven, you're not charged for idle time which is really nice.

Types of Serverless Functions

There are two main types of serverless functions:

HTTP-triggered functions: Invoked by HTTP requests, making them ideal for building APIs and web backends.
Event-triggered functions: Respond to various events like changes in databases, file uploads, or messages in queues.

Pros and Cons of Serverless

Like any technology, serverless has its advantages and disadvantages 👇🏽

Pros:

Faster development and deployment
Automatic scaling
Cost-effective
Reduced operational overhead

Cons:

Vendor lock-in (code might be specific to a cloud provider's platform)
Limited control over underlying infrastructure
Cold start times (functions may experience delays in execution, especially the first time after deployment) - This is a common frustration associated with serverless computing.

Cloud Providers for Serverless

Most major cloud providers offer serverless platforms, including:

AWS Lambda by Amazon Web Service
Azure Functions by Microsoft Azure
Google Cloud Functions by Google cloud

AWS Lambda is often considered the most mature and feature-rich serverless computing platform. It has excellent integration with other AWS services, a wide range of runtimes and programming language support, and robust tooling and monitoring capabilities. If your application is heavily invested in the AWS ecosystem or requires advanced features and integrations, AWS Lambda is a solid choice.

💡 Netlify and Vercel are built on top of AWS Lambda and they both use it for their serverless functions offering.

Personal Opinion

I recommend experimenting with a traditional server setup before delving into serverless computing. This way, you can better understand the distinctions between the two approaches.

Conclusion

Thank you for reaching the conclusion of the article! 🎉 🎉 I hope you gained valuable insights. Feel free to share in the comments whether you're currently utilizing serverless functions for your applications and any hurdles you encounter. Looking forward to connecting with you again next week. Have a fantastic weekend! 😉

Camp Activity Form Markup With Glam

Amrasakpare Lawrence — Thu, 28 Mar 2024 20:29:38 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I built a camp activity inquiries form to get feedback from campers.

Demo

Journey

The experience was both enjoyable and slightly stressful as I had to return to using vanilla JavaScript, which I haven't utilized for some time. Nevertheless, it proved to be a valuable learning journey. I'm proud of how the website turned out, especially considering the minimal planning I invested in it and the need to reacquaint myself with certain JavaScript concepts. I will try to create a better version if there is time.