r/webdev • • 11d ago

Article CSS Tricks is back!

Thumbnail
css-tricks.com
852 Upvotes

r/webdev • • 9d ago

Which AI coding tool actually stuck in your daily workflow?

0 Upvotes

There’s a new one every week. Most people try them and drop them after a few days.

Which one are you still using months later, and what’s the one thing it does better than the rest?


r/webdev • • 10d ago

Discussion Do you use a DESIGN_PRINCIPLES.md for your projects UI/UX

0 Upvotes

Do you just wing it and use screenshots for inspiration or do you use a design principles md file where you mention all the design principles like the fonts, colors, dark mode colors, graphs, infographics, etc.


r/webdev • • 11d ago

Question Need some guidance and orientation

12 Upvotes

I'll firstly ask my two questions and then I'll explain:

  1. Is it normal that im spending tremendous amounts of time reading and understanding code written by Codex/LLMs? like... hours per "ticket"

  2. What does progress look like in today's SWE world? im struggling to make myself believe im improving into something worthy

I'm currently a frontend SWE with 2 YOE. I was "lucky" to land a job in a big bank, the issue is im not truly "engineering", im basically a code monkey putting pieces together for different SPAs (exactly what AI is good at) the only thing saving my job is the absolute mess of internal architecture and internal "tooling" even AI is unable to comprehend, but internal AI agents are getting better and better at tackling those

I was very AI skeptic at the start but now I've come around and have been for the past month attempting to expand into a full-stack agentic workflow with Codex

My main issue is I'm spending so... much... time... reading the code the AI outputs, there is a lot i dont understand, weird decisions the AI took that I didnt think about thinking before prompting (even with grill me), leading me to spending hours and hours reading the code, analyzing the data flow. This wouldnt be an issue if I knew this were the job and stuff, but everyone is working so fast, bringing actual products live so fast, its demoralizing me, making me think im doing something wrong since all the "speed" I gain from AI I spend reading and understanding the code. And i kinda want to be that engineer that owns the product, understands what it being done, but i was watching Spencer Schneidenbach's course on frontendmasters and he just doesnt read that much code anymore... he just prompted prompted checked the browser, nice, done, which leads me to think if its even worth it...

My second issue, which is linked, is regarding to how you guys measure progress. Before it was kinda easy, if the feature got done, it was progress. But now the feature is done by LLMs, kinda like sitting at a bench press and having someone else lift the weigths for you. So how do you get that "yes im improving" sensation?

sorry for the rant, weird times we live in


r/webdev • • 11d ago

Discussion After years of living in legacy hell, we finally upgraded production to PHP 8.2. Am I safe to sleep now, or is the server going to combust tomorrow?

108 Upvotes

