planetscale / f1-championship-stats

🏎

F1 Championship Stats 🏎

See how your favorite F1 team is progressing in the Constructors Championship using the PlanetScale serverless driver for JavaScript and edge functions.

How it works

All of the data for this application is returned through edge functions from various providers (Cloudflare Workers, Vercel Edge Functions, Netlify Edge Functions). Read more about the benefits of the PlanetScale serverless driver for JavaScript and the next generation of PlanetScale infrastruction in our latest blog post.

Each of these edge functions connects to a PlanetScale database via our serverless driver, @planetscale/database, and returns a JSON payload with F1 stats to render the page.

You can use these as examples for how to start using your PlanetScale database from an edge function.

The frontend application is a Next.js app running on Vercel.

Local development

To run the frontend (UI).

npm install
npm run dev

Visit http://localhost:3000 in your browser.

Edge functions

To learn more about how to run each function, visit the subdirectories for each:

• Cloudflare
• Fastly
• Netlify
• Vercel

Thank you ❤️

The F1 stats shown in this application are from the Ergast Developer API.

License

The project is available as open source under the terms of the Apache-2.0 license.

f1-championship-stats's Issues

Haas F1 points not rendering on last race in leaderboard

There seems to be a part of the leaderboard glitching on the last race of the 2022 season, Nov 20 (seen above). It looks like the points count for Haas F1 list item isn't rendering points, but ending up rank 9.

Steps to reproduce:

1. Click the Nov 20 button in the race timeline
2. View the leaderboard

Expected Result:

• Haas F1 should be rank 8 with 37 points

Actual Result:

• Haas F1 is rank 9 with blank points

Fetch Failed for db Client

Great work on this team!!

Following the example here gives me "Fetch failed" error when I'm trying to do it in Next.js API routes:

error - Error [TypeError]: fetch failed
    at Object.processResponse (evalmachine.<anonymous>:3033:34)
    at <unknown> (evalmachine.<anonymous>:3366:42)
    at <unknown> (node:internal/process/task_queues:141:7)
    at AsyncResource.runInAsyncScope (node:async_hooks:199:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:138:8)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

However when I switched to the example in the blog post with import { connect } from "@planetscale/database"; it worked.