VALORANT UI Clone

A web-based UI replica of the popular tactical shooter game VALORANT, built using React, Vite, and Tailwind CSS. This project aims to recreate the in-game menus and user interface with high fidelity, offering a fully responsive and interactive web experience.

Live Demo: https://valorant-omega.vercel.app/

Note: Click on the screen loading image to enter the application.

🌟 Features

• High-Fidelity UI/UX: Accurately mimics the look and feel of the original game's interface.
• Interactive Pages: Navigate through various sections just like in the game:
  • Play: Matchmaking and custom game lobbies.
  • Premier: Competitive tournament system interface.
  • Collection: View and manage weapon skins, player cards, and sprays.
  • Agents: Browse through all agents and their abilities.
  • Career: Match history and player stats layout.
  • Store: In-game shop interface.
  • Battlepass: Progression tracking layout.
• Smooth Animations: Powered by framer-motion for seamless transitions and interactions.
• Data Management: Utilizing @tanstack/react-query for efficient data fetching and state management.
• Progressive Web App (PWA): Installable web app capabilities using vite-plugin-pwa.

🛠️ Technologies Used

• Core: React 18, Vite
• Styling: Tailwind CSS
• Routing: Custom state-based dynamic rendering (Single Page Application)
• State Management & Fetching: TanStack React Query
• Animations: Framer Motion
• Icons: Lucide React

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v16 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone <repository-url>

2. Navigate to the project directory:

   cd VALORANT

3. Install dependencies:

   npm install

Running Locally

To start the development server, run:

npm run dev

Open http://localhost:5173 in your browser to view the application.

Building for Production

To create an optimized production build, run:

npm run build

You can preview the production build locally using:

npm run preview

🏗️ Architecture & Data Flow

Architectural Diagram

This diagram illustrates the high-level architecture of the application, showcasing how different libraries and components interact.

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff4655', 'primaryTextColor': '#fff', 'primaryBorderColor': '#111', 'lineColor': '#ff4655', 'secondaryColor': '#0f1923', 'tertiaryColor': '#ece8e1', 'clusterBorder': '#ff4655'}}}%%
flowchart TD
    subgraph "System Architecture"
        direction TD
        User((User)) --> |Interacts with| Browser
        subgraph "VALORANT UI Clone (Client-Side)"
            Browser --> |Loads| Vite[Vite Development/Build]
            Vite --> |Serves| App[React SPA]
            App --> Router[Custom State-Based Router]
            Router --> Pages[Pages: Play, Collection, Agents, etc.]
            Pages --> Components[UI Components]
            Components -.-> |Styled by| Tailwind[Tailwind CSS]
            Components -.-> |Animated by| Framer[Framer Motion]
            Pages --> ReactQuery[TanStack React Query]
            ReactQuery -.-> |Fetches/Manages| LocalData[(Local State/Mock Data)]
        end
    style User fill:#0f1923,stroke:#ff4655,stroke-width:2px,color:#fff
    style Vite fill:#ff4655,stroke:#111,stroke-width:2px,color:#fff
    style App fill:#ece8e1,stroke:#0f1923,stroke-width:2px,color:#111
    style Router fill:#0f1923,stroke:#ff4655,stroke-width:2px,color:#fff
    style Tailwind fill:#38bdf8,stroke:#0f1923,stroke-width:2px,color:#fff
    style Framer fill:#ff0088,stroke:#0f1923,stroke-width:2px,color:#fff
    style ReactQuery fill:#ff4154,stroke:#0f1923,stroke-width:2px,color:#fff
    end

Loading

API Architecture

All external data fetching strictly routes through a centralized API client located at src/api.js.

• Native Fetch Wrapper: src/api.js exposes an api.get() method that wraps the native browser fetch API. This completely avoids third-party dependencies like Axios (which had historical vulnerabilities) while maintaining a clean, Axios-like { data } signature.
• No Duplicate Fetching: The GlobalDataPrefetcher.jsx centrally prefetches critical app data using useQuery into an IndexedDB cache on load. All pages must use useQuery with identical query keys to access this cached data, eliminating duplicate network requests.

