DEV Community: Kingsley Amankwah

Building Secure Authentication in Angular with Supabase

Kingsley Amankwah — Fri, 06 Jun 2025 08:59:50 +0000

Hey Angular developers! 🅰️ It's about that time again for yet another article. In this guide, we're going to dive into how to integrate Supabase, with Angular to build a secure authentication application. We’ll set up signup, and login authentication with Supabase in Angular and protect routes of some pages. Let’s get started

Prerequisites

Before we dive in, make sure you've got:

An Angular project
Node.js v16+ installed
A Supabase account at Supabase Website

Step 1: Set Up a Supabase Project

Create a New Project:

Enter a project name, and database password, and choose a region.

Wait a few minutes for the project to provision.

Retrieve API Credentials:
On the project overview section, Copy the Project URL and anon public (API Key).

Step 2: Create an Angular Project

Generate a New Angular App:

ng new supabase-auth-app

Choose your preferred styling when prompted.

Install Dependencies: Install the Supabase JavaScript client:

npm install @supabase/supabase-js

Step 3: Configure Supabase in Angular

Set Up Environment Variables: Store the Supabase credentials securely in Angular’s environment files.

Open src/environments/environment.ts and add:

export const environment = {
  production: false,
  supabaseUrl: 'SUPABASE_URL',
  supabaseKey: 'SUPABASE_ANON_KEY'
};

Replace SUPABASE_URL and SUPABASE_ANON_KEY with values from the Supabase dashboard.

Create Type Definitions: In src/app/types/user.type.ts, define types for user data and payloads:

export type User = {
  id: string;
  email?: string;
  phone?: string;
  user_metadata: {
    displayName?: string;
  };
};

export type SignupPayload = {
  name: string;
  email: string;
  password: string;
};

export type LoginPayload = {
  email: string;
  password: string;
};

Create a Supabase Service: Generate a service to manage Supabase interactions:

ng generate service services/supabase

Update src/app/services/supabase.service.ts to initialize the Supabase client and handle authentication:

import { Injectable } from '@angular/core';
import { createClient, SupabaseClient } from '@supabase/supabase-js';
import { environment } from '../../environments/environment';
import { LoginPayload, SignupPayload } from '../types/user.type';

@Injectable({
  providedIn: 'root',
})
export class SupabaseService {
  private readonly supabase: SupabaseClient;
  constructor() {
    this.supabase = createClient(
      environment.supabaseUrl,
      environment.supabaseKey
    );
  }

  async signInWithEmail(payload: LoginPayload) {
    return await this.supabase.auth.signInWithPassword({
      email: payload.email,
      password: payload.password,
    });
  }

  async signUpWithEmail(payload: SignupPayload) {
    return await this.supabase.auth.signUp({
      email: payload.email,
      password: payload.password,
      options: {
        data: {
          displayName: payload.name,
        },
      },
    });
  }

  async getUser() {
    return await this.supabase.auth.getUser();
  }

  async signOut() {
    return await this.supabase.auth.signOut();
  }
}

The SupabaseService centralizes authentication logic, making it reusable across components. It handles initialization, user state, and auth methods, ensuring clean and maintainable code.

Step 4: Set Up Authentication Components

We’ll create components for login, signup, and profile pages.

Generate Components:

ng generate component auth/login
ng generate component auth/signup 
ng generate component profile

import { Component, inject, signal } from '@angular/core';
import { SupabaseService } from '../../services/supabase.service';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  imports: [FormsModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css',
})
export class LoginComponent {
  email = signal('');
  password = signal('');

  private readonly supabaseService = inject(SupabaseService);
  private readonly router = inject(Router);

  async signInWithEmail() {
    const { error } = await this.supabaseService.signInWithEmail({
      email: this.email(),
      password: this.password(),
    });
    if (error) {
      alert('Error signing in: ' + error.message);
    } else {
      this.router.navigate(['/profile']);
    }
  }

  navigateToSignup() {
    this.router.navigate(['/signup']);
  }
}

Update src/app/auth/login/login.component.html:

<div class="container">
  <h2>Login</h2>
  <form>
    <input
      type="email"
      [(ngModel)]="email"
      name="email"
      placeholder="Email"
      required
    />
    <input
      type="password"
      [(ngModel)]="password"
      name="password"
      placeholder="Password"
      required
    />
    <button type="button" (click)="signInWithEmail()">Sign In</button>
  </form>
  <p>Don't have an account? <a (click)="navigateToSignup()">Sign Up</a></p>
</div>

Add styling(optional), in src/app/auth/login/login.component.css:

.container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
input, button {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
}
button {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}

Signup Component: Update src/app/auth/signup/signup.component.ts:

import { Component, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SupabaseService } from '../../services/supabase.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-signup',
  imports: [FormsModule],
  templateUrl: './signup.component.html',
  styleUrl: './signup.component.css',
})
export class SignupComponent {
  name = signal('');
  email = signal('');
  password = signal('');

  private readonly supabaseService = inject(SupabaseService);
  private readonly router = inject(Router);

  async signUp() {
    const { error } = await this.supabaseService.signUpWithEmail({
      name: this.name(),
      email: this.email(),
      password: this.password(),
    });
    if (error) {
      alert('Error signing up: ' + error.message);
    } else {
      alert('Check your email to confirm your account!');
      this.router.navigate(['/login']);
    }
  }

  navigateToLogin() {
    this.router.navigate(['/login']);
  }
}

Update src/app/auth/signup/signup.component.html:

<div class="container">
  <h2>Sign Up</h2>
  <form>
    <input
      type="text"
      [(ngModel)]="name"
      name="name"
      placeholder="Full Name"
      required
    />
    <input
      type="email"
      [(ngModel)]="email"
      name="email"
      placeholder="Email"
      required
    />
    <input
      type="password"
      [(ngModel)]="password"
      name="password"
      placeholder="Password"
      required
    />
    <button type="button" (click)="signUp()">Sign Up</button>
  </form>
  <p>Already have an account? <a (click)="navigateToLogin()">Log In</a></p>
</div>

Use the same CSS as the login component (signup.component.css).

Profile Component: Update src/app/profile/profile.component.ts:

import { Component, inject, OnInit } from '@angular/core';
import { SupabaseService } from '../services/supabase.service';
import { Router } from '@angular/router';
import { User } from '../types/user.type';

@Component({
  selector: 'app-profile',
  imports: [],
  templateUrl: './profile.component.html',
  styleUrl: './profile.component.css',
})
export class ProfileComponent implements OnInit {
  user: User | null = null;

  private readonly supabaseService = inject(SupabaseService);
  private readonly router = inject(Router);

  ngOnInit() {
    this.fetchUser();
  }

  async fetchUser() {
    const { data } = await this.supabaseService.getUser();
    this.user = data.user;
    if (!this.user) {
      this.router.navigate(['/login']);
    }
  }
  async signOut() {
    await this.supabaseService.signOut();
    this.router.navigate(['/login']);
  }
}

Update src/app/profile/profile.component.html:

<div class="container">
  <h2>User Profile</h2>
  <p>
    Congratulations! Welcome to secure auth with Angular + Supabase is running.
    🎉
  </p>
  @if (user) {
  <p>User ID: {{ user.id }}</p>
  <p>Email: {{ user.email }}</p>
  <p>Display Name: {{ user.user_metadata.displayName }}</p>
  }

  <button (click)="signOut()">Sign Out</button>
</div>

Step 5: Configure Routing and Route Protection

Create an Auth Guard: Generate a guard:

ng generate guard guards/auth

Update src/app/guards/auth.guard.ts:

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { SupabaseService } from '../services/supabase.service';

export const authGuard: CanActivateFn = async (route, state) => {
  const supabaseService = inject(SupabaseService);
  const router = inject(Router);

  const user = await supabaseService.getUser();
  if (!user) {
    router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
  return true;
};

Set Up Routes: Update src/app/app.routes.ts to use lazy loading and protect the profile route:

import { Routes } from '@angular/router';
import { authGuard } from './guards/auth.guard';

export const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  {
    path: 'login',
    loadComponent: () =>
      import('./auth/login/login.component').then((c) => c.LoginComponent),
  },
  {
    path: 'signup',
    loadComponent: () =>
      import('./auth/signup/signup.component').then((c) => c.SignupComponent),
  },
  {
    path: 'profile',
    loadComponent: () =>
      import('./profile/profile.component').then((c) => c.ProfileComponent),
    canActivate: [authGuard],
  },
];

Run Application

Using the command:

ng serve -o

This will run and open the application in the default browser.

After successful sign-in🎉🎉🎉

Conclusion

We’ve just built a secure authentication system in Angular using Supabase, complete with email/password signup, login, and route protection.

This setup is a solid foundation for more advanced features like role-based access, password resets, or social logins, all supported by Supabase.

Access the full source code on GitHub.

For more customization and ideas, explore the Supabase Docs.

Happy coding! 🅰️⚡

Underrated Angular Features Everyone Should Be Using

Kingsley Amankwah — Fri, 16 May 2025 14:19:58 +0000

Hey Angular developers! 🅰️ While features like signals and standalone components get all the attention, Angular has quietly introduced many smaller (but just as impactful) improvements. These lesser-known tools can make the codebase cleaner, faster, and easier to maintain.

In this article, I’ll reveal some powerful but underused Angular features, along with the version they were introduced in.

takeUntilDestroyed Operator (v16+)

