[Oyun Websitesi Geliştirme Rehberi] Diablo 4

Hayatımızın vazgeçilmez bir parçası haline gelen video oyunları, sadece eğlence aracı olmaktan çıkıp, aynı zamanda geliştiriciler için de ilham kaynağı haline geldi. Büyük oyun şirketlerinin yeni projeleri, hem oyun dünyasını hem de geliştirme topluluğunu heyecanlandırıyor. Blizzard’ın efsanevi serisi Diablo’nun son oyunu, Diablo 4 Xbox Gamepass’e geldikten sonra UI tarafındaki geliştirmeleri ve websitesini inceleme imkanım oldu.

Ben de oyun websiteleri alanında tecrübemi arttırmak için Diablo 4'ün resmi websitesini React, Vite, TypeScript ve Styled Components kullanarak sıfırdan geliştirdim. Bu makale serisinde, bu bayram tatilinde tamamladığım siteyi, adım adım ele alacak ve sizlerle paylaşacağım. İlk olarak, projenin nasıl başladığını ve temel yapılandırmasını ele alacağım. Örnek website için https://diablo4-smoky.vercel.app/ linke tıklayarak gidebilirsiniz.

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

Proje Kurulumu ve Temel Yapılandırma

İlk olarak, projeyi oluşturmak için Vite’i kullanacağız. Vite, hızlı, hafif ve modern bir geliştirme aracıdır ve React projeleri için mükemmel bir seçenektir. Ayrıca, TypeScript desteğiyle birlikte gelmesi, güvenli ve sağlam bir kod tabanı oluşturmamıza olanak tanır. Aşağıda paylaştığım github linkiden projeyi inceleyebilirsiniz.
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

Proje dosyalarını oluşturduktan sonra, Vite ile React’i etkinleştirmek için vite.config.js dosyasını yapılandırmamız gerekecek:

// 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,
  },
}));

1. Adım: Kurulum

İlk olarak, projenin ana sayfasını oluşturmak için src/App.tsx dosyasını düzenleyeceğiz.

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

Bu, temel bir ana sayfa düzeni oluşturur. Şimdi, projenin kök bileşenini render etmek için src/index.tsx dosyasını güncelleyelim:

Şimdi projeyi başlatmak için aşağıdaki komutu kullanabiliriz:

Ve tarayıcınızda http://localhost:3000 adresine giderek projenin çalıştığını görebilirsiniz.

2. Adım: Klasörleme Yapısının Oluşturulması

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

• Public dosyasında fonts, images ve logos olmak üzere 3 klasörde parçalayabiliriz. Ana, alt başlıklar ve normal yazılar için, 3 tipte AlegreyaSans, ExocetBlizzard ve OldFenris yazı tipleri kullanılmış, bunları site üzerinden alabiliriz.
• Siteyi incelediğimizde resim ve video ağırlıklı içeriklerinin olduğunu görebiliriz, parça parça sitenin içerisindeki resimleri ve videoları public klasörüne alabiliriz.

3. Adım: Developer Freestyle

Fast deliver bir proje kurulumunu sizlerle paylaşmak istedim. Bundan sonraki kısımda biraz daha kendi istediğiniz tech stack üzerinden ilerlemenizi öneriyorum. Bu projede styled-components, vite, typescript ve react tech stack olarak kullandığımdan dolayı örnek bir kurulum yapmaya çalıştım. Umarım faydalı olmuştur projenin geri kalan kısmını proje linkinden inceleyebilirsiniz.

https://github.com/yagiz-aydin/diablo4
https://diablo4-smoky.vercel.app/