Forem: muvengei.dev

I Built Daftari - A Digital Ledger for Solopreneurs to Track Job Cards and Payments via WhatApp Chats

muvengei.dev — Wed, 04 Mar 2026 07:27:17 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

What I Built with Google Gemini

In Kenya, the local economy run on WhatsApp. From small-scale digital printing services to hair stylists, business is managed through a chaotic flow of phone calls, Sheng (local slang) texts, WhatsApp messages, and M-Pesa payment SMS.

The problem

Solopreneurs lose thousands of shillings every month due to poor record keeping - they forget to record a debt, or lose track of a job hidden in a chat thread. Sometimes they can get a hold of a previous quote given to a repeat customer. Manual bookkeeping is too slow for the "hustle"(fast paced business operations in Nairobi), and traditional accounting apps fell too corporate and complex.

The Solution: Daftari AI (Swahili for Ledger)

Daftari AI (Swahili for Ledger) is a WhatsApp-native business engine designed to bridge the gap between informal record-keeping and professional financial management. It eliminates the need for complex accounting software by meeting African solopreneurs where they already are: WhatsApp.

The Technical Flow: How it Works

The User Interface: The business owner sends a natural language message (in English, Swahili, or Sheng) to the Daftari AI WhatsApp bot.

The Proxy Layer: The message is received by the WhatsApp Cloud API, which triggers a webhook to our Next.js Proxy Server. This proxy acts as the traffic controller, sanitizing the incoming payload.

The Cognitive Engine (Google Gemini): The proxy forwards the raw, unstructured text to Google Gemini. Serving as the Cognitive Parser, Gemini analyzes the intent and context.

Input: "Nimefanya kazi ya Jane leo, ameacha deposit ya 500"
Process: Gemini identifies the Customer (Jane), the Transaction Type (Income/Job), the Total Amount, and the Payment Status (Deposit).
Output: Gemini returns a Structured JSON Object of customer, transaction and job card.

The Persistence Layer: The proxy receives this JSON and automatically updates the Postgres Database (Supabase). The user receives an instant confirmation on WhatsApp—all without ever leaving the chat.

Multi-Operation Capabilities

Daftari AI isn't just a logger; it's a full-service business assistant. Users can perform diverse operations via simple chat commands:

🛠 Job Tracking: Record new services, quantities, and descriptions.
👤 Debt Management: Instantly check "who owes what" (e.g., "Bal Jane").
💳 Payment Logging: Forward M-Pesa SMS messages directly to the bot to reconcile accounts instantly.
📊 Quick Summaries: Request daily or weekly financial overviews (e.g., "Deni za leo" or "Muhtasari").

The Comprehensive Dashboard
While the WhatsApp bot handles the "on-the-go" hustle, Daftari AI provides a Professional Web Portal. Users can log in to their dashboard to view deep-dive analytics, export comprehensive financial reports, and manage their customer database with a birds-eye view of their business health.

Demo

Daftari AI is built with a Next.js backend, Supabase for the ledger, and the WhatsApp Cloud API.

GitHub Repository: https://github.com/geraldmuvengei06/daftari
Live Demo: https://daftariai.vercel.app

How to get started

Visit https://daftariai.vercel.app
Click Get Started with WhatsApp
Start chatting with the WhatsApp bot

To login to the web portal

send "Login" to the bot
Provide your email Bot registers your email and sends a email verification link
Click the email verification link, you will be redirected to your dashboard.

Caption: Gemini parsing an M-Pesa SMS and a Sheng job descriptions. The flow.

What I Learned

This project was a masterclass in Technical Pivot Strategy.

Model Versatility: I learned that "newer isn't always easier." When I hit regional quota blocks with Gemini 2.0, I had to learn how to reconfigure my middleware to leverage Gemini 1.5 Flash, which provided the stability and rate limits I needed for a production-ready bot.
The "Zero UI" Philosophy: I learned that the best interface for a busy entrepreneur is the one they already use. By building inside WhatsApp, I eliminated the "app fatigue" that kills most small-business tools.
Prompt Engineering for Chaos: I spent hours refining system instructions so Gemini could understand Sheng and mixed-language context, ensuring it never missed a decimal point in a transaction.

Google Gemini Feedback

The Good
The contextual intelligence of Gemini 1.5 Flash is world-class. It didn't just parse text; it understood intent. Whether a user forwarded a formal bank message or a casual "Jane paid me," Gemini treated the data with 100% accuracy. The speed of the Flash model is perfect for real-time WhatsApp webhooks—responses feel instant.

The Bad
I encountered significant regional friction regarding Google Cloud Billing. In Kenya, setting up a verified billing account for "production" tier models often results in cryptic errors (like the [OR-CBAT-23] code), which can be a massive barrier for developers in the Global South.