Level 3 Data Flow Diagram (DFD)

This detailed diagram breaks down the processes involved in routing, data fetching (via React Query), and UI rendering within the application.

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ece8e1', 'primaryTextColor': '#111', 'primaryBorderColor': '#ff4655', 'lineColor': '#ff4655', 'tertiaryColor': '#0f1923', 'clusterBorder': '#ff4655'}}}%%
flowchart TD
    subgraph "Data Flow Overview"
        direction TD
        User[User]:::userStyle
        subgraph "Process 1: Navigation & Routing"
            1.1(Handle Route Change):::processStyle
            1.2(Update View State):::processStyle
        end
        subgraph "Process 2: Data Management (React Query)"
            2.1(Request Agent/Weapon Data):::processStyle
            2.2(Cache Data):::processStyle
            2.3(Return Formatted Data):::processStyle
        end
        subgraph "Process 3: UI Rendering & Animation"
            3.1(Trigger Entrance Animation):::processStyle
            3.2(Render Component):::processStyle
            3.3(Handle Hover/Click Interactions):::processStyle
        end
        DataStore[(Mock Game Data)]:::storeStyle
    User --> |Clicks Navigation| 1.1
    1.1 --> |Action Payload| 1.2
    1.2 --> |Requested View| 3.2

    3.2 --> |Needs Data| 2.1
    2.1 --> |Fetch| DataStore
    DataStore --> |JSON Payload| 2.2
    2.2 --> |Cached Data| 2.3
    2.3 --> |State Update| 3.2

    3.2 --> |Component Mount| 3.1
    3.1 --> |Framer Motion Props| User
    User --> |Interact| 3.3
    3.3 --> |State Update| 3.2

    classDef userStyle fill:#0f1923,stroke:#ff4655,stroke-width:3px,color:#fff;
    classDef processStyle fill:#ece8e1,stroke:#0f1923,stroke-width:2px,color:#111;
    classDef storeStyle fill:#ff4655,stroke:#0f1923,stroke-width:2px,color:#fff;
    end

Loading

UI Flow Diagram

This state diagram represents the user journey and navigation paths available within the UI clone.

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#0f1923', 'primaryTextColor': '#fff', 'primaryBorderColor': '#ff4655', 'lineColor': '#ff4655', 'clusterBorder': '#ff4655'}}}%%
stateDiagram-v2
    [*] --> LoadingScreen
    LoadingScreen --> MainMenu : Click/Any Key
    MainMenu --> PlayMode : Select 'Play'
    MainMenu --> AgentsMenu : Select 'Agents'
    MainMenu --> CollectionMenu : Select 'Collection'
    MainMenu --> StoreMenu : Select 'Store'

    state PlayMode {
        [*] --> Unrated
        Unrated --> Competitive
        Competitive --> Swiftplay
        Swiftplay --> Deathmatch
    }

    state AgentsMenu {
        [*] --> AgentList : View All Agents
        AgentList --> AgentDetails : Click Agent Card
        state AgentDetails {
            [*] --> Abilities : View Skills
            Abilities --> Lore : Story/Bio
            Lore --> Abilities : Toggle
        }
        AgentDetails --> AgentList : Back
    }

    state CollectionMenu {
        [*] --> Weapons
        Weapons --> WeaponSelection : Choose specific Gun
        WeaponSelection --> WeaponSkins : View Skins & Variants
        WeaponSkins --> Weapons : Back

        Weapons --> PlayerCards
        PlayerCards --> PlayerCardSelection : Browse Banners/Cards
        PlayerCardSelection --> EquipCard : Select & Equip

        PlayerCards --> Sprays
        Sprays --> SpraySelection : Browse Sprays
        SpraySelection --> EquipSpray : Select & Equip
    }

    state StoreMenu {
        [*] --> FeaturedBundle : Current Bundle
        FeaturedBundle --> BundleDetails : Inspect Bundle Items
        BundleDetails --> FeaturedBundle : Back

        FeaturedBundle --> NightMarket : Special Offers (If active)
        FeaturedBundle --> AccessoriesStore : Buy Gun Buddies/Cards
    }

    PlayMode --> MainMenu : Home Button
    AgentsMenu --> MainMenu : Home Button
    CollectionMenu --> MainMenu : Home Button
    StoreMenu --> MainMenu : Home Button