The takeUntilDestroyed operator, as part of the @angular/core/rxjs- interop package, is a utility in Angular for managing observable
subscriptions to prevent memory leaks. It automatically completes an
observable when the associated Angular component, directive, service, or
pipe is destroyed, eliminating the need for a manual subscription.

 import { Component } from '@angular/core';
 import { interval } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

 @Component({
  selector: 'app-timer',
  template: `<p>Timer: {{ count }}</p>`,
 })
 export class TimerComponent {
  count = 0;

  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(() => this.count++);
  }
}

Key Benefits:

Eliminates manual cleanup with ngOnDestroy.
Prevents memory leaks effortlessly.
Works in any injection context (no DestroyRef needed in constructors).

Note: Use it in constructors or providers for maximum simplicity.

inject() – Dependency Injection Without a Constructor (v14+)

Gone are the days when DI was limited to constructors. With inject(), we grab dependencies anywhere, even in utility functions.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// No constructor needed!
const http = inject(HttpClient);

Key Benefits:

Works outside components (e.g., in functions or services).
It makes unit testing easier (there is no need for TestBed in some cases).
Reduces boilerplate in standalone components.

NgOptimizedImage Directive (Angular 15+)

Images can slow down your app if not optimized. This directive automatically handles lazy loading and performance tweaks!

Although the NgOptimizedImage directive was made a stable feature in Angular version 15, it has been backported and is available as a stable feature in versions 13.4.0 and 14.3.0 as well.

<img ngSrc="hero.jpg" width="1200" height="800" priority>

Key Benefits:

Automatic srcset generation
Lazy-loads images to boost performance.
Prevents layout shifts with proper sizing.
Supports CDN optimizations like automatic srcset.

Note: Use the priority attribute for above-the-fold images to prioritize loading.

provideHttpClient() (Angular 15+)

The provideHttpClient() function sets up HTTP services in one line, with support for interceptors, making it a must-have for standalone apps.

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient} from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
  ],
};

Key Benefits:

Eliminates HttpClientModule boilerplate.
Simplifies HTTP setup for standalone components.
Supports interceptors for advanced request handling (e.g., auth tokens)

input/output with Signals (v17+)

These features are Signal-based functions that replace the traditional @Input() and @Output() decorators

Below is a code sample of its usage:

import { Component, input, output } from '@angular/core';

// Child Component
@Component({
  selector: 'app-counter',
  template: `
    <div class="counter">
      <button (click)="decrement()">-</button>
      <span>{{ count() }}</span>
      <button (click)="increment()">+</button>
    </div>
   `,
  standalone: true
})
export class CounterComponent {
  count = input(0); // Equivalent to @Input()
  countChanged = output<number>(); // Equivalent to @Output()

  increment() {
    const newValue = this.count() + 1;
    this.countChanged.emit(newValue);
  }

  decrement() {
    this.countChanged.emit(this.count() - 1);
  }
}

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <app-counter 
      [count]="currentCount()" 
      (countChanged)="handleCountChange($event)"
    />
  `,
  standalone: true,
  imports: [CounterComponent]
})
export class ParentComponent {
  currentCount = signal(5);

  handleCountChange(newValue: number) {
    this.currentCount.set(newValue);
  }
}

Key benefits:

Type-safe by default
Works seamlessly with Signals
Simpler than traditional @Input/@Output

Required Inputs Signal (Angular 17+)

Missing component inputs can lead to runtime errors. Marking inputs as required ensures they’re always provided, catching issues early.

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `<h2>{{ title() }}</h2>`,
})
export class CardComponent {
  title = input.required<string>();
}

model() Function – Reactive Two-Way Binding (Angular 17+)

It replaces the @Input() and @Output() decorators with model() function for a unified, reactive API that simplifies component communication.

Below is a code sample:

import { Component, model } from '@angular/core';

// Child Component (Reusable Toggle)
@Component({
  selector: 'app-toggle',
  template: `
    <button (click)="toggle()" [class.active]="value()">
      {{ value() ? 'ON' : 'OFF' }}
    </button>
  `,
  styles: [`
    button { 
      padding: 0.5rem 1rem;
      border: 1px solid #ccc; 
    }
    .active {
      background: #3f51b5;
      color: white;
    }
  `],
  standalone: true
})
export class ToggleComponent {
  // Creates a two-way binding model
  value = model<boolean>(false); // Default: false

  toggle() {
    this.value.set(!this.value()); // Updates parent automatically
  }
}

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <h2>Current State: {{ isToggled() ? 'ACTIVE' : 'INACTIVE' }}</h2>

    <!-- Two-way binding syntax -->
    <app-toggle [(value)]="isToggled" />

    <!-- Manual binding alternative -->
    <app-toggle 
      [value]="isToggled()" 
      (valueChange)="isToggled.set($event)" 
    />
  `,
  standalone: true,
  imports: [ToggleComponent]
})
export class ParentComponent {
  isToggled = signal(false); // Parent manages state
}

Key Benefits:

Combines input and output for two-way binding.
Reactive and efficient with Signals.
Reduces component boilerplate.

Deferrable Views (v17+)

As part of the new control flow syntax, the deferrable view was introduced to lazy load template content.

Below is a code sample for its use case:

@defer (when condition; on trigger) {
  <!-- Heavy content to lazy load -->
  <expensive-component />

} @placeholder (optional) {
  <!-- Shown while waiting to load -->
  <skeleton-loader />

} @loading (optional) {
  <!-- Shown during loading -->
  <spinner />

} @error (optional) {
  <!-- Shown if loading fails -->
  <error-message />
}

Key Benefits:

90%+ reduction in initial bundle size
Built-in loading/error states
Multiple trigger conditions (viewport, idle, interaction)

Here’s a quick overview of the underutilized Angular features covered in this article:

Feature	Version	Primary Use Case
takeUntilDestroyed	16+	Observable cleanup
inject()	14+	Flexible dependency injection
NgOptimizedImage	15+	Image optimization
provideHttpClient()	15+	Simplified HTTP setup
input/output (Signals)	17+	Type-safe component communication
Required Inputs	17+	Enforce input presence
model()	17+	Reactive two-way binding
Deferrable Views	17+	Lazy-loaded templates

Conclusion

These features may not be seen in the spotlight, but very effective. Let's make use of these hidden gems, we can streamline our development process and build cleaner, faster, and more robust Angular applications with ease.

Happy coding! 🅰️

How to Integrate Sanity CMS with Angular

Kingsley Amankwah — Fri, 18 Apr 2025 12:33:19 +0000

Hey Angular developers! 🅰️ Most of the time, we find ourselves in an endless cycle of updating hard-coded content, making code changes, rebuilding our apps, and redeploying just to fix a typo or update a small description, which is not efficient because there's a smarter way to go about it. In this guide, I'll walk you through how to integrate Sanity CMS, with Angular.

Pro tip: Sanity content platform lets your marketing team edit content directly on the application while you focus on building great features.

Why Sanity And Angular?

Real-time content updates without app redeploys
Structured content modeling for consistent data
TypeScript-first developer experience
Image optimization built-in
Free tier perfect for getting started

Prerequisites

Before we dive in, make sure you've got:

An Angular project
Node.js v16+ installed
A Sanity.io account (free tier works)

Section 1: Setting Up Sanity Studio

Installation

Run the command npm install -g @sanity/cli to install Sanity CLI globally. After successful installation, run the command sanity init to initialise a new sanity project

Setting Up Your Content Structure

When running sanity init, you'll encounter an important choice:

? Select project template
❯ Clean project with no predefined schemas
  Blog (schema)
  E-commerce (schema)
  Portfolio (schema)

For this tutorial, select Blog (schema) because:

Provides ready-to-use content models
Demonstrates Sanity's core concepts
Lets us focus on Angular integration

The blog schema includes:

Posts with titles, slugs, and rich text
Author management
Category system

This is perfect for learning how Sanity structures content before creating custom schemas.

For Experienced Users
Choose Clean project with no predefined schemas if you:

Need complete control
Have existing content models
Want to build from scratch

If you’re in the sanity project directory, run:

sanity dev

Then, open your browser and go to:

http://localhost:3333

Expected Output:

If everything goes as planned, the http://localhost:3333 will show the page below:

The view shows a page for you to log in to your sanity studio

After a successful login based on the provider chosen, if you selected the Blog (Schema) as the project template, below is how the structure is going to look:

The view shows the structure for the blog schema

Section 2: Configuring Sanity In Angular

Now that our Sanity Studio is running, it’s time to configure Sanity Client in the Angular app.

Step 1: Install Required Packages

We’ll need a few npm packages to fetch and work with data from Sanity:

npm install @sanity/client

Click on the user profile section on the http://localhost:3333

From the displayed dropdown, select the Manage Project to navigate to the Sanity Dashboard

In the Sanity Dashboard below, we can find the projectId and can manage datasets, tokens, and collaborators. We'll need this info to configure the Angular client.

The image above is a general overview of the Sanity Dashboard

Step 2: Set Up Sanity Client in Angular

Create a new directory, e.g., config and a new file inside the config app directory, to handle the setup for sanity in Angular.

Here is a simplified structure:

src/app/config/sanity-client.ts

Then, add the following code details:

// src/app/config/sanity-client.ts
import sanityClient from '@sanity/client';
export const client = sanityClient({
  projectId: 'your_project_id',
  dataset: 'your-dataset-title',     
  useCdn: true,                 // `false` if you want fresh data
  apiVersion: '2023-01-01',     // Use a UTC date string
});

