DEV Community: Nabil Alamin

Hacktoberfest Rant

Nabil Alamin — Tue, 28 Oct 2025 21:45:05 +0000

This is a submission for the 2025 Hacktoberfest Writing Challenge: Open Source Reflections

Intro

Hacktoberfest exists for devs to get their feet wet with contributing to open source. We hope they find projects they're passionate about that they can contribute to long-term.

The community is welcoming and supportive, while the contributors are well-meaning. From minimal contributions like haikus to solving complex bugs and adding features, all are welcome...but with the advent of LLMs, these good intentions from contributors are becoming harder to notice.

Rant😅

Over the past year, I've seen several cases where people make PRs with little to no effort, from having an agent submit a PR in which it deletes chunks of JSDoc comments in the process of adding a 'feature', to submitting PRs that delete issue-causing code, to writing tests that pass without actually doing anything. Seeing stuff like this has made me chuckle at times, but they can be frustrating as well, and I'd imagine maintainers find them annoying to review.

Now I'm not against AI-assisted coding, far from it; I use it almost every day. What I am against is barely putting any effort just to get a badge or some other 'achievement'.

At the same time, I can understand where this may be coming from. There was a time when I was obsessed with having my GH grid all green, thinking it meant productivity...I mean, some days it was, other days it was just the most mundane, trivial commit just to tick a box, so don't get me wrong, I understand the search for dev achievement.

It's just that when people start contributing to projects without any actual effort, care or context about the project, you're really doing more harm than good to the project and, most importantly, yourself.

The joy of OSS for me has always been in the personal growth you can achieve from working on amazing projects. So don't shortchange yourself.

If you're looking for something complex to do, or something with a lower barrier, or even something in between, there are a ton of projects out there. Don't just pick something with a high number of stars and use Cursor to submit a PR just because you can. It may work out or not (and then you become the butt of a joke 😉), but either way, you've lost a potential growth/learning opportunity.

So take the time to find projects you can care about and make that PR in your own time, hacktoberfest will come and go, but your contribution will always be there...make it a good one.

PS: I haven't submitted a PR in almost two months, I probably should before October ends 😜

A Recruiter's favourite tool: Powered by Postmark

Nabil Alamin — Fri, 06 Jun 2025 22:36:57 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

❔ What I Built

I created a low-friction job postings management dashboard with applicant parsing and a job board for potential candidates to apply.

⏩ TLDR

Job Posts Dashboard:
- Create and manage jobs.
- Track, evaluate and communicate directly with candidates and their applications within the app.
Job Board Site:
- View and apply to jobs created on the dashboard.
Postmark implementation:
- Receive candidate applications - inbound email.
- Auto send confirmation of application - transactional email.
- Email communication between the candidate and admin - transactional email.

💻 Demo

Dashboard
Job board

Code Repository

arndom / job-board-admin

Jobs management dashboard & applicant parser powered by postmark

🧠 JobBoard Admin: Jobs Management Dashboard & Applicant Parser

A full-stack recruitment dashboard demo that parses email-based job applications, extracts applicant data (including CVs and cover letters), stores and scores them intelligently, and allows admins to manage and communicate with candidates — all from a unified Supabase-powered UI.

There's a demo app to view the jobs:

✨ Features

📥 Email-Based Applications Applicants apply via email to dynamic addresses like xcxcxc@{custom.domain.com}.
🔐 DKIM, Return-Path, and MX Setup Fully authenticated sending and receiving under a custom subdomain.
🧠 AI-Powered Parsing & Scoring Cloudflare Workers + LLM extract:
- Timezone & location
- Trust score (e.g., LinkedIn, GitHub presence)
- Seniority level
- Sentiment analysis (CV, cover letter)
- Match % with job description
📂 Supabase Storage Integration Stores and retrieves uploaded CVs and cover letters.
📊 Admin Dashboard UI Built with Refine + Material UI:
- View all jobs, applicants, applications
- Track trust score, match…

View on GitHub

arndom / job-board-site

Job application demo site for https://github.com/arndom/job-board-admin

💼 Remote Job Board — Email-Based Applications

A simple job board built as demo for the JobBoard admin app:

Built with Next.js, Tailwind CSS, and Supabase — designed for email-driven applications. Applicants apply by sending emails..

✨ Features

📃 Live Job Listings
- Publicly viewable jobs pulled from Supabase
- Styled with shadcn/ui and Tailwind
✉️ Email-to-Apply
- Each job post displays a unique email (e.g., xcxcxc@{custom.domain.com})
- Clicking opens the user’s email client with prefilled email, subject, body.
💻 Responsive Design
- Clean, minimal, and responsive with shadcn/ui + Tailwind
⚡ Built with:
- Next.js (App Router)
- pnpm
- Supabase (for job data)
- Tailwind CSS
- shadcn/ui components