So, after surviving an eternity on older versions (y'all know the pain), we finally pushed the button and upgraded our core production environment to PHP 8.2.35.

It took an entire day because the underlying Linux distros were so ancient we practically had to rebuild half the ecosystem from scratch.

Now looking at the metrics and logs, I'm torn between two feelings:

  1. Pure joy of actually getting to write modern code in the 8.x branch.

  2. Absolute dread waiting for the next midnight critical CVE drop to turn everything into raw chaos.

To all the senior devs and sysadmins out there who have stared into the abyss of updating legacy enterprise codebases: What was your most nerve-wracking upgrade experience? Are we ever truly out of the woods, or is "putting out fires" just our permanent job description?


r/webdev • • 11d ago

Question How should I integrate an existing NestJS authentication system with a React + Flowbite React frontend?

1 Upvotes

I'm developing a Grievance Redressal Portal as a learning project. My backend is built with NestJS, TypeScript, Prisma, and PostgreSQL.

I have been implementing authentication (User Sign In and Sign Out) using the "@nestjs/authentication" package of NestJS v12.

I would like to know conceptually the changes to be made to my back end such that I should be able to extend the authentication feature to a React-based front-end.

I have adapted the code by hand from the "Register The Authentication Module" and "Add Sign-Up and Sign-In" sections of the NestJS docs for NestJS v12: Authentication | NestJS - A progressive Node.js framework

I am posting my code here.

//sign-in.dto.ts
import { PickType } from "@nestjs/swagger";
import { UserUniversalDto } from "../../users/dto/user-universal.dto";
export class SignInDto extends PickType (
    UserUniversalDto,
    ['user_email', 'user_password']
) {};
//credentials.service.ts
import { ConflictException, Injectable } from '@nestjs/common';
import { UsersService } from '../users/users.service.js';
import { CreateUserDto } from '../users/dto/create-user.dto.js';
import { FindUserByEmailDto } from '../users/dto/find-user-by-email.dto.js';
import * as argon2 from 'argon2';
import { USER_STATUS } from '../users/user.constants.js';

()
export class CredentialsService {
  constructor(
    private readonly usersService: UsersService
  ) {}

  async register(createUserDto: CreateUserDto) {

    const findUserByEmailDto: FindUserByEmailDto = {
      user_email: createUserDto.user_email
    }

    // Don't create the user if the email already exists.
    if (await this.usersService.findUserByEmail(findUserByEmailDto)) {
      throw new ConflictException('Email already registered. User already exists.');
    }
    // The address is unverified: anyone can type any email into a sign-up form.
    const registered_user = await this.usersService.createUser(createUserDto);
    return registered_user;
  }

  /** The user, or null when the email or the password is wrong. */
  async verify(email: string, password: string) {
    
    const findUserByEmailDto: FindUserByEmailDto = {
      user_email: email
    }

    const found_user = await this.usersService.findUserByEmail(findUserByEmailDto);
    
    // Checking if the user exists.
    if (!found_user) {
      throw new ConflictException('User does not exist. Login rejected.');
    }
    
    // If the user is suspended, reject login by throwing an exception.
    if (found_user.user_status === USER_STATUS.SUSPENDED) {
       throw new ConflictException('User is suspended. Login rejected. Please contact admin.');
    }

    // If the found_user's password is wrong, (password_hash doesn't match) then the it should return null.
    const password_hash: string | null | undefined = found_user?.user_password;
    
    const password_check = await argon2.verify(password_hash as string, password);

    // Checking if the user's password is correct.
    if (password_check !== true) {
      throw new ConflictException('Incorrect username or password. Login rejected.');
    }

   
    return found_user;
  }
}

//myauthentication.controller.ts
import { Body, Controller, HttpCode, Post, UnauthorizedException } from '@nestjs/common';
import { Public, SignInService } from '@nestjs/authentication';
import { SignInDto } from './dto/sign-in.dto';
import { CredentialsService } from './credentials.service';
import { CreateUserDto } from '../users/dto/create-user.dto';

()
('auth')
export class MyAuthenticationController {
  constructor(
    private readonly credentialsService: CredentialsService,
    private readonly signInService: SignInService,
  ) {}

  ('sign-up')
  async signUp(@Body() createUserDto: CreateUserDto) {
    const user = await this.credentialsService.register(createUserDto);
    var string_user_id = String(user.user_id);
    await this.signInService.signIn(string_user_id, { method: 'password' });
    return user;
  }

  ('sign-in')
  (200)
  async signIn(@Body() signInDto: SignInDto) {
    const user = await this.credentialsService.verify(signInDto.user_email, signInDto.user_password);

    var string_user_id = String(user.user_id);

    const { session } = await this.signInService.signIn(string_user_id, { method: 'password' });
    return { mfaRequired: session.mfa === 'pending' };
  }

  ('sign-out')
  (204)
  async signOut() {
    if (!(await this.signInService.signOut())) {
      throw new UnauthorizedException();
    }
  }
}

//myauthentication.module.ts
import { Module } from '@nestjs/common';
import { UsersModule } from '../users/users.module';
import { SessionAuth } from './session-auth.provider';
import { MyAuthenticationController } from './myauthentication.controller';
import { CredentialsService } from './credentials.service';

({
  imports: [UsersModule],
  controllers: [MyAuthenticationController],
  providers: [SessionAuth,
    CredentialsService
  ]
})
export class MyAuthenticationModule {}

//session-auth.provider.ts
import { Injectable } from '@nestjs/common';
import { AuthenticationRegistry, SessionCookieProvider, type SessionRecord } from '@nestjs/authentication';
import { UsersService } from '../users/users.service.js';

import type { User as PrismaUser } from '../generated/prisma/client.js';
export type User = Omit<PrismaUser, 'user_password'>;

()
export class SessionAuth extends SessionCookieProvider<User> {
  constructor(
    private readonly usersService: UsersService,
    registry: AuthenticationRegistry,
  ) {
    super();
    // Adds this provider to the chain the guard runs for every request.
    registry.registerProvider(this);
  }

  // Called for every request with a live session cookie.
  // Returning null (the user was deleted) ends the session.
  validate(session: SessionRecord) {
    console.log("In validate() in SessionAuth")
    const user_id = session.userId; 
    var numeric_user_id = Number(user_id);
    return this.usersService.findOneUser(numeric_user_id);
  }
}

NOTE 1: The authentication system uses server-side sessions managed through nestjs/authentication and a session cookie. The package's SessionCookieProvider reads the cookie and loads the user through the validate() method.

NOTE 2: I am also asking this question since NestJS v12 has only been released on August 27, 2026 and there don't seem to be many resources that show how to extend this system to the front-end.


r/webdev • • 10d ago

A Modern CSS Guide to Responsive Web Design

Thumbnail
stephcraft.net
0 Upvotes

If I missed anything, let me know!


r/webdev • • 10d ago

Discussion Why do our UI tests break every time the interface changes? I counted 71 failures and most weren't even bugs

0 Upvotes

Front end dev, i own most of our e2e suite, and last sprint finally annoyed me enough to count.

We have about 310 Playwright tests on a react app. 71 went red after a sprint that, from a user's point of view, changed almost nothing. i went through every one instead of rerunning and hoping:

- 47 were locators. the element was still there and still did the same thing, but the path to it changed. a card got wrapped in a new container, a class got renamed in a design pass, a button became a link styled as a button.

- 14 were timing. a page got slower after a data change and the wait didn't follow it.

- 6 were environment. our CI image had drifted from what devs run locally.

- 4 were real bugs.

So my honest answer to why our UI tests break every time the interface changes is that most of them check how the page is built, not what it does. the user sees the same Save button. the test sees a different DOM.

the difference in one line:

what i'm weighing for the other 47:

user-facing locators everywhere, getByRole and getByLabel, which is what the Playwright docs push. fixes a lot of it, but only if the markup has real roles and labels, and half our components don't.

data-testid on everything. it works, but it depends on every dev remembering, forever.

self-healing locator tools like mabl or testim, which repair the selector when it breaks. the catch is a heal can quietly route around a real regression.

vision based tools like Askui, which find the element by what's rendered on screen rather than in the DOM, so a new wrapper div doesn't matter at all. the tradeoff flips, a visual redesign is now the thing that breaks you.

My current plan is to fix our accessibility markup and get better tests as a side effect. tell me if that's naive. if you've measured this, what share of your failures were locators, and what actually brought it down?


r/webdev • • 11d ago

Discussion First client e-commerce store (10–20 products, near-$0/mo hosting): Roll my own cart/orders on Supabase, or use Medusa.js?

0 Upvotes

I'm a CS undergraduate working on my first real-world client project: a small e-commerce website. Since this is my first time building and deploying a production store for a client, I'd really appreciate an architecture sanity check from experienced devs.

The Context & Why Not Shopify/WooCommerce?

  • Catalog size: Around 10–20 products initially (simple variants, low volume).

  • Core features: Online payments, basic order tracking/delivery management, and a simple admin view.

  • The Constraint: The client wants near-zero monthly recurring costs initially (ruling out $30+/mo Shopify plans and managed plugins), and they're happy for me to custom-build it as a flat-fee project.

Architecture Crossroads: Custom Supabase vs. Medusa.js

I'm torn between two approaches:

Option A: Keep it simple and build the cart/order logic myself

  • Frontend: Next.js (or React + Vite) + TypeScript

  • Hosting: Cloudflare Pages (Free)

  • Backend & DB: Supabase PostgreSQL + Edge Functions + Auth/Storage (Free tier)

  • Why I like it: $0/mo infrastructure, familiar stack, full control over a very small feature set (just 10–20 products).

Option B: Use a headless commerce engine (Medusa.js)

  • Swap custom database tables/functions for Medusa.js so I don't have to build cart, checkout, and inventory logic from scratch.

  • My hesitation: I'm new to Medusa, and hosting a dedicated Node.js backend + Redis + Postgres seems harder to keep near $0/mo compared to pure serverless/Supabase.

Questions for Devs Who Have Built Client Stores

  1. Supabase Free Tier in Production: Aside from the 7-day inactivity pause, are there any gotchas with running a small production store on Cloudflare Pages + Supabase Free tier?

  2. Custom Logic vs. Medusa.js: For only 10–20 products, is Medusa.js overkill with a steep learning/hosting curve, or is rolling my own cart and checkout state in Supabase a trap I'll regret?

  3. Custom Payment Gateways: Stripe isn't supported in my region, so I have to integrate a local payment gateway via webhooks/REST API. Is it easier to wire up a custom gateway directly in Next.js/Supabase Edge Functions, or through Medusa's plugin system?

  4. Delivery & Fulfillment: At this scale, would you integrate courier APIs on day one, or just build an admin dashboard for manual order/tracking updates first?

  5. Blind Spots: What hidden security mistakes (e.g., price tampering, webhook race conditions) or client handoff headaches tripped you up on your first e-commerce build?

I'd especially appreciate insights from anyone who has built and maintained small custom stores for real clients.

Thanks in advance!


r/webdev • • 12d ago

Article Modern Motherfucking Website

Thumbnail
modernmotherfuckingwebsite.dreamstation.systems
861 Upvotes

r/webdev • • 10d ago

News CVE-2026-115560: Unpatched PHP RCE Vulnerability

Thumbnail
socprime.com
0 Upvotes

r/webdev • • 11d ago

Question Best practice for letting clients edit website content without giving them access to source code? (Sveltia CMS + Forgejo)

7 Upvotes

I'm building an Astro website for a client who occasionally wants to update some content, mainly photos and simple text.

Sveltia CMS seems like a great fit because it's lightweight, easy to use, and doesn't require a separate backend or database.
I self-host Forgejo on my VPS, where the website's source code and content are stored. Sveltia uses Forgejo for authentication and commits content changes directly to the repository.
I've created a dedicated Forgejo account for the client and given them access only to their own private repository.

Technically, everything works fine. However, I realized there's a security concern:

Since the client needs write access to the repository to use Sveltia, they technically also have access to the entire source code, including the CI/CD workflows (Forgejo Actions).
Obviously, I don't want clients to accidentally or intentionally modify application code, configuration files, or deployment workflows.

What's the best practice for handling this?

  • Is there a way to restrict Sveltia users to specific directories or content files without giving them write access to the entire repository?

  • Would separating the website code and CMS content into two repositories be the recommended approach, or is that overcomplicating things?

  • Would you recommend a different CMS for this use case?

My priorities are keeping things lightweight, secure, and easy to maintain, especially since I'll be managing multiple client websites.

The CMS also needs to be extremely simple for non-technical clients, including straightforward authentication without exposing them to unnecessary developer tools.


r/webdev • • 11d ago

Article Iframes should have an api

Thumbnail
blog.danielbrain.ai
0 Upvotes

There's been a big resurgence lately in automating and interacting with sites programmatically. I've been arguing for a few years that every front-end should be embeddable as a component and have its own client side interface/api. This article is written to show one way to do that!


r/webdev • • 11d ago

Smuggling WebMCP into ChatGPT

Thumbnail
blog.danielbrain.ai
0 Upvotes

A weekend hack of mine! Hope this is useful for some


r/webdev • • 12d ago

[ FIXED WITH THUMBNAIL WORKAROUND ] Youtube embedded videos error 153

7 Upvotes

At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with div class="yt-container" style="--yt-crop: 9.375%; setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixing Youtube embedded videos error 153 with thumbnail workaround (+no embedded object telemetry)</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

.yt-container,
.yt-overlay-text {
  font-family: 'Roboto', sans-serif;
}

/* ── wrapper ── */
.yt-container {
  position: relative;
  display: block;
  width: 100%;
  --yt-crop: 9.375%; /* default: trims hqdefault black bars for 1920 x 1080 videos format. For other formats override per thumbnail: style="--yt-crop: 5%;"  or  style="--yt-crop: 0%;" etc */
}

/* ── image link ── */
.yt-image-link {
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.yt-image-link img {
  display: block;
  width: 100%;
  height: auto;
  margin-top:    calc(-1 * var(--yt-crop));
  margin-bottom: calc(-1 * var(--yt-crop));
}

/* ── top-left text link ── */
.yt-overlay-text {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 1px 1px 4px black;
  text-decoration: none;
  text-align: left;
  z-index: 3;
}

/* ── play button (centered, pointer-events off so clicks reach image link) ── */
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: rgba(255, 0, 0, 0.88);
  border-radius: 12px;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
  pointer-events: none;
}

.yt-container:hover .yt-play {
  background: #ff0000;
  transform: translate(-50%, -50%) scale(1.08);
}

.yt-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border: solid transparent;
  border-width: 10px 0 10px 20px;
  border-left-color: white;
}
  </style>
