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.
- 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-motionfor seamless transitions and interactions. - Data Management: Utilizing
@tanstack/react-queryfor efficient data fetching and state management. - Progressive Web App (PWA): Installable web app capabilities using
vite-plugin-pwa.
- 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
To get a local copy up and running, follow these simple steps.
- Node.js (v16 or higher recommended)
- npm or yarn
-
Clone the repository:
git clone <repository-url>
-
Navigate to the project directory:
cd VALORANT -
Install dependencies:
npm install
To start the development server, run:
npm run devOpen http://localhost:5173 in your browser to view the application.
To create an optimized production build, run:
npm run buildYou can preview the production build locally using:
npm run previewThis project is open-source and available under the terms of the included LICENSE file.