In the past four days, I've embarked on a journey to modernize my website, incorporating React, TypeScript, and Docusaurus. This is the story of building philldellow.com, hosted on Vercel, to showcase not only my professional skills but also my personal growth as a developer. This blog post and the wider site is still actively being set-up so apologises for any rough edges as I learn it :)

Setting Up the Project​

Starting from scratch, I created a React project using TypeScript, bundled it into an ASP.NET Core project, and set up hosting on Vercel. Here’s the foundational setup:

Step 1: Create a React Project with TypeScript​

npx create-react-app my-app --template typescript

Once the basic project was set up, I dived into creating a series of reusable components. Here’s a breakdown of some key components and how I used TypeScript to ensure they were robust and adaptable.

Creating a Reusable Button Component​

<CodeBlock language="typescript">
{`import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  style?: React.CSSProperties;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, style }) => (
  <button onClick={onClick} style={style} className="custom-button">
    {label}
  </button>
);

export default Button;
`}
</CodeBlock>

Styling and Layout with CSS and React

The Challenge of Responsive Design​

To ensure the site looked sleek on both desktop and mobile, I created layout components using CSS modules and dynamic styling within React. Here’s a look at the responsive layout I implemented.

Building a Card Layout​

To showcase project highlights, I used a responsive card layout with CSS modules.

import React from "react";
import styles from "./Card.module.css";

interface CardProps {
  title: string;
  description: string;
}

const Card: React.FC<CardProps> = ({ title, description }) => (
  <div className={styles.card}>
    <h3>{title}</h3>
    <p>{description}</p>
  </div>
);

export default Card;

Securing the App with Azure AD B2C Authentication

One key aspect of my project was adding authentication via Azure AD B2C. This enabled me to secure sensitive parts of the site, especially sections that manage verified credentials.

Setting Up Azure AD B2C​

Setting up B2C authentication in my ASP.NET Core API required configuring both the server-side endpoints and the client-side authentication flows.

// Example of integrating Azure AD B2C authentication in ASP.NET Core
services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(options =>
    {
        options.ClientId = "<YOUR CLIENT ID>";
        options.TenantId = "<YOUR TENANT ID>";
    });