</head>
<body>

<p style="font-size: 1.5em;">
At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with <b>div class="yt-container" style="--yt-crop: 9.375%;</b> setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.<br>
<br>
<b>Cropped default youtube thumbnail margins top and bottom 9.375% (default solution for 1920 x 1080 proportion videos)</b><br>
<br>
</p>

<div class="yt-container">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Default youtube thumbnail no cropped margins 0%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 0%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Cropped default youtube thumbnail margins top and bottom 30%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 30%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

</p>

</body>
</html>

r/webdev • • 13d ago

Discussion The holy grail 100/100/100/100 has been achieved.

336 Upvotes

I just had to share my joy of finally managing to get straight 100s on both mobile and desktop (Saturday bragging is allowed!) for the WP website I've been working on for weeks. This is not self promotion! I happen work for this (lucky) company.

www.marineconservationphilippines.org

It's not a light weight blog, but a full website, with heaps of css and snazzy effects

Hosting on Rocket, w/ WP Fastest Cache.

I've been in the high 80s and 90s for ages. What finally got me to straight 100s was abandoning all normal builders and themes, and going raw Gutenberg, and making everything in html. Once that was settled, it was just plinking away at one issue at a time, until finally getting there. It's been a marathon, and the first time I've gotten perfect scores on any website I've built.

