CricketInsight

Inspiration

The inspiration for this project came from my love for cricket and the desire to stay up-to-date with the latest matches, player stats, and trends. As a fan, I’ve always struggled to find a platform that combines detailed match data with insightful stats in one place. This app aims to fill that gap by providing users with real-time match schedules, player performance stats, and the ability to track trends over time.

What it does

CricketInsight is a real-time web app designed to bring the latest cricket match stats, trends, and insights to cricket fans worldwide. Whether you’re tracking the upcoming IPL match or checking player performance in the World Cup, CricketInsight keeps you updated with live data and powerful visualizations.

How we built it

Frontend: I used React.js for the user interface to make the app interactive and responsive. The frontend displays upcoming match schedules, player stats, and performance charts. Backend: For the backend, I used Node.js to handle API requests. I connected to the Sonar API (and possibly other cricket data sources) to fetch real-time match data, player performance stats, and trends. Data Visualization: I used Chart.js to display match trends and player performance over time in the form of interactive charts. Users can filter data by date, teams, or players. User Interactivity: I added filter options, such as a date picker and team selection, to allow users to customize the match data they see.

Challenges we ran into

API Integration: One of the main challenges was figuring out how to efficiently integrate the Sonar API to pull real-time data. There were times when I ran into issues with API response formats, but I managed to work through it by referring to the documentation and experimenting with different request types. Data Visualization: Displaying player stats and trends in a visually appealing way took a bit of trial and error. I spent time learning how to use Chart.js and how to format the data in a way that would make sense to the user. Interactivity: Implementing filters (like date pickers and team filters) to allow users to interact with the data was a bit tricky, especially with managing state across multiple components. But it was a great learning experience, and I’m happy with the end result.

Accomplishments that we're proud of

Successfully integrated the Perplexity Sonar API to fetch live match data and player stats. Built a responsive and interactive user interface using React.js, making it easy for users to track and analyze cricket data. Implemented data visualization with Chart.js, providing clear and engaging graphs to showcase match trends and player performance. Added custom filtering features (date pickers and team selectors), allowing users to interact with data based on their preferences. Learned a lot about API integration, React development, and data visualization, which helped me improve my technical skills.

What we learned

API Integration: I learned how to work with APIs, specifically Perplexity Sonar API (or other cricket-related APIs), to fetch and display live match data. Understanding how to make requests and process the responses was a huge learning experience. React.js: I got hands-on with React.js for building the frontend. I learned how to structure components, manage state, and create interactive UIs, which was a lot of fun. Data Visualization: Implementing Chart.js (or a similar tool) to display player stats and match trends was something new for me. I learned how to visualize complex data in an easy-to-understand format, which I’m excited about.

What's next for CricketInsight

The project is still in progress, but I plan to continue improving the user interface, add more interactive features, and possibly integrate additional data sources for deeper insights. I’m excited to keep enhancing CricketInsight and eventually release it for cricket fans everywhere.

Built With

• axios
• axios-(for-api-requests)-apis:-perplexity-sonar-api-(for-real-time-cricket-match-data-and-player-stats)-tools:-visual-studio-code-(for-coding)
• chart.js
• css
• css-frameworks:-react.js-(for-the-frontend)
• e.g.
• etc.]-database:-[if-applicable
• git
• git-(for-version-control)-hosting:-[insert-hosting-service-here
• heroku
• html
• javacript
• mention-any-database-here
• netlify
• node.js
• node.js-(for-the-backend)-libraries:-chart.js-(for-data-visualization)
• perplexity
• react.js
• sonar
• studio
• visual