📸 Preview

⚙️ Local dev

Setup .env

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_KEY=your-key

Add types from your supbase

npx supabase gen types typescript --project-id {projectId}  > types/database.types.ts

Run locally

pnpm install
pnpm dev

View on GitHub

How I Built It

It was my first time hearing about Postmark, so I was unsure of what to build with it, and with limited time to join, I chose not to participate. When the hackathon got extended, I had more leeway and decided to go with what I see as a practical use of Postmark's inbound email parsing feature as part of a larger system: A job posts management dashboard for a small company.

I started by creating my database on Supabase, comprising tables for jobs, applicants and applications. The goal was speed, due to trying to get a lot done with my already tight schedule, so I used v0 to quickly draft the job board UI, which I tweaked after generation. Next, I used refine to create the base admin dashboard, added some material ui theme customisations and eventually got my layouts for both apps done. That was the easy part.

Setting up Postmark was relatively straightforward. I joined the platform and verified the subdomain jobs of my portfolio site arndom.dev by updating my DNS records for DKIM and Return-Path next, I followed the Configure an Inbound Server guide and also updated my DNS records MX value for inbound domain forwarding. These two steps would allow me to send and "receive" emails via my subdomain: [anything]@jobs.arndom.dev.

I got started building my inbound webhook leveraging Supabase edge functions. I started with simple functionality like receiving the application email and extracting the necessary information:

Getting the job info based on the unique job email the candidate applied for.
Then, creating/updating a candidate(applicant) entry in the database, giving basic information like name and email, after which I created an application.
After getting that working and testing my flow end-to-end, from the job board to the job board dashboard, I began working on the evaluation of candidates with the use of an LLM.
I opted for a Cloudflare worker AI integration with Ollama simply because it was what I already knew.
After some fiddling around, I was able to produce some usable outputs and feed them into the tables.
I used the LLM to parse values:
- Calculate the match of the applicant to the job based on CV, letter, email body to job requirements, skills, and description.
- Calculate of applicant trust value based on "proof" of public URLs like github, and LinkedIn
I also added a confirmation email to be sent when the inbound email is done being processed.

At the time, I thought that was all, but with a bit more time on my hands, I went all in and added a communications feature within the app. I already had the send email functionality implemented, so I extended it by making another edge function to use in the admin via a chat interface.

This also led to creating an email table and making necessary changes to the inbound parser and send-email functions.

The last thing I did in development was fetch the jobs for the job board using Tanstack Query. After which, I deployed everything and wrote some documentation. Overall, it was a fun and interesting build. Learnt a lot more about the DNS system thanks to this.

Thanks for reading, do check out the apps Dashboard, Job board and have a day👋.

Still worth a read 5+ years later

Nabil Alamin — Sat, 08 Feb 2025 17:31:57 +0000

What's my age again?

Ben Sinclair ・ Sep 22 '19

#discuss #career #watercooler

Integrating Stellar with Next.js, Nuxt 3 and SvelteKit

Nabil Alamin — Sun, 18 Aug 2024 16:14:40 +0000

This is a submission for the Build Better on Stellar: Smart Contract Challenge : Create a Tutorial

Your Tutorial

https://soroban-js-docs.netlify.app/

What I Created

This tutorial covers integrating a Soroban smart contract with an app built with Next.js, Nuxt 3 or SvelteKit.

How to build the same app in Next, Nuxt and SvelteKit

Journey

It had been a while since I last tinkered with web3. This competition was good motivation to play around a bit. It was my first time hearing about Stellar and the SDF but I was impressed by their work, especially with the UNHCR.

What to build?

I had initially intended to make a dApp to find charities that can be supported with crypto and gamify the experience; sort of like a continuous giving experience in which users try to aid consistently and get rewarded with some character/EXP growth in the app. But work and life schedules didn't allow for this.

I pivoted to making a tutorial about integrating Soroban into an application. The tutorial had to be something that helped people get a hands-on approach to integrating with smart contracts. I make apps with React but I noticed there was a lack of resources for building with other frameworks in the space so why not try that as well?

It would be a tutorial that would appeal to more people, potentially grow the stellar community and enable me to learn about other frameworks.

The experience

I took inspiration from the soroban-example-app created by paltalabs and made an app using NextJS, Tailwind and DaisyUI. That was the easy bit, I now had to recreate the experience in Nuxt and SvelteKit...fireship would be proud 😉.