Loading

Component File Structure

This tree diagram visualizes the project's file structure and how the main components and pages are linked together.

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#0f1923', 'primaryTextColor': '#fff', 'primaryBorderColor': '#ff4655', 'lineColor': '#ff4655', 'tertiaryColor': '#ece8e1', 'clusterBorder': '#ff4655'}}}%%
flowchart TD
    subgraph "Project Components"
        direction TD
        App[src/App.jsx<br>Main App Entry]
    
    subgraph "src/Pages (Route Views)"
        MainPage[Main_page.jsx]
        PlayPage[Play_page.jsx]
        AgentPage[Agent_page.jsx]
        CollectionPage[Collection_page.jsx]
        StorePage[Store_page.jsx]
        BattlepassPage[Battlepass_page.jsx]
        CareerPage[Career_page.jsx]
        PremierPage[Premieer_page.jsx]

        subgraph "Nested Pages (Deep Selections)"
            WeaponSelection[WeaponSelection.jsx]
            PlayerCardSelection[PlayerCardSelection.jsx]
            SpraySelection[SpraySelection.jsx]
        end
    end
    
    subgraph "src/components (Global UI)"
        Nav[Nav.jsx<br>Top Navigation]
        Menu[Mainmenu.jsx]
        Scale[ScaleWrapper.jsx]
        Prefetcher[GlobalDataPrefetcher.jsx]
        Button[Back_button.jsx]
    end
    
    subgraph "src/features (Domain Specific)"
        direction TB
        subgraph "Play"
            PlayMenu[Play_buttons.jsx]
            PlayCard[Play_card.jsx]
            PlayCustom[Play_custom.jsx]
            PlayParty[Play_party.jsx]
        end
        
        subgraph "Agents"
            AgentPage[AgentPage.jsx]
            AgentRoster[AgentRoster.jsx]
            AgentBox[Agent_box.jsx]
        end
        
        subgraph "Collection"
            WeaponsUI[Weapons.jsx]
            WeaponBox[Weapon_box.jsx]
            SpraysUI[Sprays.jsx]
            PlayerCard[Playercard.jsx]
        end
        
        subgraph "Premier"
            PremieerInfo[Premieer_info.jsx]
        end

        subgraph "Career"
            CarieerRank[Carieer_rank.jsx]
        end
    end
    
    App --> Nav
    App --> MainPage
    App --> PlayPage
    App --> AgentPage
    App --> CollectionPage
    App --> StorePage
    App --> BattlepassPage
    App --> CareerPage
    App --> PremierPage
    
    MainPage --> Menu
    PlayPage --> PlayMenu
    PlayPage --> PlayCard
    PlayPage --> PlayCustom
    PlayPage --> PlayParty
    
    AgentPage --> AgentBox
    
    CollectionPage --> WeaponsUI
    CollectionPage --> SpraysUI
    CollectionPage --> PlayerCard
    
    WeaponsUI --> WeaponSelection
    WeaponSelection --> WeaponBox
    
    SpraysUI --> SpraySelection
    PlayerCard --> PlayerCardSelection
    
    CareerPage --> CarieerRank
    PremierPage --> PremieerInfo
    end

Loading

📄 License

This project is open-source and available under the terms of the included LICENSE file.