Placing Sanity config in its file keeps things modular and reusable, especially if we need to call the client from different parts of the Angular app (services, components, etc)

Section 3: Creating Sanity GROQ Queries In Angular

Now that we’ve set up Sanity Studio and configured the Angular app to connect to it, it’s time to define the actual queries we'll use to fetch content.

With GROQ, we can:

Filter documents (*[_type == "post"])
Fetch nested and referenced fields (author->name)
Sort, limit, and slice data
Shape your responses exactly how you want

To keep our project clean and maintainable, let’s create a dedicated directory for all our GROQ queries.
Here's a simplified structure

src/app/queries/posts.groq.ts

Create the file and paste in the following query to get all posts:

// src/app/queries/posts.groq.ts

export const getAllPostsQuery = `
*[_type == "post"]{
  _id,
  title,
  slug,
  mainImage {
    asset->{
      url
    }
  },
  author->{
    name,
    image{
    asset->{
       url
      }
    }
  },
    categories[]->{
      title,
      description
    },
  publishedAt,
  body[0]
} | order(publishedAt desc)
`;

In the query above,

[_type == "post"] – Fetch all documents of type post
{ ... } – Project only the fields we want: title, slug, mainImage, etc.
mainImage.asset->url – Traverse the image reference to get its url
author->name – Follow the reference to the author and grab their name
body[0] – Just grab the first block of the body (optional for previews)
| order(publishedAt desc) – Sort posts from newest to oldest

Let's add another query in the src/app/queries/posts.groq.ts file to get full post details by slug:

export const getPostBySlugQuery = (slug: string) => `
*[_type == "post" && slug.current == "${slug}"][0]{
  _id,
  title,
  slug,
  publishedAt,
  mainImage {
    asset->{
      url
    }
  },
  author->{
    name,
    bio,
    image {
      asset->{
        url
      }
    }
  },
  categories[]->{
    title
  },
  body
}
`;

In the slug query above,

[_type == "post" && slug.current == "${slug}"] – Find a post where the slug matches the one passed in
[0] – Get just the first (and hopefully only) match
mainImage.asset->url – Resolve the image reference to its URL
author-> – Expand author details to get both name and profile image
categories[]-> – Get titles for all linked categories
body – Get the full post content (use this for rendering detail view)

Add Sample Data to Sanity

Before jumping into building the Angular service, let’s add some sample data to our Sanity Studio so we actually have something to display.

Go to http://localhost:3333 to access the Sanity Studio.
Click the "Category" tab and add a few categories:
- Programming concepts
- CMS & Headless
- TypeScript
- Angular
Then move to the "Author" tab and add authors:
- Kingsley Amankwah – Tech Writer with a passion for clean code
- Angelina Jolie – Full Stack Dev & Coffee Enthusiast
- Iddris Alba – Dev Advocate @ AngularVerse
- Jason Stathan – GDE Dev Advocate @ Google
- Tommy Shelby – NgRx Co-Founder
Finally, go to the "Post" tab and add posts:

“Building a Blog with Sanity and Angular from Scratch”

Author: Iddris Alba
Categories: Angular, CMS & Headless

“Creating SEO-Friendly Angular Apps with SSR and Sanity”

Author: Iddris Alba
Categories: Angular, Programming Concepts, CMS & Headless

“Why Angular + Sanity CMS is a Power Combo”

Author: Jason Stathan
Categories: Programming Concepts, Angular, CMS & Headless

“TypeScript Tips for Clean Angular Code”

Author: Tommy Shelby
Categories: Angular, TypeScript

“How to Handle Rich Text from Sanity in Angular Without Packages”

Author: Kingsley Amankwah
Categories: TypeScript, Angular, CMS & Headless

“Top 5 CMS Choices for Angular Developers in 2025”

Author: Angelina Jolie
Categories: CMS & Headless

Here's a simplified image of how to add a Category:

Now that we have data in our Sanity Studio, we’re ready to create a service in Angular that pulls this content and renders it in the UI.

Section 4: Creating a Sanity Service in Angular

Now that our Sanity client is configured, let’s create an Angular service to fetch content from Sanity. This service will handle communication with the Sanity API using the GROQ queries we defined earlier.

Step 1: Generate the Sanity Service

From your terminal, generate a new service inside the sanity directory:

ng generate service services/sanity

This will create two files: sanity.service.ts and sanity.service.spec.ts in the src/app/services directory.

Step 2: Set Up the Service to Use the Sanity Client

Open the newly created sanity.service.ts file and update it as follows:

//src/app/services/sanity.service.ts
import { Injectable } from '@angular/core';
import { client } from '../config/sanity-client';
import { getAllPostsQuery, getPostBySlugQuery } from '../queries/posts.groq';
import { Post } from '../models/post.model';

@Injectable({
  providedIn: 'root',
})
export class SanityService {
  async getPost() {
    try {
      return await client.fetch(getAllPostsQuery);
    } catch (error) {
      console.log(error);
      throw error;
    }
  }

  async getPostBySlug(slug: string): Promise<Post | null> {
    try {
      const query = getPostBySlugQuery(slug);
      return await client.fetch(query);
    } catch (error) {
      console.error(`Error fetching post with slug "${slug}":`, error);
      throw error;
    }
  }
}

Section 5: Displaying Content from Sanity

Now that we’ve created our Angular service, let’s proceed to generate components that will display the content fetched from Sanity.

Step 1: Generate the Post Component

From your terminal, generate a new component inside the directory:

ng generate component post

This will create:

src/app/post

Which will contain the component class, its template, and its styles.

Inside src/app/post/post.component.ts, update the component to fetch data from Sanity:

export class PostsComponent implements OnInit {
  private readonly sanityService = inject(SanityService);
  private readonly router = inject(Router);

  protected posts = signal<Post[]>([]);


  ngOnInit() {
    this.loadPosts();
  }

  protected async loadPosts() {
    const fetchPosts = await this.sanityService.getPost();
    this.posts.set(fetchPosts);
      }

  protected navigateToPostBySlug(slug: string) {
    this.router.navigate(['post', slug]);
  }
}

The code above contains:

A method to fetch all posts from Sanity.
A method to navigate to a post's detail page using the slug.

Add the Component Template
Here’s a simple UI template to display the posts using TailwindCSS:

💡 Note: Sanity returns rich text content in a block format. To cleanly display this in the Angular templates (e.g., for the post body),
we can use a custom pipe like blockContentToText.

You can access the pipe implementation in the codebase here.

 <h2 class="text-3xl font-bold mb-6 text-gray-800">Latest Posts</h2>
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    @for (post of posts(); track post._id) {
    <div
      class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
    >
      <img
        [src]="post.mainImage?.asset?.url"
        alt="{{ post.title }}"
        class="h-48 w-full object-cover"
      />

      <div class="p-5">
        <h3 class="text-xl font-semibold text-gray-800 mb-2">
          {{ post.title }}
        </h3>

        <p class="text-gray-600 text-sm mb-3">
          {{ post.body | blockContentToText : 100 }}
        </p>

        <div class="flex flex-wrap gap-2 mt-4">
          @for (category of post.categories; track $index) {
          <span
            class="bg-gray-200 text-gray-800 text-xs px-3 py-1 rounded-full"
          >
            {{ category.title }}
          </span>
          }
        </div>

        <div class="flex items-center gap-2 mt-4">
          <img
            [src]="post.author.image?.asset?.url"
            alt="{{ post.author.name }}"
            class="w-8 h-8 rounded-full object-cover"
          />
          <span class="text-gray-700 text-sm">By {{ post.author.name }}</span>

          <a
            (click)="navigateToPostBySlug(post.slug.current)"
            class="bg-blue-400 text-white text-sm ml-auto px-3 py-1 rounded-full cursor-pointer"
            >Read more...</a
          >
        </div>
      </div>
    </div>
    }
  </div>

With this setup the first error we will encounter is CORS ERROR
Below is an image showing how it will be displayed:

To fix that, go to the Sanity Dashboard and follow the instructions in the image below to fix the CORS ERROR:

