Replicating the Diablo 4 Website Using React, Vite, and Styled Components

Video games have become an indispensable part of our lives, not only as a means of entertainment but also as a source of inspiration for developers. New projects from major game companies excite both the gaming world and the development community. After Diablo 4, the latest game in Blizzard's legendary Diablo series came to Xbox Gamepass, I had the opportunity to review the UI improvements and the website.

To increase my experience in the field of game websites, I developed a copy of the official website of Diablo 4 from scratch using React, Vite, TypeScript, and Styled Components. In this series of articles, I will discuss and share with you, step-by-step, the website I completed during my holiday break. First, I will discuss how I kickstarted the project and its basic configuration. You can have a peak at the sample site here: https://diablo4-smoky.vercel.app/

Project Setup and Basic Configuration

First, we will use Vite to build the project. Vite is a fast, lightweight and modern development tool and is a great option for React projects. It also comes with TypeScript support, allowing us to build a secure and robust codebase. You can review the project from the github link I shared below.

https://github.com/yagiz-aydin/diablo4

npm init @vitejs/app diablo4
cd diablo4
npm install react react-dom @types/react @types/react-dom
npm install @vite-plugin-react vite-plugin-eslint @svgx/vite-plugin-react

After creating the project files, we will need to configure the vite.config.jsfile to enable React with Vite:

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import eslintPlugin from "vite-plugin-eslint";
import svgx from "@svgx/vite-plugin-react";

export default defineConfig((configEnv) => ({
  plugins: [react(), eslintPlugin(), svgx()],
  server: {
    port: 3000,
  },
}));

Step 1: Installation

First, we will edit the src/App.tsx file to create the project's homepage.

// src/App.tsx
const App: React.FC = () => {
  return (
    <div>
        <h1>Diablo 4</h1>
    </div>
  );
};
export default App;

This creates a basic homepage layout. Now let's update the src/index.tsxfile to render the root component of the project:

Now we can use the following command to initialize the project:

You can see the project running by navigating to http://localhost:3000 in your browser.

Step 2: Creating the Folder Structure

|public // Font, Resim ve videolar
|src
|_containers // Sayfalardaki kapsayıcı alanlar 
|_components // Input, Button, Typography çekirdek bileşenler

• In the public file, we can split it into 3 folders: fonts, images and logos. For the main, subheadings and normal articles, 3 fonts AlegreyaSans, ExocetBlizzard and OldFenris fonts are used, we can get them from the site.
  
• When we examine the site, we can see that it has image and video based content, we can get the images and videos in the public folder piece by piece.

Step 3: Developer Freestyle

I wanted to share a fast deliver project setup with you. In the next part, I recommend you to proceed a little more on the tech stack you want. Since I used styled-components, vite, typescript and react as tech stack in this project, I tried to make a sample setup. I hope it was useful, you can review the rest of the project from the project link.

https://github.com/yagiz-aydin/diablo4

https://diablo4-smoky.vercel.app/