The Ugly (and how I fixed it)
During the heat of development, I hit a 429 "Limit 0" Quota Error on the Gemini 2.0 API. Google billing kept rejecting my payment method. This could have ended the project. Instead of stopping, I pivoted:

I shifted my backend to Gemini 1.5 Flash via AI Studio to bypass the billing lock, which also didn't work so I added OPENAI as a fallback
I troubleshooted a Meta App Conflict where two apps were fighting for the same phone number.
I automated the WhatsApp Registration Handshake using cURL to reduce the user registration process.

Conclusion: Daftari AI is more than a bot; it's a tool that could revolutionize bookkeeping by meeting users where they are - WhatsApp.

I built ResumeTarget AI - A tool to help you tailor your resume to a specific job in minutes

muvengei.dev — Sat, 14 Feb 2026 22:33:06 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built ResumeTarget AI - A tool to help you tailor your resume to a specific job in minutes. With the help of Copilot CLI, I built an entire Next.js, FastAPI. Postgres MVP and deployed it to EC2 with Terraform!

Problem Statement & Solution

I had a challenge applying to tech jobs and realised I had to apply to tens, if not hundreds, before I could secure an interview. For each application, I've had to customise my résumé to the target role (as defined by the job description). This was tedious and time-consuming. I decided to build a tool that leverages AI to help me tailor my résumés quickly and effectively. I have completed building the AI résumé builder. Now I'm working on the job description matching and résumé scoring feature to help score résumés for a target job. For this, I'm using Sentence Transformers to compute cosine similarities between résumé sections and job descriptions. I'm also using LLMs for résumé suggestions.

Resolving Gmail Rejection on HestiaCP - Exim4

muvengei.dev — Sun, 28 Sep 2025 05:15:23 +0000

Resolving Gmail Rejection on HestiaCP (Exim4)

The Issue

When attempting to send emails from Gmail to a mail server hosted on EC2 with HestiaCP, the messages were being rejected with the following error:

550 Rejected because xxx.xx.xxx.xx(gmail's IP address) is in a black list at zen.spamhaus.org

This happened because Exim4 was configured to block incoming messages from IPs listed on Spamhaus, which occasionally includes Gmail’s sending IPs.

Root Cause

HestiaCP’s default Exim templates include a dnslists (RBL) check against Spamhaus (zen.spamhaus.org). Since Gmail’s IP addresses can sometimes appear in this list, legitimate emails were being denied.

Fixing the Problem

Find the Exim configuration or template file

The RBL rule is likely located in the Exim configuration template:
```
 nano /etc/exim4/exim4.conf.template
```

To verify, search for the Spamhaus entry:

 grep -R "zen.spamhaus.org" /etc/exim4/

Modify the RBL block

You should find a section similar to this:

   deny message = rejected because $sender_host_address is in a black list at $dnslist_domain
       dnslists = zen.spamhaus.org

Option A – Disable completely
Comment out the block:

 # deny message = rejected because $sender_host_address is in a black list at $dnslist_domain
 #     dnslists = zen.spamhaus.org

Option B – Change to warnings
Replace deny with warn so suspicious emails are flagged but not blocked:

 warn dnslists = zen.spamhaus.org
      add_header = X-RBL-Warning: $sender_host_address is listed at $dnslist_domain

Rebuild and restart Exim

Apply the changes with:

   update-exim4.conf
   systemctl restart exim4

Result

Gmail messages can now be delivered successfully to your EC2 mail server.
Exim no longer blocks Gmail IPs just because they appear in Spamhaus.
If you use the warn approach, questionable emails are tagged rather than rejected.

Additional Notes

These changes only affect inbound mail filtering.
Outbound delivery still requires correct DNS configuration (PTR, SPF, DKIM, DMARC) and may also need AWS SMTP unblocking or an SES relay.

Notes: Leaving this here for future reference. Ps ✌️

The Case of the Frozen Supabase/Prisma db push: Why Your Migrations Might Be Stuck

muvengei.dev — Wed, 11 Jun 2025 16:06:13 +0000

Frozen Prisma `db push`: Why Your Migrations Might Be Stuck

Have you ever run npx prisma db push and watched it... do nothing? It just freezes, leaving you wondering if your database is giving you the silent treatment. If you've been working with Prisma and Supabase, you've likely encountered this exact scenario.

I recently ran into this issue while trying to push a my prisma schema:

# Regenerate client
npx prisma generate

# Attempting to push the schema
npx prisma db push --force-reset

The commands just hung, never completing successfully. A simple task becoming a frustrating blocker.

My findings: Direct Connections for Migrations

After some digging, I realized:

DIRECT_URL: This is your direct, unpooled connection to the Supabase database. This is what Prisma needs for database migrations and schema pushes.
DATABASE_URL: This is your connection string that goes through Supabase's connection pooler (Supavisor). This is ideal for your application's runtime queries, as it efficiently manages connections.

When you instruct Prisma to modify your database schema (such as with db push or migrate), it requires a direct, unmediated connection to the database. The connection pooler, while great for application traffic, can sometimes interfere with these administrative operations.

The Fix: Configure `directUrl` in Your Prisma Schema

The solution is straightforward: ensure your datasource block in schema.prisma explicitly defines directUrl and points it to your unpooled Supabase connection string.

Here's how your schema.prisma should look:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL") // Essential for migrations!
}