After adding the development URL e.g (http://localhost:4200) to the allowed CORS origins, re-run the application. You should now see the content fetched from Sanity.

Here’s what the UI will look like after successful integration:

Note: This UI is styled with TailwindCSS , which helps achieve a clean, responsive layout.

Step 2: Generate the View Post Component

Now, let's proceed to fetch the content using the getPostBySlugQuery.

Run the following in your terminal:

ng generate component view-post

This will create:

src/app/view-post

Which will contain the component class, its template, and its styles.

In src/app/view-post/view-post.component.ts, use the code below to fetch the post by it's slug:

export class ViewPostComponent implements OnInit {
  private readonly sanityService = inject(SanityService);
  private readonly route = inject(ActivatedRoute);

  protected post = signal<Post | null>(null);

  ngOnInit() {
    this.fetchPostDetails();
  }

  protected async fetchPostDetails() {
    const slug = this.route.snapshot.paramMap.get('slug') ?? '';
    const response = await this.sanityService.getPostBySlug(slug);
    this.post.set(response);
  }
}

The code above contains a method to fetch post details by utilizing the activate route to get content slug

Inside the src/app/view-post/view-post.component.html, add this UI to display full post:

<div class="max-w-4xl mx-auto px-4 py-12">
  <img
    [src]="post()?.mainImage?.asset?.url"
    alt="{{ post()?.title }}"
    class="w-full h-96 object-cover rounded-xl shadow-md mb-8"
  />

  <!-- Title -->
  <h1 class="text-4xl font-bold text-gray-900 mb-4">
    {{ post()?.title }}
  </h1>


  <div class="flex items-center justify-between text-sm text-gray-500 mb-6">
    <div class="flex items-center gap-2">
      <img
        [src]="post()?.author?.image?.asset?.url"
        alt="{{ post()?.author?.name }}"
        class="w-8 h-8 rounded-full object-cover"
      />
      <span class="font-medium text-gray-700"
        >By {{ post()?.author?.name }}</span
      >
    </div>
    <span>{{ post()?.publishedAt | date : "longDate" }}</span>
  </div>

    <div class="flex flex-wrap gap-2 mt-4">
    @for (category of post()?.categories; track $index) {
    <span class="bg-gray-200 text-gray-800 text-xs px-3 py-1 rounded-full">
      {{ category.title }}
    </span>
    }
  </div>

  <div class="prose prose-lg max-w-none text-gray-800 leading-relaxed">
    <p class="text-gray-600 text-sm mb-3">
      {{ post()?.body | blockContentToText }}
    </p>
  </div>

  <div class="mt-12 border-t-gray-400 border-t-[0.2px] pt-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-2">About the author</h3>
    <div class="flex items-center gap-4">
      <img
        [src]="post()?.author?.image?.asset?.url"
        alt="{{ post()?.author?.name }}"
        class="w-12 h-12 rounded-full object-cover"
      />
      <div>
        <p class="font-medium">{{ post()?.author?.name }}</p>
        <p class="text-sm text-gray-600">
          {{ post()?.author?.bio | blockContentToText }}
        </p>
      </div>
    </div>
  </div>
</div>

Below is an image of the content fetched using the getPostBySlugQuery:

PS: As stated ealier, the UI has been styled using TailwindCSS hence the reason for the nice design

Tips When Writing Queries

Always start with [_type == "yourType"] (e.g., "post", "author")
Use {} to specify the fields you want back
Use -> to follow references
Use [0] to get the first result, or slice/limit ([0...5])

Conclusion

In this tutorial, we walked through the full process of integrating Sanity CMS with Angular, covering everything from setting up the Sanity Studio to displaying dynamic blog content in an Angular application. Here’s a quick recap of what we achieved:

Set up and configured Sanity CMS
Defined GROQ queries for fetching posts and post details
Created Angular services to interact with Sanity
Displayed content using Angular components
Styled everything beautifully using TailwindCSS
Handled CORS configuration for local development
Built a full blog-like experience with navigation to post detail pages

Whether you're building a blog, portfolio, or a content-driven application, this Sanity + Angular combo gives you the flexibility of a headless CMS with the power of Angular’s frontend ecosystem.

Access the Full Code on GitHub

The entire source code for this project is available on GitHub:

Access the Full Code Here
Don't forget to leave a star if you found it helpful!

Let's Connect!

If you have questions, feedback, or want to see more tutorials like this, feel free to reach out or follow me on my socials:

Twitter/X: @IAmKingsley001
LinkedIn: KingsleyAmankwah
GitHub: KingsleyAmankwah

How to Configure GraphQL in Angular: For Public and Private APIs

Kingsley Amankwah — Fri, 11 Apr 2025 12:27:32 +0000

Introduction

Hey, Angular devs🅰️, as we already know, GraphQL provides precise data fetching and reduces over-fetching. In this tutorial, I’ll walk you through how to configure GraphQL in Angular, covering both authenticated (private APIs) and unauthenticated (public APIs) setups.

Prerequisites

Before we dive in, make sure you’ve got:

An Angular project, using the command ng new my-app
Apollo Angular Setup for GraphQL using the command ng add apollo-angular
Optional: State management using NgRx Signal Store for the private apis approach.

Installation

Let's set up a new angular project using:

ng new ang-grapql-setup

After successful installations, let's proceed to install Apollo Angular using the command:

ng add apollo-angular

This will add the following packages to the app:

apollo-angular - Angular integration
apollo/client - Core GraphQL client
graphql - Query language parser

Now, let's install NgRx Signals using the command:

ng add @ngrx/signals

This will add the package @ngrx/signals to help us manage the state.

Section 1: GraphQL Setup For Public APIs

Let's start with a simple public API connection - the fastest way to get GraphQL working in the Angular app.

Configuration

Create graphql-provider-public-api.config.ts:

// src/app/config/graphql-provider-public-api.config.ts
export const apolloOptionsFactory = () => {
  const graphqlURI = environment.GRAPHQL_URI_NO_TOKEN;
  const httpLink = inject(HttpLink);

  return {
    link: httpLink.create({ uri: graphqlURI }),
    cache: new InMemoryCache(),
    defaultOptions: {
      watchQuery: {
        fetchPolicy: 'cache-first',
        errorPolicy: 'all',
      },
      query: {
        fetchPolicy: 'cache-first',
        errorPolicy: 'all',
      },
    },
  };
};

export const graphqlProviderConfig: ApplicationConfig['providers'] =
  [
    Apollo,
    {
      provide: APOLLO_OPTIONS,
      useFactory: apolloOptionsFactory,
    },
  ];

In the above code, the apolloOptionsFactory function pulls in the GraphQL server URI from your environment config and uses Angular’s inject to grab the HttpLink service, creating a direct connection to the endpoint.

We set up an InMemoryCache to store query results, reducing unnecessary network calls and apply default options like cache-first to prioritize cached data while fetching fresh results when needed.

The errorPolicy: "all" ensures we get both data and errors, giving us the flexibility in handling responses.

Finally, the graphqlProviderConfig ties it all together, providing Apollo Client to the app.

App Configuration

Update app.config.ts with the graphqlProviderConfig

// src/app/app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    graphqlProviderConfig,
  ],
};

Setup Public API Query

Let’s set up a query from a public GraphQL API to fetch country details.

// src/app/graphql/queries.ts
export const FETCH_COUNTRIES = gql`
  query {
    countries {
      name
      capital
      currency
    }
  }
`;

Now, let's set up a countries component to fetch and display the data:

// src/app/countries/countries.component.ts
@Component({
  selector: 'app-countries',
  imports: [CommonModule],
  templateUrl: './countries.component.html',
})
export class CountriesComponent {
  protected data: Countries[] = [];

  constructor(private readonly apollo: Apollo) {
    this.apollo
      .query<CountriesResponse>({ query: FETCH_COUNTRIES })
      .subscribe((result) => (this.data = result.data.countries));
  }
}

Displaying the Data

Now the countries template, we set up to display the countries' data we need:

// src/app/countries/countries.component.html
@if (data; as countries) {
<div class="grid">
  @for (country of countries; track country.name) {
  <div class="card">
    <h3>{{ country.name }}</h3>
    <p>Currency: {{ country.currency }}</p>
    <p>Capital: {{ country.capital || "N/A" }}</p>
  </div>
  }
</div>
}

Expected Output:

Here's how the output looks when everything is working correctly from the countries' public API based on the query setup:

The view shows countries their capital and currency

Section 2: GraphQL Setup For Private API's With Authentication

For us to access a private API, we will need an access token, and so for that, let's update or create a new config file graphql-provider-private-api.config.ts with these improvements:

// src/app/config/graphql-provider-private-api.config.ts
export const apolloOptionsFactory = () => {
  const graphqlURI = environment.GRAPHQL_URI_WITH_TOKEN;
  const httpLink = inject(HttpLink);
  const userStore = inject(UserStore);

  const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      graphQLErrors.forEach(({ message }) => {
        console.error(`[GraphQL error]: ${message}`);
        if (message.includes('Bad credentials')) {
          userStore.logout();
        }
      });
    }
    if (networkError) {
      console.error(`[Network error]: ${networkError.message}`);
    }
  });

  const authMiddleware = new ApolloLink((operation, forward) => {
    const token = userStore.authData().app_token;

    if (!token) {
      console.warn('No token available');
      return forward(operation);
    }

    operation.setContext({
      headers: new HttpHeaders().set('Authorization', `Bearer ${token}`),
    });

    return forward(operation);
  });

  const httpLinkHandler = httpLink.create({ uri: graphqlURI });
  const link = ApolloLink.from([errorLink, authMiddleware, httpLinkHandler]);

  return {
    link,
    cache: new InMemoryCache(),
    defaultOptions: {
      watchQuery: {
        fetchPolicy: 'network-only',
        errorPolicy: 'all',
      },
      query: {
        fetchPolicy: 'network-only',
        errorPolicy: 'all',
      },
    },
  };
};

export const graphqlProviderConfig: ApplicationConfig['providers'] = [
  Apollo,
  {
    provide: APOLLO_OPTIONS,
    useFactory: apolloOptionsFactory,
  },
];

In this configuration, the apolloOptionsFactory constructs a secure GraphQL client through three layered operations.

First, the errorLink handles authentication failures by automatically logging out users when it detects invalid credentials and logs all GraphQL/network errors.

Second, the authMiddleware intercepts each request to inject the bearer token from UserStore into authorization headers, gracefully bypassing when no token exists.

Finally, the httpLinkHandler establishes the connection to the GraphQL endpoint. These links chain together through ApolloLink.from(), creating a pipeline that wraps every request with authentication and error handling while maintaining consistent cache-first query policies across the application.

Update App Configuration

The application configuration in app.config.ts follows the same pattern as the public api setup but now imports the authentication-ready provider from the new configuration file src/app/config/graphql-provider-private-api.config.ts:

// src/app/app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    graphqlProviderConfig,
  ],
};

State Management for Private APIs