Having never used both frameworks it was all about the docs to understand how they work, especially state management, luckily it wasn't too hard to wrap my head around.

After which there was the integration to figure out; there were no out-of-the-box solutions like for react, so I had to look at how soroban-react did it and then create my implementation for each framework. After some later nights and weekends, it was all working and I was glad for the experience.

You can check out the tutorial built with docusaurus here: https://soroban-js-docs.netlify.app/

Net Gala: Netlify Img Transforms

Nabil Alamin — Sat, 11 May 2024 10:23:09 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

It's more of a snack than a feast, but I made a gallery app to recreate pieces of a couple of sites I found on awwwards. It's got nice transitions, has a monochromatic feel and takes advantage of Netlify's Image CDN and it's transforms feature.

Demo

Give it a try: Link ✨
Here's the Code💻

Platform Primitives

I used the CDN for fetching and transforming images in my NextJS app, it also provides some amazing cache out of the box. Using the custom loader prop in the next/image component, I was able to apply the following transforms:

Sizing
Object Fit
Format
Quality

Here's a snippet of the loader:

  const loadImage = (args: ImageLoaderProps) => {
    const { src } = args;

    return `.netlify/images?url=${src}&w=${transforms.width}&h=${transforms.height}&q=${transforms.quality}&fit=${transforms.fit}&fm=${transforms.format}`;
  };

And here's the UI implementation:

Generally, when using NextJS 13.5+ with Netlify, you don't need a custom loader, the cdn works by default with next/image but I needed the loader for some of the transforms and flexibility in rendering. Thanks @hrishikeshk for pointing that out.

Conclusion

It was a fun experience building this, I got the chance to implement some nice designs and transitions, play around with CSS and try out a new component library. I'm also really delighted with how the bottom section turned out:

Thanks for reading and have a great day 👋

...I wonder if anyone got the pun in the title 🤔

WebDev Docs Workflow

Nabil Alamin — Thu, 25 Apr 2024 05:57:27 +0000

This is a submission for the Coze AI Bot Challenge: Trailblazer.

What I Built

WebDevDocs is a workflow that aims to provide bots with up-to-date documentation and information regarding various areas of web development; from a library, package, framework, standard, programming language and everything in between.

Demo

Here's an example bot to see it in use: Web Dev Docs

Workflow Link

Journey

Whenever I tried using ChatGPT or Gemini to get real-time information, they weren't always helpful so hearing about the Coze platform allowed me to create a potential solution.

While making this, I tried to jam as many features as possible; looking for up-to-date articles, parsing through github issues, going through code, and many more... at the end of the day, the workflow test run failed. After some interactions on their discord, I figured that running such complex activities would lead to hitting a limit.