By adding directUrl = env("DIRECT_URL"), you're telling Prisma which connection to use for schema modifications. Ensure that your DIRECT_URL environment variable is correctly set in your development environment and any deployment pipelines.

This small but configuration change ensures your Prisma migrations run smoothly, preventing those frustrating freezes so that you can get back to writing your app.

What blocker have you faced while working with ORMs?

Personalized E-Learning Recommendation Agent.ai Based on Skills, Certification, Education, Experience Gaps 🧑‍💻📚

muvengei.dev — Sun, 26 Jan 2025 21:19:48 +0000

This is a submission for the Agent.ai Challenge: Full-Stack Agent (See Details)

What I Built

I built an intelligent agent that recommends tailored learning paths based on a user's career interests matched with gaps in skills, education, certifications, technical proficiencies by integrating real-time course data from multiple online learning platforms (e.g., Coursera, Udemy).

The Problem.

I am a web developer with an explorer spirit. I like to explore new technologies, and use them to bring ideas into digital reality. 🧑‍💻🚀

I spent countless hours trying to look for gaps in my skills and the best learning paths. Sometimes going from tutorial to another (tutorial hell) hence which wastes valuable time.

A beginner web developer came to me the other day asking me to recommend the best way to learn and share useful courses. I spend an hour preparing a good study guide together with online courses. Thanks to my agent, this process takes less than a minute.

The solution

An intelligent agent that recommends personalized learning paths and specific courses by aligning a user's career interests with their gaps in skills, education, certifications, and technical proficiencies. By integrating real-time course data from multiple online learning platforms like Coursera and Udemy, it crafts tailored learning journeys that bridge those gaps and accelerate the user's professional growth.

Demo

Try out my agent on this link or this link.

Steps

1>> Provide your key career interest. e.g. Full-stack developer, Data scientist

2>> Upload your resume

3>> Select the type of gaps to identify

4>> Get your recommendations.

Code

I used agent.at agent to collect the user info. i.e. career interests, resume, gaps to identify. Using an LLM model (best is Claude & GPT 4) I use the provided data to identify gaps in the format:-

{
  skill_gaps: ['javascript'],
  experience_gaps: ['python'],
};

Using the data above, I call my lambda function (which refused to deploy on agent.ai 😔).

const UDEMY_API_URL = "https://www.udemy.com/api-2.0/courses";
const COURSERA_API_URL =
  "https://api.coursera.org/api/courses.v1?q=search&query=";
const EDX_API_URL = "https://www.edx.org/api/v1/catalog/search?q=";
const UDEMY_API_KEY = "YOUR_UDEMY_API_KEY"; // Store securely (e.g., AWS Secrets Manager)

exports.handler = async (event) => {
  try {
    const skillGaps = event.skill_gaps || [];
    const experienceGaps = event.experience_gaps || [];

    let skillCourses = await fetchCourses(skillGaps);
    let experienceCourses = await fetchCourses(experienceGaps);

    return {
      statusCode: 200,
      body: JSON.stringify({
        skill_gap_courses: skillCourses,
        experience_gap_courses: experienceCourses,
      }),
    };
  } catch (error) {
    console.error("Error fetching courses:", error);
    return {
      statusCode: 500,
      body: JSON.stringify({ error: "Failed to fetch courses" }),
    };
  }
};

const fetchUdemyCourses = async (keyword) => {
  try {
    const response = await fetch(`${UDEMY_API_URL}?search=${keyword}`, {
      headers: { Authorization: `Bearer ${UDEMY_API_KEY}` },
    });
    const data = await response.json();

    return data.results.map((course) => ({
      name: course.title,
      price: course.price,
      duration: course.hours || "Varies",
      link: `https://www.udemy.com${course.url}`,
    }));
  } catch (error) {
    console.error("Udemy fetch error:", error);
    return [];
  }
};

const fetchCourseraCourses = async (keyword) => {
  try {
    const response = await fetch(`${COURSERA_API_URL}${keyword}`);
    const data = await response.json();

    return data?.elements?.map((course) => ({
      name: course.name,
      price: "Free or Paid",
      duration: "Varies",
      link: `https://www.coursera.org/learn/${course.slug}`,
    }));
  } catch (error) {
    console.error("Coursera fetch error:", error);
    return [];
  }
};

