⚽ BetBetter

The frontend UI of the BetBetter server. This web application aims to help you become a better bettor with data visualization and by making a better bet. A live demo can be previewed here.

💡 Features

• Simplistic UI for easy browsing of matches info:
  • start date and time
  • home and away teams
  • current odds
• Match filtering by date picker
• Toggle to expand for detailed odds trend

⚙️ Tech Stack

This web application is built with the following tech stack:

•  React
•  Next.js
•  TypeScript
•  HTML
•  CSS
•  Tailwind CSS
•  D3.js

Next.js is used to create the React app structure with server-side rendering (SSR). TypeScript is the language used in the project to ensure type safety. HTML and CSS have been used to create the structure and the styling of the user interface (UI) with Tailwind CSS so that utility class is used to avoid the cascading mess due to specificity conflicts. And D3.js has been used to create data-driven documents to achieve data visualization with maximum flexibility.

💻 Local Development

The following environment variables need to be set up in the .env.local file in the root directory in order to start the local development.

• NEXT_PUBLIC_BET_BETTER_API

Install the necessary dependencies by running the following command:

yarn install

Start the local development server by running the following command:

yarn dev

The web app in dev mode will then be available on http://localhost:3000 by default.

🌱 Contributors

This project is created by the @betterbettor team which includes the following members:

• @charrrleee
• @krissolui
• @louvrecly
• @wkip1220withweb

This web application has been voted as the best web application developed in the CanTek Web Design and Development class in Oct 2023.