The usage of Valorant API in React JS

Overview

Valorant API React Project

Main Information

📖 Information

  • With the usage of Valorant API from https://valorant-api.com/ , thie project is made of different kinds of information about Valorant Game
  • Here is the explanation of the project
    • General information about the game in the home page
    • General information about agents with their characteristic features
    • General information about gears which agents can wear
    • General information about maps
    • General information about weapons which agents can buy before starting the game
    • Adding language feaetures to convert all information to selected language through i18next
    • Adding toggle button to change the theme of the webiste (dark mode, light mode)

🔨 Run the App

1 ) Download your project from this link https://github.com/Rapter1990/ValorantApiReactProject

2 ) Go to the project's home directory : cd ValorantApiReactProject

3 ) Install all libraries used in the project through this command npm install

4 ) Run the project though this command npm start

Screenshots

Click here to show the screenshots of project

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 6

Figure 7

You might also like...
 Easy to use, responsive and customizable carousel component for React Projects.
Lightweight carousel component for react

Lightweight carousel component for react

 Rerousel is the simplest and the lightest infinite carousel package made for React.
Rerousel is the simplest and the lightest infinite carousel package made for React.

Rerousel is the simplest and the lightest infinite carousel package made for React. Simple Set up your carousel in the blink of an eye. You only have

Touch and drag slider carousel component for React
Touch and drag slider carousel component for React

react-touch-drag-slider Touch and drag slider carousel component for React Touch friendly on mobile Responsive to viewport resizing Supports mouse dra

Items Carousel Built with react-motion and styled-components

react-items-carousel Installation $ npm install react-items-carousel --save Demos Example import React, { useState } from 'react'; import ItemsCarous

A react carousel/slider like component for sequentially displaying slides or sets of slides

react-whirligig demo repo A carousel/slider-like component for sequentially displaying slides or sets of slides. Basic Usage const Slider = ({ slideIn

Animate Banner React Component
Animate Banner React Component

rc-banner-anim React BannerAnim Component Browser Support IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔ Development npm install

React simple infinite carousel with lazy loading and responsive support

react-leaf-carousel React simple infinite carousel with lazy loading and responsive support. Installation npm install react-leaf-carousel Example impo

Minimal carousel component for React.

re-carousel Minimal carousel component for React. demo: https://amio.github.io/re-carousel/ Usage import Carousel from 're-carousel' then: Carousel a

Comments
  • fixed issue with multiple API calls in pages

    fixed issue with multiple API calls in pages

    Up until now, accessing each page would call the API an infinite number of times. This was due to the useEffect containing the function from the context in the dependency array. This is shown here

    This PR solves that issue.

    opened by lanxeon 0
Owner
Sercan Noyan Germiyanoğlu
Software Developer,Technology enthusiast,Passionate about Java,Spring Boot
Sercan Noyan Germiyanoğlu
Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

React-Flippy React-Flippy allows you to create flipping cards in React projects. It can be used as controlled or uncontrolled component. Live Demo How

Berkay Aydın 308 Dec 24, 2022
React image carousel is a React component for building image galleries and carousels

React image carousel is a React component for building image galleries and carousels

ChingChing Yeh 13 May 25, 2022
React Swift Slider is a simple image/picture slider for react

React Swift Slider React Swift Slider is a simple image/picture slider for react. Demo Demo-1 Example Repo on how to use react-swift-slider https://gi

Muzikayise Flynn Buthelezi (zuluCoda) 7 Nov 18, 2021
🍃 React Slidy - Minimalistic and smooth touch slider component for React ⚛️

React Slidy ?? React Slidy - Minimalistic and smooth touch slider component for React ⚛️ Features ??️ 1:1 slider for any content ?? Optimized for mobi

Miguel Ángel Durán 121 Dec 25, 2022
Better React Carousel - React responsive carousel component w/ grid layout

Better React Carousel - Typed React responsive carousel component w/ grid layout to easily create a carousel like photo gallery, shopping product card

Dev Panther 17 Nov 25, 2022
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders. 🖥️ 📱

React Awesome Slider v3 [NEW fullpage navigation HOC] react-awesome-slider is a 60fps, extendable, highly customizable, production ready React Compone

Rafael Caferati 2.6k Jan 3, 2023
React.js Responsive Carousel (with Swipe)

React Responsive Carousel Powerful, lightweight and fully customizable carousel component for React apps. Important I don't have any time available to

Leandro Lemos 2.3k Jan 4, 2023
React carousel component

react-slick Carousel component built with React. It is a react port of slick carousel Documentation Installation npm npm install react-slick --save ya

Kiran Abburi 10.8k Jan 2, 2023
Custom React hook for building an accessible Carousel component.

Build an accessible React Carousel component with usePony

João Viana 7 Jul 22, 2022