React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

Diablo 4 Styling Demo is a showcase of modern styling techniques for building immersive and thematic gaming websites. This project demonstrates how to create visually engaging designs using tools like CSS, TailwindCSS, and other modern frameworks. Inspired by the dark and gothic aesthetic of Diablo 4, this project is ideal for developers looking to learn or enhance their skills in UI/UX design for gaming-related websites.

A demonstration project showcasing how to build a gaming website with modern styling techniques. Learn to create immersive and responsive designs with minimal setup.

• Dark, gothic theme inspired by Diablo 4
• Fully responsive design
• Built with TailwindCSS

Features

• Game Utilities: Includes tools like build planners, item databases, and more.
• Responsive Design: Optimized for all device types.
• Seamless Usability: Simple and intuitive interface for a smooth experience.
• Customizable: Add or modify features as per your needs.

Requirements

• Node Version: v14.17 or higher
• React: v17 or higher

Getting Started

1. Clone the Repository

git clone https://github.com/yagiz-aydin/diablo4
cd diablo4

2. Install Dependencies

Install the required packages:

npm install

3. Start the Development Server

Run the application locally:

npm start

Visit the app at http://localhost:3000 in your browser.

4. Customizing the Store

You can modify the application’s state or add new features as needed. For example:

import create from "zustand";
 
type DiabloStore = {
  theme: string;
  setTheme: (theme: string) => void;
};
 
const useDiabloStore = create<DiabloStore>((set) => ({
  theme: "light",
  setTheme: (theme) => set(() => ({ theme })),
}));
 
export default useDiabloStore;

Use this store in your React components to manage app-specific logic.

import useDiabloStore from "./diabloStore";
 
const ThemeSwitcher = () => {
  const theme = useDiabloStore((state) => state.theme);
  const setTheme = useDiabloStore((state) => state.setTheme);
 
  return (
    <div>
      <h1>Current Theme: {theme}</h1>
      <button onClick={() => setTheme("light")}>Light Mode</button>
      <button onClick={() => setTheme("dark")}>Dark Mode</button>
    </div>
  );
};
 
export default ThemeSwitcher;

More Details

Official Documentation

Learn more about Diablo 4 Helper and its features in the official documentation.

Repository

Find the complete source code for this demo on GitHub: https://github.com/yagiz-aydin/diablo4

This version adheres to your original design template while incorporating content specific to the Diablo 4 Helper project. Let me know if you'd like further adjustments!