- Get this week's UFC card details.
- Main card and prelims include information on every individual fight.
- Get expected starting time for every fight.
- Toggle between decimal or American moneyline odds.
- Preview upcoming UFC event headlines.
Tech | What for |
---|---|
React | Build a component based user interface. |
Next.js | Server-side rendering (SSR) of React components. |
Puppeteer | Scrapes & parses data from other websites. |
SWR | Cache & data fetching. |
Axios | Fetch data with promise-based HTTP requests. |
Moment.js | Parse & display dates. |
Chakra UI | Quickly build beautiful UI components. |
Tech | What for |
---|---|
Next.js SSR | Next.js API data fetching. |
MongoDB | NoSQL document based database. |
Mongoose | Used to interact with the database. |
REST API | HTTP API architecture. |
Tech | What for |
---|---|
Vercel | Deploy, scale, and serve the web application. |
Babel | Compile newer versions of JS to vanilla JS. |
I'm an avid fight fan. Unfortunately, there isn't a product on the market that bundles together the information that I want on the go.
The official UFC site is resource expensive, frequently slow and requires multiple steps to showcase which fights are on each weekend. WhoFightsToday goes straight to the point and clearly displays the main event on the landing page. You also have the ability to toggle between the main card and prelims and get preloaded fights instantly.
On days that I'm busy or simply trying to catch specific fights, readily-available approximate fight times would be ideal. The UFC has a start time for the prelims and main card, but no approximate time per fight. WhoFightsToday does.
Additional, there's support for both decimal and American odds on WhoFightsToday, whereas only American odds are displayed on the official UFC site.
- Practice javascript testing & automation with Puppeteer.
- Master CSS and XPath selectors.
- Get familiar with the DOM.
- Build beautiful, minimal design components.
- Attempt to deploy Puppeteer with serverless lambda functions. Impossible with free plans, will attempt an integration on future paid projects.