const fetchEdxCourses = async (keyword) => {
  try {
    const response = await fetch(`${EDX_API_URL}${keyword}`);
    const data = await response.json();

    return data?.objects?.map((course) => ({
      name: course.title,
      price: course.price || "Free or Paid",
      duration: course.length || "Varies",
      link: course.marketing_url,
    }));
  } catch (error) {
    console.error("edX fetch error:", error);
    return [];
  }
};

const fetchCourses = async (keywords) => {
  let courseResults = [];

  for (const keyword of keywords) {
    const [udemyCourses, courseraCourses, edxCourses] = await Promise.all([
      fetchUdemyCourses(keyword),
      fetchCourseraCourses(keyword),
      fetchEdxCourses(keyword),
    ]);

    courseResults.push(...udemyCourses, ...courseraCourses, ...edxCourses);
  }

  return courseResults;
};

The lambda function returns courses in the format:

{
        skill_gap_courses: [
          { name: 'Course 1', price: '10', duration: 5, link: 'https://www.udemy.com/course1' },
          { name: 'Course A', price: 'Free or Paid', duration: 'Varies', link: 'https://www.coursera.org/learn/course-a' },
          { name: 'Course X', price: 'Free', duration: '8 weeks', link: 'https://www.edx.org/course-x' },
        ],
        experience_gap_courses: [
          { name: 'Course 1', price: '10', duration: 5, link: 'https://www.udemy.com/course1' },
          { name: 'Course A', price: 'Free or Paid', duration: 'Varies', link: 'https://www.coursera.org/learn/course-a' },
          { name: 'Course X', price: 'Free', duration: '8 weeks', link: 'https://www.edx.org/course-x' },
        ]
}

Using agent.ai output, I display the end results to the user.
Note: I'm able to generate learning recommendations using a LLM, together with the courses response.

The agent.ai configuration

Drawbacks 😔

I couldn't get the lambda function to deploy on agent.ai. I was getting an error
Haven't found udemy open api client.

Agent.ai Experience

I was amazed at how easy it is to get a personalized agent up and running with Agent.ai. One of my takers was the ability to choose from multiple LLM engines. This was very useful since an LLM could be good for something in comparison with the others.

Based on the selected career path, this agent identifies gaps in one's resume then suggests courses and study paths to achieve the missing skills. I was to leverage an AWS cloud function to query Udemy and Coursera courses APIs. Unfortunately, I couldn't find open sourced courses API and also my could function failed to deploy. Which is a challenge I faced on the Agent.ai platform.

I had a little challenge reading from uploaded files until I came across a YouTube video that suggests using "Get Data from Builder's Knowledge Base" to read files.

It worked like magic. 🚀

Looking forward to building more complex agents.
Thanks for the read. 🙏

E-Learning Recommendation Agent.ai Based on Your Resume & Identified Skills, Certification, Education, Experience Gaps 🧑‍💻📚

muvengei.dev — Sun, 26 Jan 2025 21:19:43 +0000

This is a submission for the Agent.ai Challenge: Productivity-Pro Agent (See Details)

What I Built

The Problem.

I am a web developer with an explorer spirit. I like to explore new technologies, and use them to bring ideas into digital reality. 🧑‍💻🚀

I spent countless hours trying to look for gaps in my skills and the best learning paths. Sometimes going from tutorial to another (tutorial hell) hence which wastes valuable time.

The solution

Demo

Try out my agent on this link or this link.

Steps

1>> Provide your key career interest. e.g. Full-stack developer, Data scientist

2>> Upload your resume

3>> Select the type of gaps to identify

4>> Get your recommendations.

Agent.ai Experience

I had a little challenge reading from uploaded files until I came across a YouTube video that suggests using "Get Data from Builder's Knowledge Base" to read files.

It worked like magic. 🚀

Looking forward to building more complex agents.
Thanks for the read. 🙏

Building a Nuxt.js + Vue.js SaaS Starter: Authentication, Payments, and Supabase Made Easy. A nuxt js saas starter

muvengei.dev — Sat, 21 Sep 2024 18:16:27 +0000

Building a Nuxt.js + Vue.js SaaS Starter: Authentication, Payments, and Supabase Made Easy

Hey Devs! 👋

I’m excited to share a project I’ve been working on—a Nuxt.js + Vue.js SaaS starter designed to make building and scaling SaaS apps much easier. It includes:

NextAuth for flexible authentication
Stripe for handling payments and subscriptions
Seamless integration with Supabase for your database and real-time needs

Why I Built This

Starting a SaaS project can be daunting, with so many moving parts—auth, payments, subscriptions, and a database connection, just to name a few. I wanted to create a starter template that takes care of these essentials so you can focus on building out the core features of your app.

What's Included