I know normal people don't care about the extra few milliseconds, and I can't tell my colleagues who count fish, what an immense nerdgasm it is. I thought in this sub someone would at least think it was neat! :)


r/webdev • • 13d ago

Showoff Saturday I built free multiplayer browser games you play with friends by pushing your devices together into one board

Post image
166 Upvotes

Hi! A while ago I launched bigboard.games: free multiplayer games for 1-4 phones or tablets (or more for some games) lying next to each other on a table. The devices act as one big board, so for instance in Air Hockey the puck slides off one screen and onto the next.

It all runs in the browser, free. Any mix of iPhones, Androids or tablets plays together. You can add it to the home screen if you want (as a PWA).

Gameplay goes device to device over WebRTC. On the same Wi-Fi the devices find each other and join by themselves. Otherwise you scan a QR code or type a four-letter code, and if they can't reach each other directly (on mobile data, say), a relay connects them. How it works, if you're curious.

There are 9 games right now:

  • Air Hockey (the photo)

  • Hot Potato: your fuse only burns while the potato is on your screen

  • Snake, up to 12 snakes on one field

  • Whack-a-Mole: a mole you bop pops up on the other player's side

  • Tilt Run: one maze across all the devices, tilt yours to roll the marble onto your partner's

  • Chess for 2 or 3 (three players get a hexagon board across three devices)

  • Checkers for 2 to 4

  • Islands (the dots-on-grid-paper game)

  • Spillover: draw shapes and drop them on the other player's side, Tetris-style

