48 |
setIsOpen(false)}
51 | />
52 |
92 |
93 | )}
94 |
95 | );
96 | }
97 |
98 | export default Nav;
99 |
--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { Bookmaker, Market, Outcome } from "../lib/api";
2 |
3 | interface BestOdds {
4 | moneyline: { price: number; bookmaker: string } | null;
5 | spread: { price: number; bookmaker: string } | null;
6 | over: { price: number; bookmaker: string } | null;
7 | under: { price: number; bookmaker: string } | null;
8 | }
9 |
10 | export function findBestOdds(bookmakers: Bookmaker[], team: string): BestOdds {
11 | const bestOdds: BestOdds = {
12 | moneyline: null,
13 | spread: null,
14 | over: null,
15 | under: null,
16 | };
17 |
18 | // Single pass through all bookmakers
19 | for (const bookmaker of bookmakers) {
20 | // Single pass through all markets
21 | for (const market of bookmaker.markets) {
22 | switch (market.key) {
23 | case "h2h":
24 | // Moneyline odds
25 | for (const outcome of market.outcomes) {
26 | if (outcome.name === team) {
27 | if (
28 | !bestOdds.moneyline ||
29 | outcome.price > bestOdds.moneyline.price
30 | ) {
31 | bestOdds.moneyline = {
32 | price: outcome.price,
33 | bookmaker: bookmaker.title,
34 | };
35 | }
36 | }
37 | }
38 | break;
39 |
40 | case "spreads":
41 | // Spread odds
42 | for (const outcome of market.outcomes) {
43 | if (outcome.name === team) {
44 | if (!bestOdds.spread || outcome.price > bestOdds.spread.price) {
45 | bestOdds.spread = {
46 | price: outcome.price,
47 | bookmaker: bookmaker.title,
48 | };
49 | }
50 | }
51 | }
52 | break;
53 |
54 | case "totals":
55 | // Over/Under odds
56 | for (const outcome of market.outcomes) {
57 | if (outcome.name === "Over") {
58 | if (!bestOdds.over || outcome.price > bestOdds.over.price) {
59 | bestOdds.over = {
60 | price: outcome.price,
61 | bookmaker: bookmaker.title,
62 | };
63 | }
64 | } else if (outcome.name === "Under") {
65 | if (!bestOdds.under || outcome.price > bestOdds.under.price) {
66 | bestOdds.under = {
67 | price: outcome.price,
68 | bookmaker: bookmaker.title,
69 | };
70 | }
71 | }
72 | }
73 | break;
74 | }
75 | }
76 | }
77 |
78 | return bestOdds;
79 | }
80 |
81 | // Individual helper functions for backward compatibility
82 | export function findBestMoneylineOdds(bookmakers: Bookmaker[], team: string) {
83 | return findBestOdds(bookmakers, team).moneyline;
84 | }
85 |
86 | export function findBestSpreadOdds(bookmakers: Bookmaker[], team: string) {
87 | return findBestOdds(bookmakers, team).spread;
88 | }
89 |
90 | export function findBestOverUnderOdds(bookmakers: Bookmaker[]) {
91 | const bestOdds = findBestOdds(bookmakers, "");
92 | return { bestOver: bestOdds.over, bestUnder: bestOdds.under };
93 | }
94 |
95 | // Optimized comparison functions
96 | export function isBestMoneylineOdds(
97 | outcome: Outcome,
98 | team: string,
99 | bookmakerTitle: string,
100 | bestMoneyline: { price: number; bookmaker: string } | null
101 | ): boolean {
102 | return (
103 | outcome.name === team &&
104 | bestMoneyline !== null &&
105 | outcome.price === bestMoneyline.price &&
106 | bookmakerTitle === bestMoneyline.bookmaker
107 | );
108 | }
109 |
110 | export function isBestSpreadOdds(
111 | outcome: Outcome,
112 | team: string,
113 | bookmakerTitle: string,
114 | bestSpread: { price: number; bookmaker: string } | null
115 | ): boolean {
116 | return (
117 | outcome.name === team &&
118 | bestSpread !== null &&
119 | outcome.price === bestSpread.price &&
120 | bookmakerTitle === bestSpread.bookmaker
121 | );
122 | }
123 |
124 | export function isBestOverUnderOdds(
125 | outcome: Outcome,
126 | bookmakerTitle: string,
127 | bestOver: { price: number; bookmaker: string } | null,
128 | bestUnder: { price: number; bookmaker: string } | null
129 | ): boolean {
130 | if (outcome.name === "Over" && bestOver) {
131 | return (
132 | outcome.price === bestOver.price && bookmakerTitle === bestOver.bookmaker
133 | );
134 | }
135 | if (outcome.name === "Under" && bestUnder) {
136 | return (
137 | outcome.price === bestUnder.price &&
138 | bookmakerTitle === bestUnder.bookmaker
139 | );
140 | }
141 | return false;
142 | }
143 |
--------------------------------------------------------------------------------
/lib/api.ts:
--------------------------------------------------------------------------------
1 | import * as Sentry from '@sentry/nextjs';
2 | const baseURL = "https://api.the-odds-api.com";
3 | const apiKey = process.env.NEXT_PUBLIC_API_ODDS_KEY;
4 |
5 | export interface Outcome {
6 | name: string;
7 | price: number;
8 | point?: number;
9 | }
10 | export interface Market {
11 | key: string;
12 | last_update: string;
13 | outcomes: Outcome[];
14 | }
15 |
16 | export interface Bookmaker {
17 | key: string;
18 | title: string;
19 | last_update: string;
20 | markets: Market[];
21 | }
22 |
23 | export interface Odds {
24 | id: string;
25 | sport_key: string;
26 | sport_title: string;
27 | commence_time: string;
28 | home_team: string;
29 | away_team: string;
30 | bookmakers: Bookmaker[];
31 | }
32 |
33 | export interface Sport {
34 | key: string;
35 | group: string;
36 | title: string;
37 | description: string;
38 | active: boolean;
39 | has_outrights: boolean;
40 | }
41 |
42 | const fallbackSports: Sport[] = [
43 | { key: "mma_mixed_martial_arts", group: "Fighting", title: "MMA", description: "MMA", active: true, has_outrights: false },
44 | { key: "boxing_boxing", group: "Fighting", title: "Boxing", description: "Boxing", active: true, has_outrights: false },
45 | { key: "basketball_nba", group: "Basketball", title: "NBA", description: "NBA", active: true, has_outrights: false },
46 | { key: "baseball_mlb", group: "Baseball", title: "MLB", description: "MLB", active: true, has_outrights: false },
47 | { key: "icehockey_nhl", group: "Hockey", title: "NHL", description: "NHL", active: true, has_outrights: false },
48 | ];
49 |
50 | function isCiEnv() {
51 | return process.env.CI === "true" || process.env.GITHUB_ACTIONS === "true";
52 | }
53 |
54 | export async function getOdds(sport = "upcoming", type = "spreads,totals,h2h") {
55 | try {
56 | if (!apiKey) {
57 | return [];
58 | }
59 | const res = await fetch(
60 | `${baseURL}/v4/sports/${sport}/odds/?apiKey=${apiKey}®ions=us&markets=${type}&oddsFormat=american`,
61 | {
62 | cache: "no-cache",
63 | }
64 | );
65 | const data: Odds[] = await res.json();
66 | return data;
67 | } catch (error) {
68 | Sentry.captureException(error, { tags: { sport, function: "getOdds", from: 'server' } });
69 | console.error(error);
70 | return [];
71 | }
72 | }
73 |
74 | export async function getInSeasonSports() {
75 | //get sports that are currently in season
76 | try {
77 | if (!apiKey) {
78 | return fallbackSports;
79 | }
80 | const res = await fetch(
81 | `${baseURL}/v4/sports/?apiKey=${apiKey}&all=false`,
82 | {
83 | cache: "no-cache",
84 | }
85 | );
86 | const data = await res.json();
87 | return Array.isArray(data) && data.length ? data : fallbackSports;
88 | } catch (error) {
89 | Sentry.captureException(error, { tags: { sport: "all", function: "getInSeasonSports", from: 'server' } });
90 | console.error(error);
91 | return fallbackSports;
92 | }
93 | }
94 |
95 | export async function getMoneyLineOdds(sport = "upcoming") {
96 | try {
97 | const odds = await getOdds(sport, "h2h");
98 | if (odds) {
99 | return odds;
100 | }
101 | return [];
102 | } catch (error) {
103 | Sentry.captureException(error, { tags: { sport, function: "getMoneyLineOdds", from: 'server' } });
104 | console.error(error);
105 | return [];
106 | }
107 | }
108 |
109 | export async function getSpreadOdds(sport = "upcoming") {
110 | try {
111 | const odds = await getOdds(sport, "spreads");
112 | if (odds) {
113 | return odds;
114 | }
115 | return [];
116 | } catch (error) {
117 | Sentry.captureException(error, { tags: { sport, function: "getSpreadOdds", from: 'server' } });
118 | console.error(error);
119 | return [];
120 | }
121 | }
122 |
123 | export async function getPointOdds(sport = "upcoming") {
124 | try {
125 | const odds = await getOdds(sport, "totals");
126 | if (odds) {
127 | return odds;
128 | }
129 | return [];
130 | } catch (error) {
131 | Sentry.captureException(error, { tags: { sport, function: "getPointOdds", from: 'server' } });
132 | console.error(error);
133 | return [];
134 | }
135 | }
136 |
137 | //Playerprops
138 |
139 | export async function getPlayerProps(
140 | sport: string,
141 | eventid: string,
142 | markets: string
143 | ) {
144 | "use server";
145 | try {
146 | if (!apiKey) {
147 | const { dummyPlayerProps } = await import("./dummyPlayerProps");
148 | return dummyPlayerProps;
149 | }
150 | const odds = await fetch(
151 | `${baseURL}/v4/sports/${sport}/events/${eventid}/odds/?apiKey=${apiKey}®ions=us&markets=${markets}&oddsFormat=american`,
152 | { cache: "force-cache" }
153 | );
154 |
155 | const data = odds.json();
156 | if (data) {
157 | return data ?? [];
158 | }
159 | return [];
160 | } catch (error) {
161 | Sentry.captureException(error, { tags: { sport, eventid, markets, function: "getPlayerProps", from: 'server' } });
162 | console.error(error);
163 | return [];
164 | }
165 | }
166 |
--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { type DialogProps } from "@radix-ui/react-dialog"
5 | import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
6 | import { Command as CommandPrimitive } from "cmdk"
7 |
8 | import { cn } from "@/lib/utils"
9 | import { Dialog, DialogContent } from "@/components/ui/dialog"
10 |
11 | const Command = React.forwardRef<
12 | React.ElementRef
,
13 | React.ComponentPropsWithoutRef
14 | >(({ className, ...props }, ref) => (
15 |
23 | ))
24 | Command.displayName = CommandPrimitive.displayName
25 |
26 | interface CommandDialogProps extends DialogProps {}
27 |
28 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
29 | return (
30 |
37 | )
38 | }
39 |
40 | const CommandInput = React.forwardRef<
41 | React.ElementRef,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 |
45 |
46 |
54 |
55 | ))
56 |
57 | CommandInput.displayName = CommandPrimitive.Input.displayName
58 |
59 | const CommandList = React.forwardRef<
60 | React.ElementRef,
61 | React.ComponentPropsWithoutRef
62 | >(({ className, ...props }, ref) => (
63 |
68 | ))
69 |
70 | CommandList.displayName = CommandPrimitive.List.displayName
71 |
72 | const CommandEmpty = React.forwardRef<
73 | React.ElementRef,
74 | React.ComponentPropsWithoutRef
75 | >((props, ref) => (
76 |
81 | ))
82 |
83 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
84 |
85 | const CommandGroup = React.forwardRef<
86 | React.ElementRef,
87 | React.ComponentPropsWithoutRef
88 | >(({ className, ...props }, ref) => (
89 |
97 | ))
98 |
99 | CommandGroup.displayName = CommandPrimitive.Group.displayName
100 |
101 | const CommandSeparator = React.forwardRef<
102 | React.ElementRef,
103 | React.ComponentPropsWithoutRef
104 | >(({ className, ...props }, ref) => (
105 |
110 | ))
111 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
112 |
113 | const CommandItem = React.forwardRef<
114 | React.ElementRef,
115 | React.ComponentPropsWithoutRef
116 | >(({ className, ...props }, ref) => (
117 |
125 | ))
126 |
127 | CommandItem.displayName = CommandPrimitive.Item.displayName
128 |
129 | const CommandShortcut = ({
130 | className,
131 | ...props
132 | }: React.HTMLAttributes) => {
133 | return (
134 |
141 | )
142 | }
143 | CommandShortcut.displayName = "CommandShortcut"
144 |
145 | export {
146 | Command,
147 | CommandDialog,
148 | CommandInput,
149 | CommandList,
150 | CommandEmpty,
151 | CommandGroup,
152 | CommandItem,
153 | CommandShortcut,
154 | CommandSeparator,
155 | }
156 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🏈 Sportsbook Odds Comparer
2 |
3 | A modern, responsive web application for comparing sports betting odds across different sportsbooks. Built with cutting-edge technologies and comprehensive testing.
4 |
5 | [](https://sportsbook-odds-comparer.vercel.app/)
6 | [](https://github.com/features/actions)
7 | [](https://www.cypress.io/)
8 |
9 | ## ✨ Features
10 |
11 | ### 🎯 Core Functionality
12 |
13 | - **Multi-Sport Support**: NBA, NFL, NHL, MLB, MMA, and more
14 | - **Odds Comparison**: View and compare odds across multiple sportsbooks
15 | - **Betting Markets**: Moneyline, Spread, Points, and Player Props
16 | - **Real-time Data**: Live odds updates from sportsbook APIs
17 |
18 | ### 🎮 Player Props (Advanced Feature)
19 |
20 | - **Dynamic Market Selection**: Choose from various player prop markets
21 | - **Real-time Odds**: Live player prop odds from multiple bookmakers
22 | - **Interactive UI**: Modern combobox interface for easy navigation
23 | - **Comprehensive Coverage**: Batter hits, passing yards, and more
24 |
25 | ### 🧭 Navigation & UX
26 |
27 | - **Responsive Design**: Mobile-first approach with Tailwind CSS
28 | - **Dark/Light Theme**: Toggle between themes for user preference
29 | - **Intuitive Navigation**: Easy switching between sports and markets
30 | - **Accessibility**: ARIA labels and keyboard navigation support
31 |
32 | ## 🚀 Tech Stack
33 |
34 | ### Frontend
35 |
36 | - **Next.js 14** - React framework with App Router
37 | - **React 18** - Latest React with concurrent features
38 | - **TypeScript** - Type-safe development
39 | - **Tailwind CSS** - Utility-first CSS framework
40 | - **Radix UI** - Accessible component primitives
41 |
42 | ### State Management & Data
43 |
44 | - **SWR** - Data fetching and caching
45 | - **UUID** - Unique identifier generation
46 | - **Class Variance Authority** - Component variant management
47 |
48 | ### Testing & Quality
49 |
50 | - **Cypress 14** - End-to-end testing
51 | - **ESLint** - Code quality and consistency
52 | - **TypeScript** - Static type checking
53 |
54 | ### Development Tools
55 |
56 | - **pnpm** - Fast, disk space efficient package manager
57 | - **PostCSS** - CSS processing
58 | - **Autoprefixer** - CSS vendor prefixing
59 |
60 | ## 🧪 Testing
61 |
62 | ### E2E Tests with Cypress
63 |
64 | Comprehensive test coverage including:
65 |
66 | ```typescript
67 | // Example test structure
68 | describe("Sportsbook Odds", () => {
69 | it("loads and displays odds", () => {
70 | cy.visit("/");
71 | cy.get('[data-cy="odds-ml-item"]').should("be.visible");
72 | });
73 |
74 | it("navigates between sports correctly", () => {
75 | // Navigation tests
76 | });
77 | });
78 |
79 | describe("Player Props", () => {
80 | it("displays player props for selected markets", () => {
81 | // Player props functionality tests
82 | });
83 | });
84 | ```
85 |
86 | ### Test Coverage
87 |
88 | - ✅ **Page Loading**: Homepage and odds pages
89 | - ✅ **Navigation**: Sport switching and market navigation
90 | - ✅ **Player Props**: Market selection and data display
91 | - ✅ **Responsive Design**: Mobile and desktop interactions
92 | - ✅ **Data Integration**: API responses and error handling
93 |
94 | ## 🚀 Getting Started
95 |
96 | ### Prerequisites
97 |
98 | - Node.js 18+
99 | - pnpm (recommended) or npm
100 |
101 | ### Installation
102 |
103 | ```bash
104 | # Clone the repository
105 | git clone https://github.com/yourusername/sportsbook-odds-comparer.git
106 | cd sportsbook-odds-comparer
107 |
108 | # Install dependencies
109 | pnpm install
110 |
111 | # Start development server
112 | pnpm dev
113 | ```
114 |
115 | ### Available Scripts
116 |
117 | ```bash
118 | pnpm dev # Start development server
119 | pnpm build # Build for production
120 | pnpm start # Start production server
121 | pnpm lint # Run ESLint
122 | pnpm test # Run Cypress tests
123 | pnpm cypress:open # Open Cypress test runner
124 | ```
125 |
126 | ## 🏗️ Project Structure
127 |
128 | ```
129 | sportsbook-odds-comparer/
130 | ├── src/
131 | │ ├── app/ # Next.js App Router
132 | │ │ ├── odds/ # Odds comparison pages
133 | │ │ │ ├── [sport]/ # Dynamic sport routes
134 | │ │ │ └── playerProps/ # Player props functionality
135 | │ │ └── layout.tsx # Root layout
136 | │ ├── components/ # Reusable components
137 | │ │ ├── ui/ # Base UI components
138 | │ │ ├── OddsTable.tsx # Main odds display
139 | │ │ ├── PlayerProp.tsx # Player props component
140 | │ │ └── ThemeToggle.tsx # Theme switching
141 | │ └── lib/ # Utilities and API
142 | ├── cypress/ # E2E testing
143 | ├── public/ # Static assets
144 | └── .github/workflows/ # CI/CD pipelines
145 | ```
146 |
147 | ## 🔄 CI/CD Pipeline
148 |
149 | ### GitHub Actions Workflow
150 |
151 | - **Automated Testing**: Runs Cypress tests on every deployment
152 | - **Quality Checks**: ESLint and TypeScript validation
153 | - **Deployment Integration**: Tests against live deployed applications
154 | - **Smart Caching**: Optimized dependency and build caching
155 |
156 | ### Workflow Features
157 |
158 | - **Event-Driven**: Triggers on successful deployments
159 | - **E2E Testing**: Comprehensive testing against live applications
160 | - **Fail-Fast**: Immediate feedback on deployment issues
161 | - **Resource Efficient**: Optimized for speed and cost
162 |
163 | ## 🌟 What's Next
164 |
165 | ### Planned Features
166 |
167 | - **Personal Betting Tracker**: Track your bets and performance
168 | - **Daily Picks**: Curated betting recommendations
169 | - **Sports Bettor Profiles**: Featured handicapper picks
170 | - **Advanced Analytics**: Betting performance insights
171 | - **Mobile App**: Native mobile experience
172 |
173 | ### Technical Improvements
174 |
175 | - **Performance Optimization**: Core Web Vitals improvements
176 | - **SEO Enhancement**: Better search engine optimization
177 | - **PWA Features**: Progressive web app capabilities
178 | - **Real-time Updates**: WebSocket integration for live odds
179 |
180 | ## 🤝 Contributing
181 |
182 | This is a personal project, but contributions are welcome!
183 |
184 | ### Development Guidelines
185 |
186 | - Follow TypeScript best practices
187 | - Write comprehensive tests for new features
188 | - Maintain accessibility standards
189 | - Use conventional commit messages
190 |
191 | ## 📱 Live Demo
192 |
193 | **Visit the live application**: [https://sportsbook-odds-comparer.vercel.app/](https://sportsbook-odds-comparer.vercel.app/)
194 |
195 | ## 📄 License
196 |
197 | This project is for personal use and educational purposes.
198 |
199 | ---
200 |
201 | **Built with ❤️ using Next.js, React, and modern web technologies**
202 |
--------------------------------------------------------------------------------
/src/components/PlayerPropContainer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useSearchParams } from "next/navigation";
3 | import { useEffect, useState, useCallback } from "react";
4 | import GameHeader from "./GameHeader";
5 | import { StarFilledIcon } from "@radix-ui/react-icons";
6 |
7 | function PlayerPropContainer({ getPlayerProps }: PlayerPropContainerProps) {
8 | const searchParams = useSearchParams();
9 | const sport = searchParams?.get("sport") as string;
10 | const eventId = searchParams?.get("event") as string;
11 | const markets = searchParams?.get("markets") as string;
12 | const [playerProps, setPlayerProps] = useState(
13 | null
14 | );
15 |
16 | const [propMarket, setPropMarket] = useState(null);
17 | const [gameInfo, setGameInfo] = useState<{
18 | homeTeam: string;
19 | awayTeam: string;
20 | commenceTime: string;
21 | } | null>(null);
22 |
23 | const updatePlayerProps = useCallback(async () => {
24 | const data = await getPlayerProps(sport, eventId, markets);
25 | if (data?.bookmakers) {
26 | setPropMarket(data.bookmakers[0]?.markets[0].key.replaceAll("_", " "));
27 | setGameInfo({
28 | homeTeam: data.home_team,
29 | awayTeam: data.away_team,
30 | commenceTime: data.commence_time,
31 | });
32 | const reformatted = reformatPlayerProps(data);
33 | setPlayerProps(reformatted);
34 | }
35 | }, [sport, eventId, markets, getPlayerProps]);
36 |
37 | useEffect(() => {
38 | updatePlayerProps();
39 | }, [sport, eventId, markets, updatePlayerProps]);
40 |
41 | if (!playerProps) {
42 | return Please select player props
;
43 | }
44 |
45 | return (
46 |
47 |
48 | {propMarket}
49 |
50 | {gameInfo && (
51 |
56 | )}
57 | {playerProps &&
58 | Object.entries(playerProps).map((details) => {
59 | const [player, odds] = details;
60 |
61 | // Find best odds and the first bookmaker offering them for each outcome type
62 | const bestOdds: { [key: string]: { price: number; book: string } } = {};
63 | odds.forEach((odd) => {
64 | if (!bestOdds[odd.name] || odd.price > bestOdds[odd.name].price) {
65 | bestOdds[odd.name] = { price: odd.price, book: odd.book };
66 | }
67 | });
68 |
69 | return (
70 |
75 |
76 |
77 | {player}
78 |
79 |
80 |
81 | {odds.map((odd, idx) => {
82 | const isBest = odd.price === bestOdds[odd.name].price && odd.book === bestOdds[odd.name].book;
83 |
84 | return (
85 |
90 | {isBest && (
91 |
96 | )}
97 | {odd.price > 0 ? (
98 |
102 | +{odd.price}
103 |
104 | ) : (
105 |
109 | {odd.price}
110 |
111 | )}
112 |
116 | {odd.name} {odd?.point}
117 |
118 |
119 | {odd.book}
120 |
121 |
122 | );
123 | })}
124 |
125 |
126 | );
127 | })}
128 |