DEV Community: Marwan Zaky

Reduce Tremendous Code Without Third-Party Solution

Marwan Zaky — Tue, 14 Apr 2026 20:17:11 +0000

We’ve all been there: you start a new project, and before you’ve written a single line of business logic, your package.json is already filled with small dependancies, and complex monorepo configurations.

While libraries are great, they often come with extra weight and "abstraction tax" that you don't always need.

In this post, I’m sharing couple of lightweight patterns I use to slash boilerplate and remove third-party dependencies in my Next.js and NestJS applications.

1. Fetch Wrapper

If you fetch apis using native apis, you can reduce a lot of code by using this wrapper

// lib/api-client.ts
import Cookies from "js-cookie";

const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";

export async function clientFetch<T>(
    endpoint: string,
    options: RequestInit = {},
): Promise<T> {
    const token = Cookies.get("token");

    const headers: Record<string, string> = {
        "Content-Type": "application/json",
        ...(token && { Authorization: `Bearer ${token}` }),
        ...(options.headers as Record<string, string>),
    };

    if (options.body instanceof FormData) {
        delete headers["Content-Type"];
    }

    const response = await fetch(`${baseUrl}${endpoint}`, {
        ...options,
        headers,
    });

    if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message);
    }

    return response.json();
}

Use examples

// favorites.service.ts
export const favoritesService = {
    getAll: () => clientFetch<IProduct[]>("/favorites"),
    createOne: (productId: string) =>
        clientFetch<IProduct>(`/favorites/${productId}`, { method: "POST" }),
    removeOne: (productId: string) =>
        clientFetch<null>(`/favorites/${productId}`, { method: "DELETE" }),
};

2. JavaScript Object to `formdata`

Do you find yourself appending object keys and values manually to convert javascript objects to formdata? Which result in ugly and unmaintainable code? Use this instead

// utils/helper.ts
export function jsonToFormData(data: any) {
    const formData = new FormData();

    buildFormData(formData, data);

    return formData;
}

function buildFormData(formData: any, data: any, parentKey?: any) {
    if (
        data &&
        typeof data === "object" &&
        !(data instanceof Date) &&
        !(data instanceof File) &&
        !(data instanceof Blob)
    ) {
        Object.keys(data).forEach((key) => {
            buildFormData(
                formData,
                data[key],
                parentKey ? `${parentKey}[${key}]` : key,
            );
        });
    } else {
        const value = data == null ? "" : data;

        formData.append(parentKey, value);
    }
}

Use examples

// products.service.ts
export const productsService = {
    create: (product: ICreateProduct) => {
        const formData = jsonToFormData(product);

        return clientFetch<IProduct>("/products", {
            method: "POST",
            body: formData,
        });
    },
    updateOne: (id: string, product: IUpdateProduct) => {
        const formData = jsonToFormData(product);

        return clientFetch<IProduct>(`/products/${id}`, {
            method: "PATCH",
            body: formData,
        });
    },
};

3. Duplicate Interfaces

Do you see yourself duplicating interfaces between front-end and back-end? Well you may know about monorepo tools like Turborepo, Nx. But you don’t want to introduce that much complexity to just share the typescript files. Do this.

I assume you are using Next.js and NestJS directory as following

/api/
/web/
/shared/
    /src/
        user.type.ts
        product.type.ts

Add this tsconfig.ts to your Next.js and NestJS

// web/tsconfig.json
{
    "compilerOptions": {
        "paths": {
            "@shared/types/*": ["../shared/src/*"]
        }
    },
    "include": [
        "../shared/src/**/*"
    ],
}

Then you can import them

import { User, CreateUser, UpdateUser } from "@shared/user.type";
import { Product, CreateProduct, UpdateProduct } from "@shared/product.type";

4. Class Merging

If you are tired of long string concatenations for CSS classes but don't want a library

// lib/utils.ts
export function cn(...classes: (string | boolean | undefined)[]) {
  return classes.filter(Boolean).join(" ");
}

Use examples

// Before
<button className={`btn ${active ? 'btn-active' : ''} ${disabled ? 'btn-disabled' : ''}`}>
  Submit
</button>

// After
<button className={cn("btn", active && "btn-active", disabled && "btn-disabled")}>
  Submit
</button>

Wrapping Up

By leaning on the native Fetch API, recursive FormData builders, and TypeScript’s path mapping, you can keep your architecture lean and your bundle size small. You don’t always need a 50kb library to handle a task that a 20-line utility function can do better.

What about you? Are there any third-party libraries you’ve successfully replaced with native code recently? I’d love to hear your favorite "vanilla" hacks in the comments below!

Stop Writing Messy Forms — Use This Modern Next.js Validation Stack

Marwan Zaky — Sat, 04 Apr 2026 12:14:13 +0000

Step by step on how to implement a modern Next.js form validation stack:

react-form-hook manages the state, submission, and error tracking
shadcn provides the pre-styled accessible components (e.g. Card, Input, Field) that tie into the hook.
zod defines the "shape" of your data and validation rules

Demo example: https://mamolio.vercel.app/signin

Demo code: https://github.com/marwanzaky/mern-ecommerce

1. Install Dependencies

Go to your existing Next.js app directory and install react-form-hook and zod

npm install react-hook-form zod @hookform/resolvers

2. Install Shadcn Components

If you don't have shadcn installed already use this command

npx shadcn@latest init --preset b0 --template next

Then use this to add input, field, and card components

npx shadcn@latest add input
npx shadcn@latest add field
npx shadcn@latest add card

3. Login Form Page

Create new page app/signin/page.tsx and import card, field, button, input and zod components

// app/signin/page.tsx
"use client";

import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@shadcn/components/ui/card";
import {
    Field,
    FieldDescription,
    FieldError,
    FieldGroup,
    FieldLabel,
} from "@components/ui/field";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

Create sign up form schema

// app/signin/page.tsx
const SignUpSchema = z.object({
    email: z
        .email()
        .nonempty("This field is required.")
        .max(32, "Email is too short."),
    password: z.string().nonempty("This field is required."),
});

type SignUpInput = z.infer<typeof SignUpSchema>;

Create react-form-hook

// app/signin/page.tsx
export default function Page() {
    const {
        register,
        handleSubmit,
        formState: { errors, isSubmitting },
    } = useForm<SignUpInput>({
        resolver: zodResolver(SignUpSchema),
        mode: "onSubmit",
        defaultValues: {
            email: "",
            password: "",
        },
    });

    const onSubmit = async (data: SignUpInput) => {
        const { email, password } = data;
        console.log("email", email);
        console.log("password", password);
    };
}

Example on how to use them to create fields

<Field data-invalid={!!errors.email}>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <FieldContent>
        <Input
            id="email"
            placeholder="m@example.com"
            aria-invalid={!!errors.email}
            {...register("email")}
        />
    </FieldContent>
    <FieldError>{errors.email?.message}</FieldError>
</Field>

Now let’s create card form with email and password fields and submit button

// app/signin/page.tsx
export default function Page() {
    return (
        <Card className="mx-auto w-full max-w-sm">
            <CardHeader>
                <CardTitle>Login to your account</CardTitle>
                <CardDescription>
                    Enter your email below to login to your account
                </CardDescription>
            </CardHeader>

            <CardContent>
                <form onSubmit={form.handleSubmit(onSubmit)}>
                    <FieldGroup>
                        <Field data-invalid={!!errors.email}>
                            <FieldLabel htmlFor="email">Email</FieldLabel>
                            <FieldContent>
                                <Input
                                    id="email"
                                    placeholder="m@example.com"
                                    aria-invalid={!!errors.email}
                                    {...register("email")}
                                />
                            </FieldContent>
                            <FieldError>{errors.email?.message}</FieldError>
                        </Field>

                        <Field data-invalid={!!errors.password}>
                            <div className="flex items-center">
                                <FieldLabel htmlFor="password">
                                    Password
                                </FieldLabel>
                                <Link
                                    href="/forgot-password"
                                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                                >
                                    Forgot your password?
                                </Link>
                            </div>
                            <FieldContent>
                                <Input
                                    id="password"
                                    type="password"
                                    aria-invalid={!!errors.password}
                                    {...register("password")}
                                />
                            </FieldContent>
                            <FieldError>{errors.password?.message}</FieldError>
                        </Field>

                        <Field>
                            <Button type="submit">Login</Button>
                            <Button type="button" variant="outline">
                                Login with Google
                            </Button>
                            <FieldDescription className="text-center">
                                Don&apos;t have an account?{" "}
                                <Link href="/signup">Sign up</Link>
                            </FieldDescription>
                        </Field>
                    </FieldGroup>
                </form>
            </CardContent>
        </Card>
    );
}

