标签：#fullstack

At my workplace, I worked on an ERP platform used by fashion businesses to manage customers, body measurements, products, orders, invoices, inventory, staff, and other day-to-day operations. Each business also had a public storefront where customers could browse products and check out. The storefront started as a simple sharing feature. Businesses could publish products, copy a link, and send it to customers outside the main workspace. That worked well because the storefront was mostly a product catalogue, and most of the sales process still happened after the customer contacted the business. As the platform evolved, the storefront became much more than a catalogue. Customers were discovering businesses through shared links, browsing products, placing an order, and tracking orders directly from the storefront. That introduced new technical requirements around branded storefronts, SEO, server-rendered metadata, public checkout, pricing, and analytics. This article explores how I designed the storefront around wildcard subdomains, immutable shop identities, server-side shop resolution, and a scalable analytics pipeline. Table of Contents Giving the Storefront Its Own Identity Business Names, Reserved Names, and Subdomains Resolving a Storefront Active and Inactive Storefronts Location and Currency Product Pages and Share Previews Storefront Event Ingestion Processing Raw Events Counting Unique Visitors With HyperLogLog Domain Routing and Local DNS 1. Giving the Storefront Its Own Identity The original storefront was fairly simple. It was a React application that fetched a business and rendered its products. Beyond that, there wasn't much to it. There were no branded storefronts, analytics, subdomains, or even a separate identity beyond the business itself. Introducing those capabilities meant the storefront needed its own data model. I introduced a dedicated shop entity to represent the public storefront. The business remained the source of operational data such as cu

Imagine if there were a way for us to somehow ship a full-stack package that you could plug into your...

When I first started learning Spring Boot, I was overwhelmed by annotations. Every file seemed to have symbols starting with @ . @SpringBootApplication @RestController @Service @Autowired At first, I treated them like magic spells. I copied them from tutorials and hoped everything would work. Eventually, I realized that understanding a few key annotations made Spring Boot much less intimidating. If you're just starting your Spring Boot journey, these are the annotations I believe you should understand first. 1. @SpringBootApplication This is usually the first annotation you'll see in a Spring Boot project. @SpringBootApplication public class DemoApplication { public static void main ( String [] args ) { SpringApplication . run ( DemoApplication . class , args ); } } Think of it as the starting point of your application . When Spring Boot sees this annotation, it knows: Where the application begins Which components need to be scanned Which configurations should be loaded Without it, your Spring Boot application won't know how to start properly. 2. @RestController If you're building REST APIs, you'll use this annotation frequently. @RestController public class HelloController { @GetMapping ( "/hello" ) public String hello () { return "Hello, World!" ; } } A class marked with @RestController tells Spring: "The methods inside this class will handle HTTP requests and return data." Instead of returning web pages, it usually returns: JSON Strings Objects API responses Whenever I create a new API endpoint, this is one of the first annotations I add. 3. @GetMapping This annotation is used when you want to handle GET requests . @GetMapping ( "/students" ) public String getStudents () { return "List of students" ; } A GET request is typically used to retrieve information. Examples: Get user details Fetch products View student records Whenever a client requests data from the server, @GetMapping often comes into play. 4. @PostMapping While @GetMapping retrieves data, @PostMappin

AWS just launched AWS Blocks, an open-source TypeScript framework that gives you backend capabilities...