NextAuth integration: Easily manage user authentication with providers like Google, GitHub, and more.
Stripe integration: Out-of-the-box payments and subscription handling.
Supabase connection: A powerful, scalable backend with minimal setup.

Why Use It?

If you're starting a SaaS project, this starter kit will save you hours of setup and debugging time, allowing you to focus on building your product. Whether you're working on a side project or launching a new business, the goal is to give you a solid foundation that takes care of the boring parts.

Try it Out

Check out the GitHub repo: nuxt-saas-starter
Live demo on Vercel: nuxt-saas-starter.vercel.app

What’s Next?

I'm continuing to fine-tune the project and would love feedback from the community. If you’re interested, feel free to check it out, contribute, or offer suggestions!

Let’s build something awesome! 🚀

Feel free to comment below if you have any questions or ideas!

How to setup nuxt-auth v6 authentication with the "credentials" provider on nuxt3 project

muvengei.dev — Sat, 22 Jul 2023 13:09:14 +0000

nuxt-auth is an open source Nuxt module that provides authentication for non-static Nuxt 3 applications. - sidebase
The easiest way to get started with nuxt-auth is using the sidebase Merino stack: - sidebase

My Opinion:

It disappoints when I have to go through the entire documentation of a module for a basic implementation. This happened to me when I was setting up nut-auth on my client’s project. Coming from Nuxt 2 to Nuxt 3 a lot had changed. And with such changes came newer Nuxt modules, most of which had a different implementation. It took me a considerable amount of time to set up nuxt-auth for the first time. I’m going to write about my implementation so that you don’t have to go through the same “struggle” as I did.

A BTW: What did the senior dev say to the junior dev? 'I am the documentation!'

TLDR;
Setting up nuxt-auth with credentials provider: Quick

Note: This guide assumes that your api lives in a different environment.

Lets dive in.

Step 1: Create a new Nuxt app.

Open your favourite terminal, navigate to your projects folder and run this command.

npx nuxi@latest init my-app

If you have already setup a nuxt project, you can skip to the next step.

Step 2: Install nuxt-auth module.

Install nuxt-auth by running this command on the root folder of your project

// npm
npm i -D @sidebase/nuxt-auth

// yarn
yarn add @sidebase/nuxt-auth

For this article, I used "@sidebase/nuxt-auth": "0.6.0-beta.3",

Step 3: Add nuxt-auth to nuxt.config.ts

Open the project on your favourite editor, preferably VSCode.
Open nuxt.config.ts file located in the root of your project, look for the modules option and add @sidebase/nuxt-auth

It should look like this:

export default defineNuxtConfig({
   modules: ['@sidebase/nuxt-auth'],
})

Step 4: More configs on nuxt.config.ts

While on the nuxt.config.ts file, at the same level as modules, add the auth configs as shown below. Each option has comments. For more options, checkout the official documentation.

/* Auth */
  auth: {
    globalAppMiddleware: true,
    baseURL: process.env.NUXT_PUBLIC_API_URL,
    provider: {
      type: 'local',
      endpoints: {
        signIn: { path: '/identity/accounts/login', method: 'post' },
        signOut: { path: '/identity/accounts/logout', method: 'get' },
        signUp: { path: '/identity/accounts/register', method: 'post' },
        getSession: { path: '/identity/me', method: 'get' }
      },
      pages: {
        login: '/signin'
      },
      token: {
        signInResponseTokenPointer: '/accessToken'
      },
      sessionDataType: {}
    },
    enableSessionRefreshPeriodically: 5000,
    enableSessionRefreshOnWindowFocus: true,
    globalMiddlewareOptions: {
      allow404WithoutAuth: true, // Defines if the 404 page will be accessible while unauthenticated
      addDefaultCallbackUrl: ‘/' // Where authenticated user will be redirected to by default
    }
  }

Here I have explained each of the options above.

globalAppMiddleware
Setting this to true protect all routes by default.

If you want to exempt a route from the auth middleware, add this code on the page’s definePageMeta macro:

definePageMeta({
  auth: false,
})

If you want a page to be accessible only when logged out, add this to definePageMeta macro:

definePageMeta({
  auth: {
    unauthenticatedOnly: true,
    navigateAuthenticatedTo: ‘/‘, // Where the user should be redirected if not logged in
  },
})

baseURL - The base api url to your auth module

provider
The authentication provide. For this article, we are going to focus on the local provider. Inside here, we will define the provider type and options.

    `type: ‘local'` - We’re going to use the local provider
`endpoints` - define the authentication endpoints for:
    `signIn`
    `signOut`
    `signUp`
    `getSession` - This is the url for fetching the logged in user data

token
Takes in signInResponseTokenPointer which is basically the key that contains the accessToken after a successful login.

*Note: This was the most confusing part for me. *
For instance, if the login response looks like this:

{
    accessToken: 'Bearer <token>',
    status: 'success'
}

Then the token option should look like this:

token: {
  signInResponseTokenPointer: '/accessToken'
}

To read more about all the possible options checkout the nuxt-auth options documentation.

Step 5: Setup your signIn, signUp, signOut, getSession components

SignIn

<script lang="ts" setup>

const { signIn } = useAuth() // uses the default signIn function provided by nuxt-auth
const formData = reactive({
  email: '',
  password: '',
})


const login = async (e) => {
    try {
      e.preventDefault()
      let res = await signIn(
        { ...formData },
        { callbackUrl: '/home' } // Where the user will be redirected after a successiful login
      )

      console.log("res", res);

    } catch (error) {
      console.log("error", error);
    } 
}

definePageMeta({
  title: 'Signin',
  layout: 'empty',
  public: true,
  auth: {
    unauthenticatedOnly: true,
    navigateAuthenticatedTo: '/',
  },
})


</script>

<template>
  <div>
    <div class="custom-bg mb-14 p-14 text-center text-white">
      <h1>Sigin</h1>
    </div>
    <form @submit.prevent="login" class="card custom-card mx-auto w-11/12 max-w-md bg-white p-6 shadow-lg">
      <input type="email" v-model="formData.email" name="email" placeholder="email here.." />
      <input type="password" v-model="formData.password" name="password" />
      <button type="submit">Sign In</button>
    </form>
  </div>
</template>

SignUp

You can implement the signup. Its way similar to signIn. It can even be a fetch or axios request.

SignOut

<script lang="ts" setup> const { signOut, token} = useAuth()
async function _signOut() {
  try {
    await signOut({
      callbackUrl: '/account/signin/',
      redirect: true
    })
   // Add after logout logic here, could be removing the session data from localstorage or whatever
  } catch (error: any) {
    toast.add({ severity: 'error', summary: 'error', detail: error?.data?.message || error?.message, life: 5000 });
  }
}
</script>
<template>
<button @click="_signOut()">
   Sign Out
</button>

</template>

getSession

Add a home page. This will be protected by default by the globalAppMiddleware.

<script lang="ts" setup>

definePageMeta({
  title: 'Home',
  layout: 'home',
  public: true
})

const { data, status, getSession } = useAuth()

// data - authenticated user data returned from getSession option that we setup on nuxt.config.ts
// status - unauthenticated | authenticated
// getSession - call this function asynchronusly to get the session data. i.e. The authenticated user data

</script>

<template>
  <div class="flex flex-col items-start justify-center p-5 sm:p-14">
    <h1 class="text-white text-2xl md:text-4xl  mb-5">
      Hello, 
      <span v-if="status === 'authenticated'">{{ data?.first_name + ' ' + data?.last_name }}</span>
    </h1>
    <p class="text-white opacity-60">Welcome back</p>
    <Logout></Logout>
  </div>
</template>

How to run the project

Add a .env file at the root of your project and add this config file:

NUXT_PUBLIC_API_URL=<your-api-endpoint>

Start a dev server by running this command in terminal at the root of your project:
npm run dev

The project should now be accessible at:
http://localhost:3000

Findings

If you navigate to /home you will be redirected to /signin since the route is protected.

Navigating to / works when authenticated or unauthenticated

Navigating to /sigin while authenticated should redirect you to /home

Clicking Logout button while at /home should log you out, and redirect you to /signin

Conclusion

If you have followed these steps, you should have a working nuxt-auth implementation! You can find the complete project on Github.

Is Continuous Learning Helping your Web Development Career?

muvengei.dev — Wed, 24 Nov 2021 14:09:58 +0000

My Big Question

Hello folks, here's another one and the topic is "Is Continuous Learning Helping your Web Development Career?". This is a critical question that I've been asking myself every now and then. I'll tell you what I think. Hopefully this helps many other developers out there who're asking the same question.

Quick Facts

Becoming a software developer is something that interests every beginner, every person who has just entered the field. It's interesting at first but it becomes serious when you're depending on writing code to pay bills. Even when you're really beat, you have to write code, cause in most cases its your main source of income. You can't just take a long break or can you?
Again, when you're a web developer, its more challenging. There's a lot of frameworks and libraries popping up each now and then. You're learning a framework today, tomorrow there's something else. You're using React in your current job, when you move to another company, they're using Vue or even Angular. I know there's so much in common between all of these technologies, but again, how can you be a top notch professional when you're jumping between frameworks or libraries.
In summary, there's so much to learn! To remain competitive in the software development field, you have to never stop learning. It's a continuous process.

My Brief Journey