4. Why this stack works well

react-hook-form → minimal re-renders, great performance
zod → schema = validation + types in one place
shadcn → accessible, composable UI components

You are all set to use form validation for anything really

More live examples

Feel free to review the code on GitHub

You may also want to learn How to Implement Google OAuth 2.0 in Next.js with NestJS

How to Implement Google OAuth 2.0 in Next.js with NestJS

Marwan Zaky — Tue, 24 Mar 2026 19:46:19 +0000

Step by step on how to implement Google OAuth 2.0 in Next.js with NestJS.

Demo example: https://mamolio.vercel.app/signin

Demo code: https://github.com/marwanzaky/mern-ecommerce

1. Create Google OAuth Credentials

Go to: http://console.cloud.google.com
Create a project
Go to: APIs & Services > Credentials > Create credentials > OAuth client ID
Choose:

App type: Web application

Add:

Authorized redirect URI

http://localhost:3001/auth/google/callback

Click Create and copy CLIENT_ID, and CLIENT_SECRET

2. Backend (NestJS)

Install Dependencies

npm install passport @types/passport @nestjs/passport passport-google-oauth20 @types/passport-google-oauth20

Create Google Strategy

// google.strategy.ts
import { Injectable } from "@nestjs/common";
import { PassportStrategy } from "@nestjs/passport";
import { Strategy, VerifyCallback } from "passport-google-oauth20";

@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy, "google") {
    constructor() {
        super({
            clientID: process.env.GOOGLE_CLIENT_ID!,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
            callbackURL: `${process.env.SERVER_URL!}/auth/google/callback`,
            scope: ["email", "profile"],
        });
    }

    async validate(
        accessToken: string,
        refreshToken: string,
        profile: {
            name: { familyName: string; givenName: string };
            emails: { value: string }[];
        },
        done: VerifyCallback,
    ) {
        const { emails, name } = profile;

        const user = {
            email: emails[0].value,
            firstName: name.givenName,
            lastName: name.familyName,
        };

        done(null, user);
    }
}

Auth Controller

// auth/auth.controller.ts
@Get('google')
@UseGuards(AuthGuard('google'))
async googleAuth() {
    // redirects to Google
}

@Get("google/callback")
@UseGuards(AuthGuard("google"))
async googleAuthRedirect(@Req() req: any, @Res() res: any) {
    const response = await this.authService.loginWithGoogle(req.user);
    return res.redirect(`${process.env.CLIENT_URL!}/auth/success?token=${response.token}`);
}

Auth Service