While the focus is on GraphQL configuration, we need a robust way to manage the authentication state for private APIs, so for that we're going to leverage the Signal Store for this implementation.

Here's how we'll handle the state management:

// src/app/store/user.store.ts
const initialState = {
  authData: { app_token: '' },
  isAuthenticated: false
};

export const UserStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withMethods((store) => ({
    setToken(token: string) {
      patchState(store, {
        authData: { app_token: token },
        isAuthenticated: !!token
      });
      localStorage.setItem('github_token', token);
    },
    initialize() {
      const token = localStorage.getItem('github_token');
      if (token) {
        this.setToken(token);
      }
    },
    logout() {
      patchState(store, initialState);
      localStorage.removeItem('github_token');
    }
  }))
);

Authentication Flow: Login Component

Before we can make authenticated queries, we need a way to collect and store the private api token.

Here's a minimal login component that bridges our state management and GraphQL setup:

// src/app/login/login.component.ts
@Component({
  selector: 'app-login',
  imports: [FormsModule],
  templateUrl: './login.component.html',
})
export class LoginComponent {
  protected token = '';
  private readonly userStore = inject(UserStore);
  private readonly router = inject(Router);

  login() {
    if (this.token) {
      this.userStore.setToken(this.token);
      this.router.navigate(['/profile']);
    }
  }
}

// src/app/login/login.component.html
<div>
  <h2>Login with GitHub Token</h2>
  <input [(ngModel)]="token" type="password" placeholder="GitHub Token" />
  <button (click)="login()">Login</button>
</div>

Making Authenticated GraphQL Queries

Now that we have our authentication flow done, let's set up a query from a private GitHub's GraphQL API to get a user's GitHub profile details.

// src/app/graphql/queries.ts
export const FETCH_USER = gql`
  query {
    viewer {
      login
      name
      email
      bio
      avatarUrl
      company
      location
      websiteUrl
      repositories(first: 5, orderBy: { field: UPDATED_AT, direction: DESC }) {
        nodes {
          name
          description
          url
          createdAt
          updatedAt
          isPrivate
        }
      }
    }
  }
`;

Implementing the Authenticated Component

With our GraphQL query ready, let's examine the component that brings everything together. This AuthenticatedComponent demonstrates:

Token verification before making requests
Proper loading and error states
Type-safe data handling
Automatic logout on authentication failures

// src/app/authenticated/authenticated.component.ts
@Component({
  selector: 'app-authenticated',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './authenticated.component.html'
})
export class AuthenticatedComponent {
  private readonly apollo = inject(Apollo);
  private readonly userStore = inject(UserStore);
  private readonly router = inject(Router);

  userData: GitHubUser | null = null;
  error: string | null = null;
  loading = false;

  ngOnInit() {
    this.userStore.initialize();
    this.fetchUserData();
  }

  protected fetchUserData() {
    if (!this.userStore.isAuthenticated()) {
      this.router.navigate(['/login']); 
      return;
    }

    this.loading = true;
    this.error = null;

    this.apollo.query<GitHubUserResponse>({
      query: FETCH_USER,
    }).subscribe({
      next: ({ data }) => {
        this.userData = data.viewer;
        this.loading = false;
      },
      error: (err) => {
        this.error = err.message;
        this.loading = false;
        this.userStore.logout(); 
      }
    });
  }
}

Displaying the Data

The template uses Angular's new @if syntax for conditional rendering:

// src/app/authenticated/authenticated.component.html
@if (loading) {
<p>Loading GitHub profile...</p>

} @if (error) {
<p class="error">Sorry something went wrong</p>
} @if (userData) {

<div class="profile-header">
  <img [src]="userData.avatarUrl" width="100px" alt="Avatar" class="avatar" />
  <h2>{{ userData.name }}</h2>
  <p>{{ userData.login }}</p>
  <p>{{ userData.bio }}</p>
  <p *ngIf="userData.company">Works at {{ userData.company }}</p>
  <p *ngIf="userData.location">📍 {{ userData.location }}</p>
  <p *ngIf="userData.websiteUrl">
    <a [href]="userData.websiteUrl" target="_blank">{{
      userData.websiteUrl
    }}</a>
  </p>
</div>

<h3>Recent Repositories</h3>
<div class="repositories">
  <div class="repo-card">
    @for (repo of userData.repositories.nodes; track repo.name) {
    <h4>
      <a [href]="repo.url" target="_blank">{{ repo.name }}</a>
      @if (repo.isPrivate) {
      <span class="private-badge">Private</span>
      }
    </h4>

    @if (repo.description) {
    <p>{{ repo.description }}</p>
    }
    <div class="repo-meta">
      <span>Updated {{ repo.updatedAt | date }}</span>
    </div>
    }
  </div>
</div>
}

After implementing these components, our Angular application now successfully:

Authenticates with GitHub's GraphQL API
Fetches protected user data
Displays user profile with repository information

Here's how the final output looks when everything is working correctly:

The authenticated view showing user profile and recent repositories

Key Takeaways:

Feature	No Auth Setup	With Auth Setup
Configuration	Simple `HttpLink`	Auth middleware + error handling
State Management	None	`signal store` with token persistence
Error Handling	Basic console logging	Automatic token cleanup + user feedback
Data Freshness	`cache-first`	`network-only` for sensitive data
Security	Public API only	Token in headers + localStorage
Persistence	No token storage	Automatic token rehydration on app start
UI Integration	Simple data display	Loading states + error messages

Conclusion

In this tutorial, we learned how to setup and make use of GraphQL public apis and private apis(requires authentication) in an angular application.

By understanding this setup, the same patterns can be adapted to work with any GraphQL API in Angular.

Explore the complete project:

🔗 GitHub Repository

Connect with me:

💼 LinkedIn

🐦 X (Twitter)

Happy coding! 🚀

A Comprehensive Guide to React Hooks: Simplifying State and Side Effects

Kingsley Amankwah — Wed, 14 Jun 2023 04:30:56 +0000

Introduction to React Hooks:

React Hooks have revolutionized the way we write React components by providing a simpler and more elegant approach to managing state and handling side effects. In this article, we will explore the core hooks in React and dive into custom hooks, advanced hook patterns, and best practices. Let's get started!

Benefits of using Hooks over class components

Before the introduction of React Hooks, managing state and side effects in functional components was challenging. Class components required complex lifecycle methods and often led to verbose and convoluted code. React Hooks solve these problems by offering a more intuitive and functional approach. With Hooks, we can write cleaner, more readable code and enjoy benefits such as improved reusability, code organization, and performance optimizations.

Understanding the Core Hooks:

1. useState Hook:

The useState hook allows us to introduce stateful logic into functional components. It takes an initial state value as an argument and returns an array with the current state value and a function to update the state. Let's see an example of creating a counter component using useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In the above code, we initialize the count state to 0 using useState. The count value is displayed, and the setCount function is used to update the count when the button is clicked.

2. useEffect Hook

The useEffect hook enables us to perform side effects in functional components, such as fetching data from an API, subscribing to events, or manipulating the DOM. It accepts a callback function and an optional dependency array to control when the effect runs. Let's see an example of fetching data from an API using useEffect:

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

In this code, we use useEffect to fetch data from an API when the component mounts. The fetched data is stored in the state using the setData function, and it is rendered in the component.

3. useContext Hook

The useContext hook provides a way to access shared state or data without prop drilling . It allows us to create a context and consume it in any component within the context provider. Let's see an example of creating a theme-switching component using useContext:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemeSwitcher() {
  const theme = useContext(ThemeContext);

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => console.log('Switch theme')}>Switch Theme</button>
    </div>
  );
}

In the code above, we create a ThemeContext using React.createContext and provide a default value of 'light'. The useContext hook is used in the ThemeSwitcher component to access the current theme value. When the button is clicked, it triggers a theme switch action.

Custom Hooks: Reusability and Abstraction:

Custom hooks are a powerful concept in React that allows us to extract and share stateful and reusable logic across multiple components. They provide a way to abstract complex logic into reusable functions. By creating custom hooks, we can enhance code reusability and make our components more modular and maintainable.

Building a form validation hook:

Let's build a custom hook for a form validation. The hook will handle the validation logic and return the validation state and functions to update the form values and trigger validation.

useFormValidation Custom Hook

import React, { useState } from 'react';

function useFormValidation(initialState, validate) {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setSubmitting] = useState(false);

  const handleChange = event => {
    setValues({
      ...values,
      [event.target.name]: event.target.value
    });
  };

  const handleSubmit = event => {
    event.preventDefault();
    setErrors(validate(values));
    setSubmitting(true);
  };

  return { values, errors, isSubmitting, handleChange, handleSubmit };
}

Explanation:
The useFormValidation custom hook handles the state and logic for form validation. It takes in initialState, which is an object representing the initial form values, and validate, which is a function for validating the form values. It returns an object with values, errors, isSubmitting, handleChange, and handleSubmit.

values: represents the current form values.
errors: holds any validation errors for the form.
isSubmitting: indicates whether the form is being submitted.
handleChange: is a function that updates the form values as the user types.
handleSubmit: is a function that handles the form submission, triggers validation, and sets the errors and submitting state.

LoginForm Component


function validateLoginForm(values) {
  let errors = {};

    if (!values.email) {
    errors.email = 'Email is required';
  }

    if (!values.password) {
    errors.password = 'Password is required';
  } else if (values.password.length < 6) {
    errors.password = 'Password must be at least 6 characters long';
  }

  return errors;
}