After a night of fighting trying to make a loop work to reduce the load (which didn't work, was tempted to make conditional loops workflows my submission 😅), I cut it down to simply finding the links and pointing a user in that direction, the reason being those extra features can be built using this workflow as a base.

Thanks for reading and I hope you find this workflow helpful 👋

Recreating a GIF with CSS: Earth Day Edition

Nabil Alamin — Sat, 20 Apr 2024 22:18:46 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

When I saw the challenge I wanted to participate to improve my skills, and when I saw the GIF in the announcement post I knew what to attempt. I had never done any "complex" animations with CSS alone so this was the right time to try.

Demo

sadly, it doesn't loop so click rerun↗️ to replay

Journey

Upon reading the announcement and seeing the GIF, I knew I had to attempt a CSS recreation. It was unique, outside my comfort zone and something worth doing and sharing.

I started by watching a video about CSS animations from Kevin Powell on YT as I had no idea where to start from. After this, I created a codepen account and started figuring things out.

I broke the GIF into chunks, starting from the clouds, then the earth, its face, its map background and its tree, while sequentially animating these elements along the way.

Time flew by as I initially struggled but eventually got the hang of things. At the end of it all, the animation was done and though it wasn't perfect, It looked great and I was pleased with it.

Used Resources

Rewrite Movie/TV endings with AI

Nabil Alamin — Fri, 12 Apr 2024 07:27:14 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

A simple site where you can reimagine how your favourite shows ended (unsatisfactory or cancelled too early). Using GenAI you can get a summary and an accompanying illustration for up to 5 different alternate endings.

Demo

https://ending-maker.pages.dev/

My Code

arndom / ending-maker

Reimagine your favourite TV and Movie endings

About Ending Maker 🌟

Stack

NextJS
TailwindCSS
MUI BaseUI
Cloudfare Pages
Cloudfare Workers REST API

Development

# install dependencies
npm i

# run locally
npm run dev

Leave a 🌟 if you found this interesting.

View on GitHub

Journey

I always rewatch the Forever TV series, it was a great show imo but for some reason, it got cancelled after the first season and on a cliffhanger at that😩...ever since then, I've wanted a comeback or maybe even a reboot but a man can only dream.

So when I saw this hackathon I thought this could be my chance to sate my desire to some extent. This site uses Text Generation to offer possible endings and then uses Image Generation to add further niceties.

Multiple Models

Text Generation: llama-2-7b-chat-int8
Image Generation: stable-diffusion-xl-lightning

Making a simple trivia Game

Nabil Alamin — Thu, 29 Feb 2024 21:17:31 +0000

TLDR

I created a trivia game over the past couple of weeks. It's inspired by the Waveform podcast that comes out weekly on Fridays.

Play: https://www.wvfrmtrivia.xyz/

Source Code 🌟

arndom / wvfrm-trivia

A trivia game based off MKBHD's waveform podcast

About Waveform Trivia 🌟

A simple trivia game made with NextJS, Typescript, Material-UI and Firebase.

Development

# install dependencies
npm i

# run locally
npm run dev

Leave a 🌟 if you found this interesting.

View on GitHub

The Idea

I watch the Waveform podcast the MKBHD team hosts on Fridays after work. It's a great way to catch up on tech plus their personalities also make it more enjoyable. They have this entertaining trivia segment that ranges across tech, science and randomness.

Sometime last year a fan built a dashboard with stats for the segment and it was so nice to see that I got inspired to make a game out of it(there's also been a lack of hackathons 🤷‍♂️).

How I built it

I used these to build the app

NextJS
MUI
Firebase (Firestore and Cloud Functions)
Vercel

I got the question bank from the source of the dashboard created by Howie Adderly. After which I wrote a script to upload to firestore...it's pretty weird that firestore still doesn't support JSON imports directly. After which it was a matter of building out the UI and functionalities of the app.

I was able to build some of these features with the others on the way:

Gameplay
Anonymous users with a point system
Leaderboard (Currently limited)
Social sharing (TBD)
Push Notifications (TBD)
Community Questions via FireCMS (TBD)

I hope you enjoyed the game

PS: I recently joined Twitter and made a post about this, some love there would be nice 🥹

// Detect dark theme var iframe = document.getElementById('tweet-1762959126567555576-805'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1762959126567555576&theme=dark" }

Play a Game of Tetris generated from your GitHub

Nabil Alamin — Tue, 23 May 2023 10:07:40 +0000

What I built

I built a site where you can generate and play Tetris based on your GitHub contribution graph.

Category Submission:

Wacky Wildcards

App Link

https://gh-tetris.vercel.app/

Screenshots

Description

GH Tetris is a site where you enter your GitHub username, select a year of activity, and then get a playable generated Tetris game from that activity.

Link to Source Code

arndom / github-contribution-tetris

Play a game of Tetris generated from your github contribution graph

About GitHub Contribution Tetris 🌟

GitHub Contribution Tetris is a site where you enter your GitHub username, select a year of activity, and then get a playable generated Tetris game from that activity. It was built with Next.js and TS, while also taking bits and pieces from npm packages:

Developing locally

# install dependencies
yarn

# run locally
yarn dev

Developing using codespaces

Navigate to the repo link: https://github.com/arndom/github-contribution-tetris and click <>Code then select codespaces and click + to create a codespace with the already provided dev-container

Leave a 🌟 if you found this interesting.

View on GitHub

Permissive License

Background

When this was announced, I had no intention of participating, as time and ideas were scarce. Then one evening while on YT shorts I saw this ad and got instantly reminded of the GitHub Contribution graph:

That changed my mind, and I went down the rabbit hole of planning and building.

How I built it

OSS really helped a lot during the build process; initially while thinking about this, I had planned to build it all from the ground up in Next.js, but time was the biggest constraint so after some googling and prompt engineering 😉, I found two repositories that were npm packages that helped me a lot:

So with these two I had a solid starting point which allowed me to build fast. I took bits and pieces coupled with my own logic, custom functionalities and UI to create this application.

My biggest pain point while building this was that when I got to production, there was a 504 gateway timeout due to the SSR not being properly optimised in the /[user] route. Trying to fix that took more time than I'd like to admit...at the end of the day, I went with CSR as a hotfix (will attempt refactoring back to SSR after submission).

I added a base development container to the repo to allow potential contributors to test the repository in Codespaces without having to clone/fork the repo.

Additional Info (Future plans)

Mobile responsive
Sounds
And more...

Anyway, I hope you enjoy my submission, have a nice day.

Pic Placeholder: categorised image placeholders

Nabil Alamin — Sun, 28 Aug 2022 16:46:00 +0000

Overview of My Submission

⏩ TLDR: Pic placeholder is a stylish image placeholder with 6 categories (animals, cats, dogs, houses, landscapes & people) which collectively sums up to 500+ images.

Demo.

The Idea: Usually I use lorem picsum to get placeholders, but they didn't allow searches by categories, so I made mine.

This solution uses images from unsplash, where the image details were converted to JSON and placed in redis(redis json) enabled with redis search for filtering by categories. The actual images are stored on aws s3. The client and api were built using NextJS.

Submission Category:

Microservice Mavens (app also falls technically in the MEAN/MERN Mavericks)

Video Explainer of My Project

Language Used

Javascript (NextJS, Node)

Link to Code

arndom / pic-placeholder

Pic placeholder is a stylish image placeholder with 6 categories (animals, cats, dogs, houses, landscapes & people) which collectively sums up to 500+ images.

🖼️ Pic Placeholder

Pic placeholder is a stylish image placeholder with 6 categories (animals, cats, dogs, houses, landscapes & people) which collectively sums up to 500+ images.

Overview video

Here's a short video that explains the project and how it uses redis

How it works

Pic placeholder is a microservice that provides endpoints to get placeholder images. These endpoints are:

/api/categories/[type]
- returns JSON of all images with the supported types filtered from redis
/api/images/[id]
- redirects to specific image stored on aws S3
/api/images
- returns JSON of all images from redis
/api/random/[category]
- redirects to a random image matching the category
/api/random
- redirects to a random image

How the data is stored:

There are two parts to this; the Redis JSON storage and the aws s3 storage.

The Redis JSON contains the placeholders which are of this schema:

{
    file: { type: "number" }
    width: { type: "number" },
    height: { type:

…

View on GitHub

Additional Resources / Info

Demo Video ⏬

Try it out.

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

Introducing Pic Placeholder

Nabil Alamin — Sat, 20 Aug 2022 00:03:46 +0000

📝Introduction

So I saw this hackathon for a while and wanted to participate, mainly because I needed an excuse to get started with reddis, the issue now was what to build.

I spent some time trying to figure that out but nothing came to mind...until sometime this week I was helping a friend with a project where he needed to get placeholder images for a real estate app.

In doing that, I realised that my goto site lorem picsum didn't have a way to sort images by categories...and thus pic placeholder was born.

The idea was to build a service that primarily allows the fetching of easy-to-use and stylish placeholders 😉 while allowing some filtering for specific use cases. Currently, a simple UI exists, here's a link: https://picc.vercel.app/

💭 What's next??

In the subsequent post(s), I'll go over the building of the API and submission of the project. Stay tuned for more 👍

DEV Community: Nabil Alamin

Hacktoberfest Rant

Intro

Rant😅

A Recruiter's favourite tool: Powered by Postmark

❔ What I Built

⏩ TLDR

💻 Demo

Code Repository

arndom / job-board-admin

Jobs management dashboard & applicant parser powered by postmark

🧠 JobBoard Admin: Jobs Management Dashboard & Applicant Parser

✨ Features

arndom / job-board-site

Job application demo site for https://github.com/arndom/job-board-admin

💼 Remote Job Board — Email-Based Applications

✨ Features

📸 Preview

⚙️ Local dev

How I Built It

Still worth a read 5+ years later

What's my age again?

Ben Sinclair ・ Sep 22 '19

Integrating Stellar with Next.js, Nuxt 3 and SvelteKit

Your Tutorial

What I Created

Journey

What to build?

The experience

LINKS

Net Gala: Netlify Img Transforms

What I Built

Demo

Platform Primitives

Conclusion

WebDev Docs Workflow

What I Built

Demo

Journey

Recreating a GIF with CSS: Earth Day Edition

Inspiration

Demo

Journey

Used Resources

Rewrite Movie/TV endings with AI

What I Built

Demo

My Code

arndom / ending-maker

Reimagine your favourite TV and Movie endings

About Ending Maker 🌟

Stack

Development

Journey

Making a simple trivia Game

TLDR

arndom / wvfrm-trivia

A trivia game based off MKBHD's waveform podcast

About Waveform Trivia 🌟

Development

The Idea

How I built it

Play a Game of Tetris generated from your GitHub

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

arndom / github-contribution-tetris

Play a game of Tetris generated from your github contribution graph

About GitHub Contribution Tetris 🌟

Developing locally

Developing using codespaces

Permissive License

Background

How I built it

Additional Info (Future plans)

Pic Placeholder: categorised image placeholders

Overview of My Submission