// auth/auth.service.ts
async loginWithGoogle(user: {
    email: string;
    firstName: string;
    lastName: string;
}): Promise<{ token: string }> {
    const existingUser = await this.usersService
        .findByEmail(user.email);

    if (!existingUser) {
        const randomPassword = generatePassword();

        const newUser = await this.usersService.create({
            email: user.email,
            name: `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim(),
            password: randomPassword,
        });

        return {
            token: await this.createAccessToken(newUser.id, newUser.role)
        };
    }

    return {
        token: await this.createAccessToken(existingUser.id, existingUser.role),
    };
}

async createAccessToken(userId: string, role: UserRole) {
    return await this.jwtService.sign(
        { id: userId, role },
        {
            secret: process.env.JWT_SECRET!,
            expiresIn: process.env.JWT_EXPIRES!,
        },
    );
}

App Module

// app.module.ts
@Module({
    imports: [
        ConfigModule.forRoot({
            envFilePath: ".env",
            isGlobal: true,
        }),

        MongooseModule.forRootAsync({
            imports: [ConfigModule],
            inject: [ConfigService],
            useFactory: async (config: ConfigService) => ({
                uri: config.get<string>("MONGODB_URI"),
            }),
        }),

        AuthModule,
        UsersModule,
    ],
    providers: [
        JwtService,
        {
            provide: APP_GUARD,
            useClass: AuthGuard,
        },
        {
            provide: APP_GUARD,
            useClass: RolesGuard,
        },
    ],
})
export class AppModule {}

Environment Variables

CLIENT_URL="http://localhost:3000"
SERVER_URL="http://localhost:3001"
GOOGLE_CLIENT_ID="your_google_client_id"
GOOGLE_CLIENT_SECRET="your_google_client_secret"
JWT_SECRET="your_jwt-secret"
JWT_EXPIRES=30d

3. Frontend (Next.js)

Signin Page

// app/signin/page.tsx
const handleGoogleLogin = () => {
    window.location.href = `${process.env.NEXT_PUBLIC_SERVER!}/auth/google`;
};

<button onClick={handleGoogleLogin}>Continue with Google</button>;

Success Page

// app/success/page.tsx
"use client";

import { useRouter, useSearchParams } from "next/navigation";

export default function Page() {
    const router = useRouter();
    const searchParams = useSearchParams();

    useEffect(() => {
        const token = searchParams.get("token");

        if (token) {
            localStorage.setItem("token", token);
            router.push("/");
        }
    }, [searchParams, router]);

    return <p>Logging you in...</p>;
}

Environment Variables

NEXT_PUBLIC_SERVER="http://localhost:3001"

3. Flow (What Happens)

User clicks “Continue with Google”
Redirect → Google login page
Google redirects back → /auth/google/callback
NestJS:
- extracts profile
- creates/fetches user
- returns JWT
You store JWT in frontend

You are all set to use the Sign in with Google button for the web. You can review my code to implement “Sign In with Google” for Next.js and NestJS on GitHub.

My thoughts after learning Angular

Marwan Zaky — Sun, 01 Oct 2023 18:22:58 +0000

My go-to web framework has been always React.js (Or Next.js) since my start journey into full-stack web development. And, I didn't have the courage to learn other interesting popular frameworks such as Vue.js, and Svelte.

Not because I dislike them, I just don't see the reason to since as a full-time freelancer the most demanding and preferred framework among clients is React.js.

However, there is one specific framework that I have no interest in or hope not use in my career and learn which is Angular since people seem to hate it and it's very rare you see someone talking about it on social media.

Recently, I got a new full-stack developer role opportunity which is looking for an Angular developer. I was very happy with most of the technologies they are using but quite not happy with the framework.

A few days after learning and digging deeper into the Angular framework, and thought. Hah, maybe it is not as bad as I thought. And I was quite impressed with how they're approaching building websites. It has a quite different mindset than React.js.

What I've learned after using Angular for 3 months?

After using Angular for a while now I can see it's a very powerful framework. Angular, forces you to have a dedicated and separated code logic for each file as the following:

name.component.html
name.component.css
name.component.ts
name.service.ts

React.js on the other hand it's quite the opposite of that in which you combine all logic into one function. Which can be very overwhelming sometimes when dealing with complex components.

We see Angular is nicely separated logic whereas React is not really. Also, in React you have so much freedom and many ways you can build and define your project architecture which is prone to a lot of bad practices, especially for beginners.

This too much freedom can be an issue, especially with collaboration with other developers which can result in inconsistent coding patterns and architecture in the codebase.

On the other hand with Angular, it narrows that freedom with a solid and consistent architecture and coding pattern throughout the project which works very well on big projects.

The other thing with React is you have to rely on a lot of third-party solutions whereas in Angular you have all the features out of the box which works really well together.

Conclusion

In conclusion not saying React.js is not good, I would say both have some cons and pros.

With React.js you have so many opportunities and options to choose from depending on what you want to build.

And I would also say, that Angular can be slowish sometimes if you want to build something quicker and faster which is not ideal for prototyping.

And yeah, this is my overall thoughts on these two popular frameworks and I'm thinking of making a more detailed version of this post to elaborate more on why Angular is a very underrated and very powerful framework.

DEV Community: Marwan Zaky

Reduce Tremendous Code Without Third-Party Solution

1. Fetch Wrapper

2. JavaScript Object to formdata

3. Duplicate Interfaces

4. Class Merging

Wrapping Up

Stop Writing Messy Forms — Use This Modern Next.js Validation Stack

1. Install Dependencies

2. Install Shadcn Components

3. Login Form Page

4. Why this stack works well

How to Implement Google OAuth 2.0 in Next.js with NestJS

1. Create Google OAuth Credentials

2. Backend (NestJS)

Install Dependencies

Create Google Strategy

Auth Controller

Auth Service

App Module

Environment Variables

3. Frontend (Next.js)

Signin Page

Success Page

Environment Variables

3. Flow (What Happens)

My thoughts after learning Angular

What I've learned after using Angular for 3 months?

Conclusion

2. JavaScript Object to `formdata`