function LoginForm() {
  const { values, errors, isSubmitting, handleChange, handleSubmit } = useFormValidation(
    { email: '', password: '' },
    validateLoginForm
  );

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          type="password"
          id="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && <span>{errors.password}</span>}
      </div>
      <button type="submit" disabled={isSubmitting}>
        Submit
      </button>
    </form>
  );
}

export default LoginForm;

Explanation:
The LoginForm component utilizes the useFormValidation custom hook to handle the form's state and validation. It also includes an example validation function, validateLoginForm, which validates the email and password fields.

Inside the component, we destructure the values, errors, isSubmitting, handleChange, and handleSubmit from the useFormValidation hook. These values and functions are then used within the JSX to render the form.

Advanced Hook Patterns:

1. useReducer Hook

The useReducer hook is an alternative to useState when managing more complex state that involves multiple actions. It follows the Redux pattern of managing state with reducers and actions. Let's see an example of implementing a todo list using useReducer:

import React, { useReducer } from 'react';

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE_TODO':
      return state.map(todo => (todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo));
    case 'REMOVE_TODO':
      return state.filter(todo => todo.id !== action.payload);
    default:
      return state;
  }
}

function TodoList() {
  const [todos, dispatch] = useReducer(todoReducer, []);

  const handleAddTodo = () => {
    const todoText = // Get todo text from input field
    dispatch({ type: 'ADD_TODO', payload: todoText });
  };

  return (
    <div>
      <input type="text" placeholder="Enter todo" />
      <button onClick={handleAddTodo}>Add Todo</button>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span>{todo.text}</span>
            <button onClick={() => dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}>
              {todo.completed ? 'Mark Incomplete' : 'Mark Complete'}
            </button>
            <button onClick={() => dispatch({ type: 'REMOVE_TODO', payload: todo.id })}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

In this example, we have a todoReducer function that takes in the current state and an action, and based on the action type, it performs the necessary updates to the state. The reducer function handles three types of actions: adding a new todo, toggling the completion status of a todo, and removing a todo.

The TodoList component utilizes the useReducer hook by calling it with the todoReducer function and an initial state of an empty array []. The hook returns the current state (todos) and a dispatch function that we use to send actions to the reducer.

The handleAddTodo function is called when the "Add Todo" button is clicked. It retrieves the todo text from an input field (which is not included in this code snippet) and dispatches an action of type 'ADD_TODO' with the payload as the todo text. The reducer function then adds a new todo object to the state array, including an auto-generated ID, the todo text, and a default completion status of false.

The TodoList component renders an input field and a button for adding new todos. Below that, it renders a list of todos using the todos.map function. Each todo is rendered as an <li> element with its text displayed. Additionally, there are two buttons for each todo: one for toggling the completion status and another for removing the todo. When these buttons are clicked, corresponding actions are dispatched to the reducer to update the state accordingly.

2. useRef Hook

Accessing and persisting values across renders:
The useRef hook provides a way to persist values across renders without triggering a re-render. It can also be used to access DOM elements directly. Let's see an example of implementing an input field with useRef:

import React, { useRef } from 'react';

function InputWithFocus() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

In this code, the inputRef is created using useRef and assigned to the input element's ref attribute. When the button is clicked, the handleClick function is triggered, which focuses the input element using the ref's current property.

Conclusion

React Hooks have transformed the way we write React components, offering a more streamlined and functional approach to managing state and handling side effects. By leveraging core hooks like useState, useEffect, and useContext, we can simplify our code and enhance reusability. Additionally, custom hooks and advanced hook patterns like useReducer and useRef provide powerful tools for building complex and optimized components.

As you embark on your React journey, I encourage you to explore and experiment with React Hooks in your projects. Their flexibility, simplicity, and performance benefits will undoubtedly elevate your development experience. Happy coding!

React Props In Action: Building Flexible and Reusable Components...

Kingsley Amankwah — Mon, 15 May 2023 08:19:48 +0000

React props play a crucial role in building reusable and flexible components. They allow you to pass data from a parent component to its child components, making it easier to configure and customize them according to specific requirements. In this article, we'll dive into the world of React props, exploring how to pass and use props effectively.

Introduction to React Props

At its core, React is a component-based library that encourages the composition of reusable UI elements. Props, short for "properties," enable you to pass data and functions between components. By using props, you can create dynamic and interactive components that can be easily reused in different parts of your application.

It's important to note that props are read-only, meaning they cannot be modified within the child component. This immutability ensures data consistency and helps maintain a unidirectional data flow in React.

Passing Props

Passing props from a parent component to a child component is straightforward. In JSX, you can provide props as attributes when rendering a component. Let's consider a simple example where we pass a prop called name to a child component called Greeting:

// ParentComponent.js
import React from 'react';
import Greeting from './Greeting';

const ParentComponent = () => {
  const name = 'Alice';

  return <Greeting name={name} />;
};

export default ParentComponent;

In the ParentComponent, we define the name variable and pass it as the name prop to the Greeting component. The child component can now access this prop and utilize its value.

Accessing Props

To access props within a child component, you can use the props object in functional components or this.props in class components. Let's update the Greeting component to display the received prop:

// Greeting.js
import React from 'react';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

export default Greeting;

In the Greeting component, we access the name prop using props.name and display it within an <h1> element. The output will be "Hello, Alice!" based on the prop value passed from the parent component.

Default Props

Sometimes, you may want to set default values for props in case they are not explicitly provided by the parent component. This ensures that your component can gracefully handle missing or undefined props. To define default props, you can utilize the defaultProps property in functional or class components. Consider the following example:

// Greeting.js
import React from 'react';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

Greeting.defaultProps = {
  name: 'Stranger',
};

export default Greeting;

Here, we've defined a default prop name with the value "Stranger" for the Greeting component. If the parent component doesn't provide the name prop, the Greeting component will display "Hello, Stranger!" by default.

Prop Types

While React itself doesn't enforce strict prop types, it's good practice to specify the expected types of props for validation and documentation purposes. The prop-types library provides an easy way to define prop types. Let's enhance our Greeting component with prop types:

// Greeting.js
import React from 'react';
import PropTypes from 'prop-types';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

export default Greeting;

In this updated code, we import PropTypes from the prop-types library. By setting Greeting.propTypes, we specify that the name prop should be a required string. If the parent component fails to provide the name prop or if it's not a string, React will issue a warning in the browser console.

Using prop types helps catch bugs early on and provides documentation for other developers who use or maintain your components.

Prop Drilling and Context API

As your React application grows, you might encounter a situation called prop drilling. Prop drilling occurs when you need to pass props through multiple levels of components, even if some intermediate components don't actually use those props. This can lead to verbose and less maintainable code.

To avoid prop drilling, you can use the Context API, which provides a way to create a centralized data store accessible to all components within a specified context. By utilizing the Context API, you can access and update the data without passing props explicitly.

While discussing the Context API in detail is beyond the scope of this article, it's worth mentioning that it's particularly useful for global state management in larger applications.

Best Practices and Considerations

When working with React props, it's essential to follow some best practices for better code organization and maintainability:

Keep props minimal and focused: Pass only the necessary props to components, keeping them focused on their specific responsibilities.
Avoid unnecessary nesting: Try to avoid excessive levels of component nesting, as it can lead to prop drilling and make the code harder to maintain.
Use default props: Set default values for props using defaultProps to ensure your component behaves gracefully when certain props are not provided.
Define prop types: Specify prop types using PropTypes to validate the expected types of props and catch potential errors early on.
Proper prop naming: Choose meaningful names for your props that accurately describe their purpose and make your code more readable.

By following these practices, you can write more maintainable, reusable, and understandable React components.

Conclusion

React props are a powerful tool for passing and using data between components. They enable you to build flexible and reusable UI components that can be easily configured and customized according to different requirements. By understanding how to pass and access props, set default values, define prop types, and consider best practices, you can leverage the full potential of React props in your applications.

Remember to keep your components focused, use default props and prop types for better code maintainability, and consider leveraging the Context API to avoid prop drilling. With these skills and practices in your toolkit, you'll be well-equipped to create robust and efficient React applications.

Happy coding with React props!

MLOps: Best Practices for Deploying Machine Learning Models

Kingsley Amankwah — Sat, 22 Apr 2023 16:08:43 +0000

Overview

Machine learning models have been widely adopted in various industries to automate processes and improve decision-making. However, deploying machine learning models can be a challenging task, especially when it comes to integrating them into existing software systems. This is where MLOps comes in.

MLOps is a set of best practices that aims to streamline the deployment and management of machine learning models throughout their lifecycle. It combines the best practices of software development and data science to ensure that machine learning models are deployed and managed efficiently and effectively.

In this blog post, we will discuss some of the best practices for deploying machine learning models.

Continuous Integration and Continuous Deployment (CI/CD)

Continuous Integration and Continuous Deployment (CI/CD) is a set of practices that automate the process of building, testing, and deploying software changes. CI/CD is widely used in software development, and it can also be applied to machine learning model deployment. The goal of CI/CD is to ensure that changes to the machine learning model are thoroughly tested and integrated into the production environment as quickly and safely as possible.

This can be achieved by using tools such as Git for version control, Jenkins for continuous integration, and Kubernetes for container orchestration. By automating the process of building, testing, and deploying machine learning models, CI/CD reduces the risk of errors and ensures that the models are deployed efficiently and effectively.

Monitoring and Logging

Monitoring and logging are critical components of MLOps. Monitoring allows you to track the performance of the machine learning model in production and detect any issues that may arise. Logging, on the other hand, allows you to record important events and data about the machine learning model, such as input/output data, errors, and performance metrics.

By monitoring and logging the machine learning model, you can quickly identify and resolve any issues that may arise in production. This can be achieved by using tools such as Prometheus for monitoring and ELK stack for logging. By monitoring and logging machine learning models, you can ensure that they are performing optimally and that any issues are detected and resolved quickly.

Model Versioning

Model versioning is another important aspect of MLOps. Machine learning models are constantly evolving, and it's crucial to keep track of the changes made to the model over time. Model versioning allows you to keep a record of all the changes made to the machine learning model and the data used to train the model.

This can be achieved by using tools such as GitHub for version control and DVC for data versioning. By keeping track of the changes made to machine learning models, you can ensure that they are reproducible and that any changes made to the model can be tracked and reverted if necessary.

Conclusion

Deploying machine learning models can be challenging, but MLOps provides a set of best practices to streamline the deployment and management of machine learning models throughout their lifecycle. In this blog post, we discussed some of the best practices for deploying machine learning models, including continuous integration and continuous deployment, monitoring and logging, and model versioning.

By following these best practices, you can ensure that your machine learning models are deployed and managed efficiently and effectively, reducing the risk of errors and ensuring that they are performing optimally in production. If you want to improve your machine learning models and get the most out of them, adopting MLOps is the way to go.

Building a Real-Time Chat App with Node.js and Socket.io

Kingsley Amankwah — Thu, 13 Apr 2023 08:43:18 +0000

Overview

Chat applications are one of the most popular ways to communicate. If you are interested in building a chat application, you are in the right place. In this tutorial, we will build a real-time chat app using Node.js and Socket.io. We will explain the basic concepts of Node.js and Socket.io and guide you through the process of building this application from scratch.

Node.js

Node.js is an open-source, cross-platform, server-side JavaScript runtime environment built on Chrome's V8 JavaScript engine. It allows developers to run JavaScript on the server side, which means that you can use the same language for both the client-side and server-side of your application. Node.js is lightweight and fast, making it an ideal choice for building real-time applications.

Socket.io

Socket.io is a JavaScript library that enables real-time, bidirectional, and event-based communication between the client and the server. It is built on top of the WebSockets API and provides a simple and easy-to-use interface for building real-time applications. Socket.io supports multiple transport protocols, including WebSocket, HTTP long-polling, and HTTP streaming, which makes it a reliable and robust solution for real-time communication.

Step-by-Step Guide

Step 1: Set up the Node.js environment on your machine.

First, you need to install Node.js on your machine. You can download the latest version of Node.js from the official website. Once you have downloaded and installed Node.js, you can verify the installation by running the following command in your terminal:

node -v

This command should return the version number of Node.js that you have installed.

Step 2: Create a new Node.js project and initialize a package.json file using npm.

Now let's create a new Node.js project and initialize a package.json file using npm. A package.json file is a file that contains metadata about your project, such as the name, version, description, dependencies, and scripts.

To create a new Node.js project, run the following command in your terminal:

mkdir chat-app
cd chat-app
npm init -y

The mkdir command creates a new directory called chat-app, and the cd command changes your current working directory to the chat-app directory. The npm init command initializes a new package.json file with default values. The -y flag skips the interactive prompts and uses default values for all fields.

Step 3: Install the Socket.io library using npm.

Next, you need to install the Socket.io library using npm (Node Package Manager). npm is a package manager for Node.js that allows you to install and manage third-party packages and libraries.

To install the Socket.io library, run the following command in your terminal:

npm install socket.io

Step 4: Create an index.js file and set up the server using the Express framework.

Create an index.js file and set up the server using the Express framework. Express is a popular Node.js web framework that provides a simple and easy-to-use interface for building web applications.

To install express framework run the following code:

npm install express

Now, open the index.js file in your favourite text editor and add the following code:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h1>Hello world</h1>');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

This code:

Express initializes app to be a function handler that you can supply to an HTTP server (as seen in line 4).
We define a route handler / that gets called when we hit our website home.
We make the http server listen on port 3000.

Step 5: Create a client-side HTML file, which will contain the chat interface.

Next, you need to create a client-side HTML file, which will contain the chat interface.

In Unix and Unix-like operating systems (such as Linux and macOS), run the following command in your terminal:

touch index.html

In Windows, you can create a new index.htmlfile in your terminal by running the following code:

New-Item -ItemType File index.html

This command creates a new index.html file in your current working directory. Next, open the index.html file in your favourite text editor and add the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Real-Time Chat App</title>
  </head>
  <body>
    <h1>Real-Time Chat App</h1>
    <ul id="messages"></ul>
    <form id="message-form">
      <input type="text" name="message" placeholder="Type your message here...">
      <button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
  </body>
</html>

This code creates a simple HTML page with a heading, a list of messages, a text input field, and a send button. It also includes the Socket.io client library.

Step 6: Write the client-side JavaScript code to connect to the server using Socket.io to send and receive messages.

Next, you need to write the client-side JavaScript code to connect to the server using Socket.io. To do this, you need make a <script> </script> in the html file and add the following code:

const socket = io();

const messageForm = document.getElementById('message-form');
const messageInput = document.querySelector('input[name="message"]');
const messageList = document.getElementById('messages');

messageForm.addEventListener('submit', (e) => {
  e.preventDefault();

  const message = messageInput.value;

  if (message.trim() === '') {
    return;
  }

  socket.emit('message', message);

  messageInput.value = '';
  messageInput.focus();
});

socket.on('message', (message) => {
  const li = document.createElement('li');
  li.textContent = message;
  messageList.appendChild(li);
});

This code creates a new Socket.io instance, selects the message form, input field, and message list from the HTML page, and adds event listeners for form submission and incoming messages. When the user submits a message, the code retrieves the message from the input field, emits a message event to the server with the message as the payload, clears the input field, and focuses on the input field. When the client receives a message event from the server, the code creates a new list item element, sets its text content to the message, and appends it to the message list.

Step 7: Write the server-side JavaScript code to handle connections, disconnections, and incoming messages.

Finally, you need to write the server-side JavaScript code to handle connections, disconnections, and incoming messages. To do this, you need to add the following code to the index.jsfile:

const io = require('socket.io')(http);

io.on('connection', (socket) => {
  console.log('User is online.');

  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);
    io.emit('message', message);
  });

  socket.on('disconnect', () => {
    console.log('User is offline.');
  });
});

