Mobile
Desktop
- Get a schedule of all of tomorrow's tennis matches.
- The schedule includes matches from every tournament, head-to-head history, home and away odds, etc.
- Every match includes the players' ranking, surface history, start time, and corresponding odds - moneyline, spreads and totals - in both American and decimal formats.
- Click on any odds at any time and toggle between American and decimal odds.
- A player's form is calculated and visualized, with exact match details and match outcome difficulty graphs.
- Section of players playing in their home tournaments.
- Section of players holding a current game streak.
- Section of in-form players. Multiple parameters are taken into account, including opponent's strength, tour level and recent losses.
- Section of player rust. Table shows the players with the longest time away from the courts.
- Section of surface dominance. In tennis, players specialize on specific surfaces. Table shows the highest differential in records between both players, highlighting the most successful players against the least succesful.
- ATP/WTA full player ranking tables.
| Tech | What for |
|---|---|
| TypeScript | Make coding fun again. |
| React | Build a component-based user interface. |
| Next.js | Server-side rendering (SSR) of React components. |
| Puppeteer | Scrapes & parses data from other websites. |
| Puppeteer Cluster | Run multiple instances of Puppeteer in parallel. |
| Recharts | Data visualization. |
| Tailwind CSS | Fast & powerful way to build a beautiful UI. |
| Headless UI | UI components for Tailwind CSS. |
| React Hook Form | Form state management and validation. |
| SWR | Cache & data fetching. |
| Axios | HTTP promise-based data fetching requests. |
| Moment.js | Parse & display dates. |
| Tech | What for |
|---|---|
| TypeScript | Make coding fun again. |
| Node.js | JavaScript runtime environment. |
| Next.js API | API endpoints as Node.js serverless functions. |
| MongoDB | NoSQL document-based database. |
| Mongoose | Interact with the database. |
| NextAuth.js | Local and social authentication solution. |
| Axios | Fetch data with promise-based HTTP requests. |
| REST API | HTTP API architecture. |
| Tech | What for |
|---|---|
| Vercel | Host the client. |
| MongoDB Atlas | Host the database. |
- Scrape tomorrow's schedule from base URL. Return all matches.
- Parse matches to get tournaments, matches, and players.
- Create initial entities for tournaments, matches, and players.
- Scrape current tournament's history. Update database.
- Scrape detailed match preview, including ML, spread and over/under odds. Update database.
- Scrape detailed player profiles, including their past 10 games with stats, surface history, current tournament history. Update database.
I've always loved tennis. When the opportunity arose to partner with another tennis lover to start a tennis tipping hobby, I knew I could use my programming skills to speed up our research process by automating repetitive steps. The model attempts to analyze and display key factors that could help to predict match outcomes. It's a work in progress, but like any sports model, it only gets better with every update.
- Scrape larger amounts of data.
- Best practices for scalable scraping projects.
- Efficiently analyze and manipulate large sets of data.
- Master Tailwind CSS.
- Master fullstack Next.js.