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/ 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. Video games Diablo 4 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/ https://diablo4-smoky.vercel.app/ 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 https://github.com/yagiz-aydin/diablo4 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 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.js file to enable React with Vite: vite.config.js // 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,
  },
})); // 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 Step 1: Installation First, we will edit the src/App.tsx file to create the project's homepage. src/App.tsx // src/App.tsx
const App: React.FC = () => {
  return (
    <div>
        <h1>Diablo 4</h1>
    </div>
  );
};
export default App; // 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.tsx file to render the root component of the project: src/index.tsx 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. http://localhost:3000 Step 2: Creating the Folder Structure Step 2: |public // Font, Resim ve videolar
|src
|_containers // Sayfalardaki kapsayıcı alanlar 
|_components // Input, Button, Typography çekirdek bileşenler |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. 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 Step 3: 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://github.com/yagiz-aydin/diablo4 https://github.com/yagiz-aydin/diablo4 https://diablo4-smoky.vercel.app/ https://diablo4-smoky.vercel.app/ https://diablo4-smoky.vercel.app/

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

124 Stories To Learn About Frontend Development

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

124 Stories To Learn About Frontend Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps