Hi guys 👋

I'm Kirubel Sentayehu, a 24 y.o mid-level full-stack developer who enjoys coding just like most of you guys.

I started coding when I was around 15. I still remember the first day my twin brother and I created our first HTML page using only HTML and CSS, it was truly magical. 🪄

For the past 3 years, I’ve been working remotely with US startups, mostly using Next.js, Tailwind CSS, and TypeScript, and more recently with Django, React, and AI tools like the OpenAI Agents SDK.

I started this channel to share my journey as I grow, learn, and build.

Here, you’ll find web dev concepts I have learnt and been learning, small lessons from projects, and honest thoughts about the challenges and wins along the way.

My goal isn’t to teach as an expert, but to share what I’ve learned. If you’re into AI, web development, or just enjoy tech content, you’ll feel right at home.

Glad to have you here! 🚀

Server Actions in Next.js

While working on a project recently, I came across Server Actions in Next.js and this concept honestly confused me for a while.

Here’s the simple version of what I have understood:

Server Actions are functions that run on the server, but you can call them directly from your client components using things like form actions, buttons, event handlers, and useEffect.

It’s basically a cleaner way to mutate/update data without needing to write separate API routes.


To Define a Server Action

You just write a function with a "use server" directive:

'use server'
 
export async function createPost() {}

This function runs only on the server, never in the browser even when you import it into a client component.


To call a Server Action From a Client Component

'use client'
 
import { createPost } from '@/app/actions'
 
export function ClientComp() {
  return <form action={createPost}>Create</form>
}

It looks like a normal function call, but Next.js automatically turns it into a server-side request behind the scenes.


This means

✅ You don’t need to create separate API routes

✅ Mutations become cleaner and easier to follow

✅ Your client components become simpler


Here is the docs for reference

https://nextjs.org/docs/app/getting-started/updating-data

Have you ever wondered how LLM-based apps (like ChatGPT, Claude) show responses token by token, like a typewriter effect?

They often use a web protocol called Server-Sent Events (SSE).

So basically, SSE is a one-way communication from server to client: the server pushes data to the client over a single, long-lived HTTP connection. Once the connection is open, the client can receive whatever the server streams or pushes, asynchronously.

That means you don’t have to wait for the full response, you can update the UI progressively, as new data arrives.

You can play around with it here

https://svelte.dev/playground/2259e33e0661432794c0da05ad27e21d?version=3.47.0

I was recently working on DocuFinance an open-source AI powered Financial document extractor that extracts key informations from financial documents automatically.

📄 Supported documents:
• Bank statements
• Invoices
• Receipts

✨ Features:
• Auto-detects document type
• Extracts all structured data (transactions, line items, totals)
• Export to CSV with one click

🛠 Tech stack:
- Next.js 16
- TypeScript
- Tailwind CSS
- shadcn/ui
- AI-SDK
- Better-Auth
- Supabase
- Trigger.dev


⭐️ GitHub: https://github.com/kira-1011/financial-document-analyzer

🔗 https://financial-document-analyzer-self.vercel.app/

https://storage.googleapis.com/gdm-deepmind-com-prod-public/media/media/synthid__gemini-detection.mp4#t=0.1

Upload an image to Gemini, and it can quickly tell you if Google AI created or changed it by looking for the SynthID mark.

For Devs aiming to launch an AI startup, check out this guy's content. It's really inspiring.

https://www.youtube.com/watch?v=RZwM4vTvQhQ&t=559s

As a developer, at some point you realize it’s not just about knowing a specific tech stack. It’s more about looking at a problem, breaking it down into smaller sub-problems, framing it clearly, and simplifying it to a level where it can be solved through logic or code. In the end, your job is to connect the dots and build a solution.

If you are a python dev looking to build a UI quickly without needing JavaScript or complex frontend libraries, check out Streamlit.io.

As developers, we seriously need to stop underestimating marketing.

@selfmadecoder

Pre-commit Hooks 🪝

If you're tired of manually running linting or formatting commands every time before you commit and push your code…

You can use pre-commit hooks which is part of Git’s native hook system

A pre-commit hook is a script that runs automatically whenever you run git commit.

It can run tasks like:

💠 linting
💠 formatting
💠 running tests
💠 checking types
💠validating files

This will help you avoid manual work

Pre-commit tools
For Node.js based projects Husky (usually used with lint-staged) is quite popular
For python based projects pre-commit framework is popular

AI is getting out of hand 😂😂