This code creates a new Socket.io instance with the http server, listens for incoming connections, and adds event listeners for incoming messages and disconnections. When a new user connects, the code logs a message to the console. When the server receives a message event from a client, the code logs the message to the console and emits a message event to all connected clients with the message as the payload. When a user disconnects, the code logs a message to the console.

Start the app by running node index.js in the terminal

Picture of index.html code

Picture of index.jscode

Full Project On GitHub

Conclusion

Finally, In this tutorial we have learnt how to build a real-time chat application using Node.js and Socket.io. We have explained the basic concepts of Node.js and Socket.io and provided a step-by-step guide for building a chat application from scratch. With this knowledge, you can now create your own real-time applications and take your development skills to the next level. Happy coding!

Building a RESTful API with Node.js and Express

Kingsley Amankwah — Sat, 08 Apr 2023 07:42:43 +0000

Overview

Building an API is an essential part of developing modern applications. APIs are a way for different applications to communicate with each other, and RESTful APIs are a popular approach to building APIs that are flexible, scalable, and easy to maintain. Node.js and Express.js are two of the most popular technologies used for building RESTful APIs due to their speed, flexibility, and ease of use.

Setting Up Node.js and Express.js

Before getting started, make sure Node.js and npm are installed on your machine. You can download these from the official Node.js website (https://nodejs.org). Then, create a new directory for your project and run npm init to create a new package.json file. This file will contain information about your project and its dependencies.

Next, install Express.js by running npm install express in your project directory. This will install the latest version of Express.js and its dependencies. After this, create a new file called index.js and add the following code:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}.`);
});

This code sets up a basic Express.js server that listens on port 3000 and responds with "Hello World!" when a GET request is made to the root endpoint. You can test this by running the node index.js command in your terminal and opening http://localhost:3000in your browser.

Defining Routes and Handling Requests

To define additional routes and handle requests, add the following code to index.js:

app.get('/api/users', (req, res) => {
  // Return a list of users
});

app.post('/api/users', (req, res) => {
  // Create a new user
});

app.put('/api/users/:id', (req, res) => {
  // Update a user by ID
});

app.delete('/api/users/:id', (req, res) => {
  // Delete a user by ID
});

These routes handle GET, POST, PUT, and DELETE requests to the /api/users endpoint. The :id parameter in the PUT and DELETE routes allows for updating and deleting specific users by ID. You can add more routes to your API as needed, and use middleware to handle authentication, logging, and other tasks.

Connecting to a Database

To store and retrieve data for your API, you'll need to connect to a database. MongoDB is a popular choice for Node.js applications, and Mongoose is a popular library for working with MongoDB. To connect to a MongoDB database using Mongoose, add the following code to index.js:

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/myapp');

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
  password: String
});

const User = mongoose.model('User', userSchema);

This code connects to a local MongoDB database called "myapp" and defines a user schema and model using Mongoose. You can use the User model to create, read, update, and delete users from your database.

Conclusion

Node.js and Express.js provide a powerful and flexible platform for building RESTful APIs. With the ability to define routes, handle requests, and connect to a database, building a scalable and maintainable API is easier than ever. However, building a robust API requires careful planning, testing, and documentation. You should consider factors such as security, performance, and usability when designing your API, and follow best practices such as versioning, error handling, and caching. So, what are you waiting for? Start building your own RESTful API with Node.js and Express.js today!

SQL Server Performance Tuning

Kingsley Amankwah — Mon, 27 Mar 2023 17:37:24 +0000

Introduction

SQL Server is a widely used database management system that helps organizations store and retrieve data. However, as the amount of data grows, the performance of the system may start to degrade. This is where performance tuning comes in. In this blog post, we will discuss SQL Server performance tuning and how it can help organizations achieve faster and more efficient data management.

Importance of SQL Server Performance Tuning

SQL Server performance tuning is crucial for organizations to ensure that their database systems are running optimally. Poorly performing systems can lead to slow response times, data loss, and even system crashes. By tuning the performance of SQL Server, organizations can improve system response times, reduce downtime, and improve overall system efficiency.

Techniques for SQL Server Performance Tuning

There are several techniques that organizations can use to tune the performance of their SQL Server systems. These include:

Index Optimization

Indexes are used to speed up data retrieval from SQL Server. However, poorly designed indexes can slow down the system. By optimizing the indexes, organizations can improve the performance of their SQL Server systems. This involves analyzing the existing indexes, identifying redundant or unused indexes, and creating new indexes as needed.

Query Optimization

Queries are used to retrieve data from SQL Server. However, poorly written queries can lead to slow response times and degraded system performance. By optimizing the queries, organizations can improve the performance of their SQL Server systems. This involves analyzing the existing queries, identifying poorly performing queries, and rewriting or optimizing them as needed.

Server Configuration Optimization

SQL Server configuration can also impact system performance. By optimizing the server configuration, organizations can improve the performance of their SQL Server systems. This involves analyzing the existing configuration, identifying configuration issues, and making changes as needed.

Memory Management

SQL Server performance can be improved by managing the amount of memory used by the system. By allocating memory to the most frequently used data and processes, organizations can improve the overall performance of their SQL Server systems.

CPU Optimization

Optimizing CPU usage can improve the overall performance of SQL Server systems. This involves identifying processes that use the most CPU resources and optimizing them to reduce CPU usage. Additionally, using multiple CPUs can improve the performance of SQL Server systems by allowing for parallel processing of data and queries.

Disk Optimization

Disk optimization is another important aspect of SQL Server performance tuning. By optimizing disk usage, organizations can improve the performance of their SQL Server systems. This involves analyzing the existing disk configuration, identifying disk bottlenecks, and making changes as needed.

Conclusion

SQL Server performance tuning is essential for organizations to ensure that their database systems are running optimally. By optimizing the indexes, queries, server configuration, memory management, CPU usage, and disk usage, organizations can improve system response times, reduce downtime, and improve overall system efficiency. It is important to regularly monitor and tune the performance of SQL Server systems to achieve the best results.

MERN Stack Project Structure: Best Practices

Kingsley Amankwah — Mon, 27 Mar 2023 10:34:23 +0000

Overview

MERN stack is a popular web development technology stack that includes MongoDB, Express.js, React.js, and Node.js. It is a very powerful stack that allows developers to build scalable and robust web applications. In this tutorial, we'll discuss the MERN stack project structure and how it can help you build better web applications.

MERN Stack Project Structure

The MERN stack project structure is organized in a way that separates the backend and frontend code. It follows the MVC (Model-View-Controller) architecture pattern. This pattern allows developers to separate the concerns of the application into three main components.

Model

The Model component is responsible for managing the data and the business logic of the application. In the MERN stack, MongoDB is used as the database, which stores the data used in the application. The model's directory contains the database schema and the functions that interact with the database.

View

The View component is responsible for displaying the data to the users. In the MERN stack, React.js is used as the frontend framework. The components directory contains the React components that are responsible for rendering the user interface.

Controller

The Controller component is responsible for handling the user input and updating the Model and View components accordingly. In the MERN stack, the backend code is built using Node.js and Express.js. The controller's directory contains the functions that handle the HTTP requests and responses.

Server Directory

The server directory contains the backend code of the web application. The backend code is built using Node.js and Express.js. The server directory contains the following directories and files:

config directory: This directory contains the configuration files of the backend application.
controllers directory: This directory contains the controllers of the application.
models directory: This directory contains the models of the application.
routes directory: This directory contains the routes of the application.
server.js file: This file is the entry point of the backend application.

Client Directory

The client directory contains the front-end code of the web application. The frontend code is built using React.js. The client directory contains the following directories and files:

public directory: This directory contains the HTML file that is displayed in the browser.
src directory: This directory contains the source code of the frontend application. The src directory contains the following directories and files:
- components directory: This directory contains the React components of the application.
- App.js file: This file is the main file of the frontend application that renders the components.
- index.js file: This file is the entry point of the front-end application.

Conclusion

In conclusion, the MERN stack project structure is organized in a way that separates the backend and frontend code. It also follows the MVC architecture pattern. The client directory contains the frontend code, and the server directory contains the backend code. The MERN stack project structure helps in building scalable and robust web applications. By separating the concerns of the application, the codebase becomes more manageable and easier to maintain. If you're looking to build a web application using the MERN stack, it's highly recommended that you follow this project structure.

A Beginner's Guide to Coding Patterns

Kingsley Amankwah — Sat, 25 Mar 2023 17:29:46 +0000

1. Overview

Coding patterns are an essential tool for software developers to write efficient, organized, and easy-to-maintain code. They are reusable solutions to common programming problems that can help developers streamline their code, reduce bugs, and improve the quality of their work. If you're new to coding patterns, this article will provide you with a beginner-friendly introduction to what they are, why they matter, and how to use them.

2. What are Coding Patterns?

Coding patterns are templates or blueprints for solving common programming problems. They are based on proven best practices and are designed to be reusable across multiple projects. By using coding patterns, developers can save time and effort by not having to reinvent the wheel each time they encounter a problem. Instead, they can leverage existing patterns to solve problems quickly and efficiently.

3. Why are Coding Patterns Important?

Coding patterns are essential for several reasons. First, they can help improve the quality of your code. By following established patterns, you can reduce the likelihood of introducing bugs into your code, making it easier to maintain over time. Additionally, coding patterns can make your code more readable and easier to understand for other developers, leading to better collaboration and more efficient teamwork.

4. Types of Coding Patterns

There are many different types of coding patterns, but some of the most commonly used include:

4.1. Singleton Pattern

This pattern ensures that a class has only one instance and provides a global point of access to that instance.The Singleton pattern is commonly used in database connection management. For example, in a web application, you may only need one database connection throughout the entire application, and the Singleton pattern can ensure that only one instance of the connection object is created and used.

4.2. Factory Pattern

This pattern creates objects without exposing the creation logic to the client and refers to the newly created object using a common interface.The Factory pattern is widely used in many software frameworks and libraries to create objects. For example, in the Java programming language, the java.util.Calendar class uses the Factory pattern to create instances of the Calendar class.

4.3. Adapter Pattern

This pattern allows objects with incompatible interfaces to work together by creating an intermediate adapter object.The Adapter pattern is often used in graphical user interface (GUI) development to allow objects with incompatible interfaces to work together. For example, in the Java Swing library, the JList component uses the Adapter pattern to display a list of objects with different data types.

4.4. Decorator Pattern

This pattern allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class.The Decorator pattern is commonly used in web development frameworks to add behavior to existing objects. For example, in the Django web framework for Python, you can use the Decorator pattern to add authentication and authorization to views.

4.5. Observer Pattern

This pattern defines a one-to-many dependency between objects, so that when one object changes state, all its dependents are notified and updated automatically.The Observer pattern is used extensively in event-driven programming and GUI development to notify objects of changes in state. For example, in the React JavaScript library, the useState hook uses the Observer pattern to notify components of changes in state.

4.6. Command Pattern

This pattern encapsulates a request as an object, thereby allowing you to parameterize clients with different requests, queue or log requests, and support undoable operations.The Command pattern is used in many software applications to encapsulate requests as objects. For example, in the Git version control system, commands such as git commit and git push are implemented using the Command pattern.

4.7. Iterator Pattern

This pattern provides a way to access the elements of an aggregate object sequentially without exposing its underlying representation.The Iterator pattern is commonly used in many programming languages to access elements in collections and arrays. For example, in the Python programming language, you can use the Iterator pattern to loop over elements in a list or dictionary.

5. Implementing Coding Patterns

To implement coding patterns, you first need to identify the problem you are trying to solve. Once you have identified the problem, you can choose the appropriate pattern to use. Next, you need to understand the structure and behavior of the pattern and how to apply it to your code. Finally, you can implement the pattern in your code and test it to ensure that it works correctly.

6. Real-World Examples of Coding Patterns

Coding patterns are used extensively in software development, and there are many real-world examples of their use. For example, the Singleton pattern is commonly used in database connection management, while the Observer pattern is used in graphical user interface (GUI) development. Many popular software frameworks and libraries, such as React and Redux, use coding patterns extensively to provide powerful and flexible APIs.

7. Conclusion

In conclusion, coding patterns are a powerful tool for software developers that can help improve the quality, readability, and maintainability of their code. By using established patterns to solve common problems, developers can save time and effort and reduce the likelihood of introducing bugs into their code. As a beginner, learning about coding patterns can be intimidating, but with practice and experience, you will find that they are an essential tool in your software development toolkit.