Personally, I started as a PHP/Laravel Developer. I worked for a startup in my town where I developed over 5 web based applications - Fee management system, Tenant Management System and many more. After a few months, there came another guy who knew JQuery really well. He could do CRUD operations without refreshing the page. My former boss developed some interest in him. I was afraid of loosing my job. I had to stay competitive, I had to know SPAs. So I learned Vue js and now I would develop interactive applications with Vue and Laravel. It helped me remain really competitive. I didn't lose my job 😊! I ended up loving Vue js. Now I work as a Frontend developer with Vue.js thanks to learning Vue! That's just one instance. There have been many occasions through my Web Development Career where I've had to learn new stuff just to remain competitive. Most of which I have not used. As a matter of fact, there are times when I feel spread thin! (Knowing too much stuff and not being a professional in each)

My View

As much as its advisable to keep learning new stuff, I prefer being a professional in one or two frameworks! Pick a language, like Javascript choose a framework, like React, or even Vue. Learn it! Develop solutions, be a Professional React or Vue developer. If anything, be a professional!

What's your view?

So what's your view? What's your experience? Let me know in the comment section below.

Cover photo by Unsplash

How to Use Environment Variables (env) in ExpressJs

muvengei.dev — Thu, 21 Oct 2021 13:49:28 +0000

Well, hello!
If you're coming from frontend development with Vue, or React, you know that environment variables (.env) are initialized behind the scenes i.e. You don't have to require and use dotenv. However, when writing backend with, Expressjs, for instance, you have to initialize it like so:-

require('dotenv').config({path: './.env'});

Problem: Env variable not found

A friend was building an API with Expressjs. He needed to connect to stripe for the payments. The response from stripe was Authorization headers are missing. He couldn't get why this was happening despite the fact that he had defined the Stripe Secret Key on the environment variables (.env), and used it when initializing "stripe" npm package.

Server.js

..
const stripeRoute =  require("./routes/stripe")
..
require('dotenv').config({path: './.env'});
..

routes/stripe.js

const stripe = require("stripe")(process.env.STRIPE_KEY);

.env

STRIPE_KEY=key_goes_here

Soln: Define environment variables before using them

The error was as a result of defining the Stripe routes before requiring the .env. This solved his issue:

require('dotenv').config({path: './.env'});

const stripeRoute =  require("./routes/stripe")

Personally I like to define my environment variables at the start of the server file.

Cool Projects to Help You Learn React Js - Part 2

muvengei.dev — Thu, 07 Oct 2021 16:35:09 +0000

Hello there 👋, citizens of the web!
A couple of days ago I decided to write a series of articles on Cool Projects to Help You Learn React Js. I remember when I started learning react, I went through the documentation, then I had to come up with interesting projects to help me grasp the concepts. I needed an API that I'd consume. However I didn't have the time to start building one. I went through the web and found interesting APIs that are publicly available for anyone to use. This saved me much time to work on other projects.

Now, I'd like to share the APIs with you so that you can bootstrap on React ASAP, and save time while doing it! After all, who doesn't need extra seconds? 😃 Note that you can consume these APIs with any frontend framework of your choice. Be it ReactJS, React Native, VueJS, Flutter, Angular, etc.

For the ReactJS enthusiast, I'll point out ReactJS concepts you can learn through each of these APIs.

Let's dive in!

1. NASA Open APIs

Welcome to the NASA API portal. The objective of this site is to make NASA data, including imagery, eminently accessible to application developers. This catalog focuses on broadly useful and user friendly APIs and does not hold every NASA API. - Nasa

Isn't this amazing? This API allows you to integrate these NASA functionalities into your build:-

Astronomy Picture of the Day
Space Weather Database Of Notifications, Knowledge, Information
Earth Observation Data and Natural Event Triacker
Mars Weather Service API - This could be useful in the event of a zombie apocalypse and we all move to Mars 😂

And many more that you'll find on the official website.

### What you'll learn while building this project

React Router - In case you need multiple pages for your project
Rendering Elements, Conditional Rendering
State and Lifecycle
Handling Events
Lists and Keys, Forms
Code Splitting, Context
React Hooks -useEffect, useState, useParams, etc

2. Coinbase Crypto API

Crypto nerds I got something for you! You can build your own crypto trading web app where you can:-

Check the price of a crypto
Buy it
Track your activity
Get notifications when the price of a crypto changes and more React Fetch API or Axios while getting or posting data to the api.
You can also integrate charts.

What You'll Learn

Authentication - The Coinbase API provides a passport authentication capability.
Protecting Routes
useFetch, React Fetch API or Axios while getting or posting data to the api.
You can also integrate charts.

This is more of a real world app that you can add to your portfolio. If you do it just right, it can help you secure a Frontend Job!

Let me leave it at that! If you like this article you can leave a comment below. You can also share other open APIs we can use to learn stuff.

You can also check out part 1 of this series.

I can also help you with your Reactjs code

