React Templates & Themes Logo React Templates & Themes
Nfl_nextgen_stats screenshot

Nfl_nextgen_stats

Author Avatar Theme by Charlescarr
Updated: 3 Feb 2023
17 Stars

NFL stats dashboard (full stack web app) using AWS's Next Gen NFL Stats for displaying and tracking passing data.

Github Live Preview

Categories

Flask Dashboard

Overview

The NFL Next Gen Stats Dashboard Web App is a mobile-friendly and responsive application built with React.js and Flask. It provides users with access to the latest NFL statistics, specifically focusing on QB passing stats. The app utilizes AWS’s Next Gen NFL Stats and features a clean and user-friendly interface.

Features

  • Mobile-first Design: The app was designed with mobile users in mind, ensuring a seamless experience on smaller screens.
  • Backend API: Developed a Flask backend API to retrieve and manipulate the AWS Next Gen NFL stats for the app’s needs.
  • TypeScript Development: Utilized TypeScript for type checking and to enhance the development process.
  • Single Page Application: Built with React.js, providing a smooth and efficient user experience with reusable components.
  • State Management with React Redux: Implemented React Redux and Redux Toolkit for app-wide state management.
  • Responsive Styling with TailwindCSS: Used TailwindCSS’s utility classes to create responsive and visually appealing designs. Added the option for light and dark mode.
  • Dynamic Chart Component: Created a dynamic and animated chart component to display selected data.
  • Season Leaders: Included a side component that displays the top three players in a selected stat category.

Installation

To install the NFL Next Gen Stats Dashboard Web App, follow these steps:

  1. Clone the GitHub repository:

    git clone <repository-url>

  2. Navigate to the project directory:

    cd nfl-next-gen-stats-dashboard

  3. Install the required dependencies:

    npm install

  4. Start the development server:

    npm start

  5. Open the web app in your browser:

    http://localhost:3000

Summary

The NFL Next Gen Stats Dashboard Web App is a powerful tool for NFL and fantasy football enthusiasts to track and analyze QB passing statistics. With its mobile-friendly design, responsive charts, and comprehensive data, users can gain insights and make informed decisions based on the latest NFL stats. While currently focused on QB passing stats, the app has potential for expansion to include other stat categories like rushing and receiving. With its backend API developed in Flask, TypeScript development, and state management with React Redux, the app provides an intuitive user experience with seamless data retrieval and manipulation.