Tools like Claude Code and Codex have completely reshaped how software engineering is done. This new tooling allows for much faster development and iteration, but it's important to keep the code maintainable and scalable to make sure the project can continue evolving over the long term. A template project with an initial structure using all of the technologies described here is available on GitHub: https://github.com/MartinXPN/nextjs-firebase-mui-starter When working on a startup, the speed of iteration is key. The requirements change quickly, features are added daily, and code gets modified rapidly. In those conditions, picking technologies that enable fast iteration, while ensuring your users get the best experience possible, is crucial. During the last four years or so, we have experimented with many modern technologies while building Profound Academy . So, in this blog post, I'd like to present the whole tech stack that enables building quickly, while having a highly maintainable codebase, scalable infrastructure, and a great user experience. We'll cover everything from Authentication to UI, we'll talk about the backend, hosting, testing, and much more! AI Agents, Skills, and MCP servers AI Agents enable quick iteration and rapid improvement, including bug fixes, the addition of new features, and performance improvements. Yet, it's important to keep the code maintainable for the long run. AI tools make it really easy to overengineer things and add thousands of lines of code to a project. It's important to resist the urge to solve problems that don't exist yet, and keep things simple (both in terms of the code, the infrastructure, and the user experience). Even in the Agentic Software Development Era, having a small and simple setup helps. Agents coordinate better, features are added faster, bugs are fixed more easily, and the code is maintainable by humans, too. So, we have chosen to take a balanced/nuanced approach to how we use AI Agents when it comes to worki

We've all been there: you’re building an endpoint, and for the hundredth time, you’re typing out res.status(200).json({ success: true, data: ... }) . It feels repetitive, and honestly, it’s a recipe for inconsistency across your API. I wanted to fix that, so I built BaR-js . What is it? BaR (Builder a Response) is a lightweight, framework-agnostic TypeScript library designed to help you serve API responses like a pro—almost like a bartender mixing a drink. It strips away the JSON clutter and ensures every response you send follows a consistent, production-ready schema. Why use it? Consistency: Every endpoint speaks the same language. Fluent API: You can use a chainable syntax like res.builder.as.ok(data) instead of manually crafting objects every time. Traceability: It automatically handles request_id and timestamps, making debugging so much easier. Type Safety: Built with strict TypeScript, so you get great IntelliSense support. It’s this simple: import express from ' express ' ; import { BarExpressAdapter } from " @vorlaxen-labs/bar-js " ; const app = express (); // 1. Configure the adapter const bar = new BarExpressAdapter ({ environment : ' production ' , logger : console , }); // 2. Register it as middleware // This injects `res.builder` and `req.bar` into every route! app . use ( bar . handler ()); // Now you can use it in any route app . get ( ' /user ' , ( req , res ) => { return res . builder . as . ok ({ name : ' John ' }). build (); }); Why "BaR"? I like the idea that "your code is a work of art, and your responses are its signature." The clearer your response schema, the more professional and valuable your API feels to whoever is consuming it. The project is still fresh, and I’d love to hear what you think. If you’re looking to clean up your API layer, give it a spin! Feedback, issues, or PRs are more than welcome. Check it out on GitHub: https://github.com/vorlaxen-labs/bar-js Grab it from NPM: https://www.npmjs.com/package/@vorlaxen-labs/bar-js Cheers!

What This Repository Is A complete, structured, beginner-friendly Node.js learning path. 30 sessions. Each session has Clear learning objectives Step-by-step explanations Working code examples Practice exercises Interview questions Summary of key points No fluff. No assumptions. Just code. The Complete Curriculum Phase 1 - Node.js Fundamentals (Sessions 1-5) Session Topic What You Will Build 01 Introduction to Node.js Your first Node.js program 02 Project Setup and npm package.json, node_modules 03 How Node.js Works Event loop, blocking vs non-blocking 04 Modules and Imports Your first custom module 05 File System Module Read, write, update, delete files Sample code from Session 05 const fs = require ( " fs " ); // Create a file fs . writeFileSync ( " student.txt " , " Welcome To Node.js " ); // Read the file const data = fs . readFileSync ( " student.txt " , " utf8 " ); console . log ( data ); // Welcome To Node.js // Append to file fs . appendFileSync ( " student.txt " , " \n New line added " ); // Delete file fs . unlinkSync ( " student.txt " ); Phase 2 - Core Modules (Sessions 6-10) Session Topic What You Will Build 06 Path Module Cross-platform file paths 07 OS Module System information 08 Events and EventEmitter Custom event handling 09 HTTP Module Create a server 10 Multi-Route Server Multiple routes, JSON responses Sample code from Session 10 const http = require ( " http " ); const server = http . createServer (( req , res ) => { if ( req . url === " / " ) { res . end ( " Home Page " ); } else if ( req . url === " /about " ) { res . end ( " About Page " ); } else if ( req . url === " /products " ) { res . setHeader ( " Content-Type " , " application/json " ); res . end ( JSON . stringify ([{ id : 1 , name : " Laptop " }])); } else { res . statusCode = 404 ; res . end ( " Page Not Found " ); } }); server . listen ( 3000 ); Phase 3 - Building REST APIs (Sessions 11-15) Session Topic What You Will Build 11 CRUD with Dummy Data Complete REST API using array 12