Cool Projects to Help You Learn React JS - Part 1

muvengei.dev — Tue, 05 Oct 2021 21:18:15 +0000

Introduction

What is React

React is a declarative and component-based Javascript Library for building web interfaces. Its developed and maintained by Facebook. Although it's grouped with other "Frameworks" like VueJS and Angular, its termed much as a Library and not a framework. Find out more about React on this link.

Why this article?

Personally, when I want to learn a new Framework, I go through the documentation to grasp the basic and core 'Hows and Whys', then I start basic applications to practice the concepts I've learned. This has always worked like magic for me. It goes without saying that learning by doing does a lot when it comes to grasping new concepts. I choose this approach since writing code is like a science, its a creative, intuitive and involving activity, like Math. Hence, learning by doing does it!

Let's skip the poetry and head first into the interesting part of this article.

Interesting React Projects

1. React Clock Faces A.K.A. ReactCF - A Simple React.Js Clock With Many Faces

For this projects you'll learn these skills. The purpose of the project can be to display a Digital Clock that updates itself after every second, just like an actual digital watch. You can have different styles, or rather faces for displaying your digital clock. Hint: Use Javascript's built in function: setTimeout()

React Components
Reusability
React DOM and Reactivity
React Hooks: useEffect, useState

2. Stockfoto

However you may call it, the main aim of this project is to consume Unsplash Photos API, which is open source and have fun while doing it. Note: Read through Unsplash API Guildlines to make sure you're not breaking any rules. This will be a very interesting project!
The api and interesting endpoints

Random Picture
Latest pictures
Search Pictures
Get One Picture and download picture

What you will learn:-

React Components
Reusability
React DOM and Reactivity
React Hooks: useEffect, useState
React fetchAPI
ES6

Cool Features you could implement.

Lazy loading Images
Lazy Loading Pagination - Load more images when a user scrolls to the bottom

I'll be happy to see what you create!
I can also help you with your Reactjs code

As you wait for Part 2.
Regards

Forem: muvengei.dev

I Built Daftari - A Digital Ledger for Solopreneurs to Track Job Cards and Payments via WhatApp Chats

What I Built with Google Gemini

The problem

The Solution: Daftari AI (Swahili for Ledger)

Demo

What I Learned

Google Gemini Feedback

I built ResumeTarget AI - A tool to help you tailor your resume to a specific job in minutes

What I Built

Problem Statement & Solution

Resolving Gmail Rejection on HestiaCP - Exim4

Resolving Gmail Rejection on HestiaCP (Exim4)

The Issue

Root Cause

Fixing the Problem

Result

Additional Notes

The Case of the Frozen Supabase/Prisma db push: Why Your Migrations Might Be Stuck

Frozen Prisma db push: Why Your Migrations Might Be Stuck

My findings: Direct Connections for Migrations

The Fix: Configure directUrl in Your Prisma Schema

Personalized E-Learning Recommendation Agent.ai Based on Skills, Certification, Education, Experience Gaps 🧑‍💻📚

What I Built

The Problem.

The solution

Demo

Steps

Code

Drawbacks 😔

Agent.ai Experience

E-Learning Recommendation Agent.ai Based on Your Resume & Identified Skills, Certification, Education, Experience Gaps 🧑‍💻📚

What I Built

The Problem.

The solution

Demo

Steps

Agent.ai Experience

Building a Nuxt.js + Vue.js SaaS Starter: Authentication, Payments, and Supabase Made Easy. A nuxt js saas starter

Building a Nuxt.js + Vue.js SaaS Starter: Authentication, Payments, and Supabase Made Easy

Why I Built This

What's Included

Why Use It?

Try it Out

What’s Next?

How to setup nuxt-auth v6 authentication with the "credentials" provider on nuxt3 project

Step 1: Create a new Nuxt app.

Step 2: Install nuxt-auth module.

Step 3: Add nuxt-auth to nuxt.config.ts

Step 4: More configs on nuxt.config.ts

Step 5: Setup your signIn, signUp, signOut, getSession components

SignIn

SignUp

SignOut

getSession

How to run the project

Findings

Conclusion

Is Continuous Learning Helping your Web Development Career?

My Big Question

Quick Facts

My Brief Journey

My View

What's your view?

How to Use Environment Variables (env) in ExpressJs

Problem: Env variable not found

Server.js

routes/stripe.js

.env

Soln: Define environment variables before using them

Cool Projects to Help You Learn React Js - Part 2

Let's dive in!

1. NASA Open APIs

2. Coinbase Crypto API

What You'll Learn

Cool Projects to Help You Learn React JS - Part 1

Introduction

What is React

Why this article?

Interesting React Projects

Frozen Prisma `db push`: Why Your Migrations Might Be Stuck

The Fix: Configure `directUrl` in Your Prisma Schema