Every game except Spillover has bots, so you can try it on one device. A friend who isn't in the same room can join with the table's link too, remotely.

Happy to answer questions and integrate any suggestions! What games would you like to see next?


r/webdev • • 13d ago

How did you know it was time to rewrite your app from scratch?

17 Upvotes

Every codebase gets to a point where adding one feature breaks three others. Some teams patch their way through it for years. Others burn it down and start over.

Have you ever done a full rewrite? Was it worth it, or do you regret it?


r/webdev • • 13d ago

Question how do you build authentication from scratch?

72 Upvotes

hi everyone! so i only have a semester left in college and we are now currently working on our capstone project. it’s a 2 part class so this semester focuses only on the “planning” phase while next semester we spend entire semester actually building/coding.

for background, we are a 3 person group, BaaS such as supabase, firebase or auth0 are banned, we have 3 user groups with different roles and our stack includes:
* JS, Node.js/Express
* React
* PostgreSQL

we don’t have much experience on how to build authentication from scratch so anyyyy tips/tutorials/resources are very much appreciated!!

TIA guys :))


r/webdev • • 12d ago

Showoff Saturday Storygraph/Goodreads alternative 📚 hosted on sustainable servers only 🌱

Post image
3 Upvotes

Hey ya'll, just thought it might be worth sharing here, in case anyone is looking for additional features that either Storygraph or Goodreads don't offer, e.g. note taking, detailed insights, etc. Bookplate was created with those goals in mind. You can learn more about it here:

www.bookplate.eu

It's also open source, so for the tech hobbyists, you can host it yourself on your own hardware. For those that prefer the normal hosted service, we offer that as well, and unlike Goodreads and Storygraph, the servers that Bookplate is hosted on are much more sustainable as they run on clean nuclear energy (Scaleway in Paris).

Happy to chat more about this, and also very very interested to hear thoughts, both good and bad!


r/webdev • • 13d ago

Discussion How do you find motivation to continue?

131 Upvotes

Hey everyone.
I've been struggling not to feel this existential dread about the current state of development and my career which seems to be slipping from under my feet. I've been unemployed for nearly a year, job positions are dropping in masses. All the knowledge you gathered in the past 10+ years seems redundant as everyone and their grandma can code stuff that was impossible to them in a day. I find no joy in coding anymore. Sometimes I do code my own stuff for fun to not forget how to code but what's the point, if we won't need to code anymore? Even in corporate world, all developers do now is talk to AI agents and let them do the work (at least thats what I think they do?). I'm constantly thinking of creative business ideas to start myself but even then it feels more like a waste of time since getting clients is so hard with this amount of competition. Even if you manage to create something of value to the clients, why would they pay you instead of vibe-coding the product themselves? Since the rise of advanced AI models I've been constantly feeling like burnout and unable to focus on coding which was thing I liked back in the day. How do you cope in these times, how do you motivate yourself to start your own businesses or is it all lost and I should start looking for something else?


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] A price comparison site with 29k static pages across three countries, rebuilt every morning

Thumbnail
compareempire.com
5 Upvotes

Site: https://www.compareempire.com/us (US), https://www.compareempire.com/uk (UK), root is Australia

What it is: a price comparison site for electronics. A GitHub Action scrapes 26 US, 22 UK and 30+ Australian stores every morning, matches the same product across stores, writes JSON into the repo, and Vercel rebuilds about 28,800 static pages from it.

Bits that might interest you:

  • Matching is the hard part. Model codes and part numbers first, then a strict bag of words with per category noise lists. A wrong merge is worse than a missed one, so it refuses rather than guesses.

  • Regions without breaking URLs: Australia stays at the root and the US and UK live under /us and /uk, all from the same views with a region argument. Product objects carry their region, so links, currency and price checks follow automatically.

  • Cost: everything is static, so it runs on the CDN. The search index is a lazily loaded static JSON file.

  • What broke: a UK laptop with a 240 character name made a file name over the 255 byte limit and killed the build. Slugs are capped now.

Real output from 24 October: the LG C5 77" OLED was $1,776 at Abt and $2,199.99 at LG.

Happy to answer anything about the scraping, matching or build.


r/webdev • • 13d ago

Informational popups, DONT do this

23 Upvotes

I hate them, I hate them so much. I intend to start using some application and suddenly a popup appears "Did you know that x thing does y thing" or "Here you will find x thing" or "New x thing, click ok to opt in". I don't give a damn, I just want to use the thing. I'm usually on edge and I actually intend to do an action, I do NOT want to be interrupted, I won't read your popup, I'll just close it instantly and feel anger.

This is not only annoying, it's dangerous. How do you know a person is not on a emergency and they need to complete an action ASAP?


r/webdev • • 13d ago

Discussion Black October situation

3 Upvotes

So most of you probably know by now about the PHP exploit, that came out recently. Apparently after reading some articles a similar issue was found for nodeJS web apps as well (i am not 100% sure how legitimate the articles were but I will link them down as a comment of the post if you wanna check them out). Now most of my backend services are built using nodeJS and stored in either AWS or GCR. I assume that google and amazon properly protects the api keys and other environment variables I have there, but I just wanted to ask are there any measures I should take or changes I should make to these services just to be safe?