While designing the database and Product Requirements Document (PRD) for an online school project, I ran into a problem I was not expecting. The school had multiple subscription plans. For simplicity, imagine: Live Class Plan:₦50,000 per term Video On Demand Plan: ₦30,000 per term Hybrid Plan (Live Classes + Video On Demand):₦70,000 per term. Initially this looked simple. Students subscribe. System charges them. Done. Then I asked: What happens if somebody changes plans halfway through the term? Suppose: A student already paid: Live Class Plan ₦50,000 Two months later: They decide: Upgrade to Hybrid Plan Do we charge: ₦70,000 again? That would be unfair. Do we charge: ₦20,000 difference? Maybe. But what if they already used most of their subscription period? This question led me to something called: Proration What Is Proration? Proration simply means: Charging customers only for the portion they actually use. Instead of pretending subscriptions always begin and end perfectly. Proration tries to answer: "How much value remains in the current subscription?" and "How much should the customer pay for the new one?" Simple Example Assume: Term Length: 100 Days Student buys: Live Plan ₦50,000 After: 40 Days they upgrade. This means: Used: 40 Days Remaining: 60 Days Value remaining: Remaining Value = Remaining Days / Total Days = 60 / 100 = 60% Remaining credit: 60% × ₦50,000 = ₦30,000 Hybrid costs: ₦70,000 Therefore: Amount to bill = New Plan Price − Remaining Credit = ₦70,000 − ₦30,000 = ₦40,000 Student pays: ₦40,000 instead of: ₦70,000 This feels fairer. Downgrades Are More Complicated What if: Hybrid user: ₦70,000 moves to: ₦30,000 plan Should the system: Refund money? Create account credits? Apply discount later? Ignore downgrades until renewal? This is where: Proration Rules become important. What Are Proration Rules? Proration calculations are useless without rules. The business must decide: Rule 1: How Is Remaining Value Calculated? Options: Daily basis Weekly basis

I applied for a role at a mid-sized SaaS company about two years into my career. Strong company, interesting problem, good pay. I sent my application, got a recruiter callback, and then nothing for two weeks. When the feedback finally came: "We went with candidates with a stronger portfolio presence." I had 23 GitHub repositories. I had a portfolio site. I had projects. What I didn't have — and what I didn't understand for another six months — was a portfolio that told a story. I had code. Not evidence of thinking, decision-making, or the ability to ship something real. I've since built, rebuilt, and advised on a lot of developer portfolios. I've seen what gets people calls and what gets them ghosted. This isn't a guide about which framework to use or how to pick colors. It's about what actually moves the needle — the things I wish someone had told me in year one. Lesson 1: Two Great Projects Beat Twenty Mediocre Ones The instinct is to fill the portfolio. More projects = more evidence of experience. This is wrong. A hiring manager or engineering lead looking at your portfolio has about three minutes. They're going to look at your two or three most prominent projects, click one or two live demo links, and form an opinion. If they see twenty repositories and most of them are "Todo App v2," "Weather App," "Netflix Clone," "Portfolio v1 through v6" — they've already categorized you as someone who builds tutorials, not someone who builds things. The better approach: three to five projects, each with: A real problem it solves (not "I wanted to learn React") A live deployment that actually works A README that explains why you made the decisions you made Enough complexity to have generated at least one interesting engineering problem Projects that tend to work: tools you built because you were frustrated with an existing tool, apps solving problems you personally had, projects where you integrated with a real API or real data source, anything with a live user base (even 10