Nfl_nextgen_stats
NFL stats dashboard (full stack web app) using AWS's Next Gen NFL Stats for displaying and tracking passing data.
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.
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.
- Flask
Flask is a lightweight and popular web framework for Python, known for its simplicity and flexibility. It is widely used to build web applications, providing a minimalistic approach to web development with features like routing, templates, and support for extensions.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Dashboard
A dashboard style website template is a pre-designed layout that features a user interface resembling a control panel or dashboard. It typically includes charts, graphs, tables, and other data visualization tools that allow users to monitor and analyze data in real-time.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.