11 |
18 | );
19 | }
20 |
21 | return (
22 | Your Bookmarks
12 |
13 | {bookmarks.map((race) => (
14 |
17 |
23 |
26 | );
27 | }
28 |
29 | export default Bookmarks;
30 |
--------------------------------------------------------------------------------
/client/src/components/Result.jsx:
--------------------------------------------------------------------------------
1 | import "../css/Race.css";
2 | import { Link } from "react-router-dom";
3 |
4 | function Result({ result }) {
5 | return (
6 |
7 | No bookmarks
24 |Start bookmarking races to list them here.
25 |
8 |
27 |
28 | );
29 | }
30 |
31 | export default Result;
32 |
--------------------------------------------------------------------------------
/client/src/css/Bookmarks.css:
--------------------------------------------------------------------------------
1 | .bookmarks {
2 | padding: 2rem;
3 | width: 100%;
4 | box-sizing: border-box;
5 | }
6 |
7 | .bookmarks h2 {
8 | margin-bottom: 2rem;
9 | text-align: center;
10 | font-size: 2.5rem;
11 | color: #ffffff;
12 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
13 | }
14 |
15 | .bookmarks-empty {
16 | text-align: center;
17 | padding: 4rem 2rem;
18 | background-color: rgba(255, 255, 255, 0.05);
19 | border-radius: 12px;
20 | margin: 2rem auto;
21 | max-width: 600px;
22 | }
23 |
24 | .bookmarks-empty h2 {
25 | margin-bottom: 1rem;
26 | font-size: 2rem;
27 | color: #e50914;
28 | }
29 |
30 | .bookmarks-empty p {
31 | color: #999;
32 | font-size: 1.2rem;
33 | line-height: 1.6;
34 | }
35 |
36 | .bookmark-grid {
37 | display: grid;
38 | grid-template-columns: repeat(auto-fit, minmax(300px, 1rem));
39 | gap: 1.5rem;
40 | padding: 1rem;
41 | width: 100%;
42 | box-sizing: border-box;
43 | }
44 |
--------------------------------------------------------------------------------
/server/redis.js:
--------------------------------------------------------------------------------
1 | import { createClient } from "redis";
2 |
3 | if (!process.env.REDIS_URL) {
4 | console.error("REDIS_URL not set");
5 | }
6 |
7 | let client = null;
8 |
9 | /**
10 | * @param {import("redis").RedisClientOptions} [options]
11 | *
12 | * @returns {Promise
9 | 
13 |
14 |
15 |
20 | Position: {result.position} 21 |
22 | Constructor: {result.constructor_name} 23 |
24 | Laps: {result.laps} 25 |
26 | 16 | {result.driver_forename} {result.driver_surname} 17 |
18 |{result.time}
19 |20 | Position: {result.position} 21 |
22 | Constructor: {result.constructor_name} 23 |
24 | Laps: {result.laps} 25 |
15 | {timerRunning ? (
16 |
44 | );
45 | }
46 |
47 | export default Race;
48 |
--------------------------------------------------------------------------------
/client/src/components/Race.jsx:
--------------------------------------------------------------------------------
1 | import "../css/Race.css";
2 | import { useBookmarkContext } from "../context/BookmarkContext";
3 | import { Link } from "react-router-dom";
4 |
5 | function Race({ race }) {
6 | const { changeRace, isBookmark, addToBookmarks, removeFromBookmarks } =
7 | useBookmarkContext();
8 | const bookmark = isBookmark(race.race_id);
9 |
10 | function onBookmark(e) {
11 | e.preventDefault();
12 | if (bookmark) removeFromBookmarks(race.race_id);
13 | else addToBookmarks(race);
14 | }
15 |
16 | function onCardClick() {
17 | changeRace(race.race_id);
18 | }
19 |
20 | return (
21 |
22 |
17 |
18 |
19 | ) : (
20 | race && (
21 |
22 |
41 | )
42 | )}
43 |
23 |
25 |
34 |
35 | {race.name}
24 |
25 |
26 |
27 | {race.circuit_name}
28 |
29 |
30 | {race.circuit_location}, {race.circuit_country}
31 |
32 | {race.date.value}
33 |
34 |
36 | {race.results.map((result) => (
37 |
40 |
23 |
47 |
48 | );
49 | }
50 |
51 | export default Race;
52 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | # use the official Bun image
2 | # see all versions at https://hub.docker.com/r/oven/bun/tags
3 | FROM oven/bun:1.2-alpine AS base
4 | WORKDIR /usr/src/app
5 |
6 | # install dependencies into temp directory
7 | # this will cache them and speed up future builds
8 | FROM base AS install
9 | RUN mkdir -p /temp/dev
10 | COPY package.json bun.lock /temp/dev/
11 | RUN cd /temp/dev && bun install --frozen-lockfile
12 |
13 | # install with --production (exclude devDependencies)
14 | RUN mkdir -p /temp/prod
15 | COPY package.json bun.lock /temp/prod/
16 | RUN cd /temp/prod && bun install --frozen-lockfile --production
17 |
18 | # copy node_modules from temp directory
19 | # then copy all (non-ignored) project files into the image
20 | FROM base AS dev
21 | COPY --from=install /temp/dev/node_modules node_modules
22 | COPY . .
23 |
24 | # copy node_modules from temp directory
25 | # then copy all (non-ignored) project files into the image
26 | FROM base AS prerelease
27 | COPY --from=install /temp/dev/node_modules node_modules
28 | COPY . .
29 | ENV NODE_ENV=production
30 | RUN bunx --bun vite build --emptyOutDir --outDir ../build/client
31 | RUN bun build --target=bun server/index.js --outdir build/server
32 |
33 | # copy production dependencies and source code into final image
34 | FROM base AS release
35 | COPY --from=install /temp/prod/node_modules node_modules
36 | COPY --from=prerelease /usr/src/app/build/server/ server/
37 | COPY --from=prerelease /usr/src/app/build/client client/
38 | COPY --from=prerelease /usr/src/app/assets/ assets/
39 | COPY --from=prerelease /usr/src/app/package.json .
40 |
41 | # run the app
42 | USER bun
43 | ENV PORT 8080
44 | EXPOSE ${PORT}
45 | ENTRYPOINT [ "bun", "server/index.js" ]
46 |
--------------------------------------------------------------------------------
/client/src/context/BookmarkContext.jsx:
--------------------------------------------------------------------------------
1 | import { createContext, useState, useContext, useEffect } from "react";
2 |
3 | const BookmarkContext = createContext();
4 |
5 | export const useBookmarkContext = () => useContext(BookmarkContext);
6 |
7 | export const ContextProvider = ({ children }) => {
8 | const [bookmarks, setBookmarks] = useState([]);
9 | const [selectedRace, setRace] = useState("");
10 |
11 | useEffect(() => {
12 | const storedBookmarks = localStorage.getItem("bookmarks");
13 | if (storedBookmarks) setBookmarks(JSON.parse(storedBookmarks));
14 | }, []);
15 |
16 | useEffect(() => {
17 | localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
18 | }, [bookmarks]);
19 |
20 | // Initialize from local storage if available
21 | useEffect(() => {
22 | const storedRace = localStorage.getItem("race");
23 | if (storedRace) setRace(storedRace);
24 | }, []);
25 |
26 | // Effect to update local storage when the string changes
27 | useEffect(() => {
28 | localStorage.setItem("race", selectedRace);
29 | }, [selectedRace]);
30 |
31 | const addToBookmarks = (race) => {
32 | setBookmarks((prev) => [...prev, race]);
33 | };
34 |
35 | const removeFromBookmarks = (raceId) => {
36 | setBookmarks((prev) => prev.filter((race) => race.id !== raceId));
37 | };
38 |
39 | const isBookmark = (raceId) => {
40 | return bookmarks.some((race) => race.id === raceId);
41 | };
42 |
43 | // Function to update the string
44 | const changeRace = (raceId) => {
45 | setRace(raceId);
46 | };
47 |
48 | const value = {
49 | bookmarks,
50 | selectedRace,
51 | addToBookmarks,
52 | removeFromBookmarks,
53 | isBookmark,
54 | changeRace,
55 | };
56 |
57 | return (
58 |
24 | 
25 |
34 |
26 |
32 |
33 |
35 |
46 | {race.name}
36 |{race.date.value}
37 |38 | {race.circuit_location}, {race.circuit_country} 39 |
40 |41 | 42 | Winner: {race.winner.driver_forename} {race.winner.driver_surname} 43 | 44 |
45 |
54 |
68 |
69 | {timerRunning ? (
70 |
81 | );
82 | }
83 |
84 | export default Races;
85 |
--------------------------------------------------------------------------------
/client/src/components/NavBar.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 | import "../css/NavBar.css";
3 | import * as racesService from "../services/races.js";
4 | import * as notificationService from "../services/notifications.js";
5 | import Progress from "./Progress.jsx";
6 | import { useState } from "react";
7 | import Modal from "./Modal.jsx";
8 |
9 | function NavBar() {
10 | const [modal, setModal] = useState(false);
11 | const count = racesService.hooks.useCount();
12 | const queries = racesService.hooks.useQueries();
13 | const loadTime = notificationService.hooks.useLoadTime();
14 | const timerRunning = notificationService.hooks.useTimerRunning();
15 |
16 | function handleCacheButtonClick(ev) {
17 | ev.preventDefault();
18 |
19 | if (count > 0) {
20 | racesService.actions.clear();
21 | } else {
22 | racesService.actions.cache();
23 | }
24 | }
25 |
26 | function formatTime(milliseconds) {
27 | const seconds = Math.floor((milliseconds % 60000) / 1000);
28 | const ms = Math.floor(milliseconds % 1000);
29 |
30 | return `${seconds}${String(ms).padStart(3, "0")} ms`;
31 | }
32 |
33 | return (
34 |
72 | );
73 | }
74 |
75 | export default NavBar;
76 |
--------------------------------------------------------------------------------
/client/src/css/Race.css:
--------------------------------------------------------------------------------
1 | input {
2 | outline: none;
3 | }
4 |
5 | input[type="number"] {
6 | -moz-appearance: textfield;
7 | appearance: textfield;
8 | }
9 |
10 | input:invalid {
11 | border: 1px solid #ff4438;
12 | }
13 |
14 | .race {
15 | position: relative;
16 | border-radius: 8px;
17 | overflow: hidden;
18 | background-color: #1a1a1a;
19 | transition: transform 0.2s;
20 | height: 90%;
21 | display: flex;
22 | flex-direction: column;
23 | }
24 |
25 | .race:hover {
26 | transform: translateY(-5px);
27 | }
28 |
29 | .driver-img,
30 | .race-img {
31 | position: relative;
32 | width: 100%;
33 | height: 70%;
34 |
35 | img {
36 | /* aspect-ratio: 2/3; */
37 | max-width: 100%;
38 | max-height: 100%;
39 | width: auto;
40 | height: auto;
41 | object-fit: cover;
42 | }
43 | }
44 |
45 | .race-img {
46 | background-color: #163341;
47 | }
48 |
49 | .race-overlay {
50 | position: absolute;
51 | top: 0;
52 | left: 0;
53 | right: 0;
54 | bottom: 0;
55 | background: linear-gradient(
56 | to bottom,
57 | rgba(0, 0, 0, 0.1),
58 | rgba(0, 0, 0, 0.8)
59 | );
60 | opacity: 0;
61 | transition: opacity 0.2s;
62 | display: flex;
63 | flex-direction: column;
64 | justify-content: flex-end;
65 | padding: 1rem;
66 | }
67 |
68 | .race:hover .race-overlay {
69 | opacity: 1;
70 | }
71 |
72 | .bookmark-btn {
73 | position: absolute;
74 | top: 1rem;
75 | right: 1rem;
76 | color: white;
77 | font-size: 1.5rem;
78 | padding: 0.5rem;
79 | background-color: rgba(0, 0, 0, 0.5);
80 | border-radius: 50%;
81 | width: 40px;
82 | height: 40px;
83 | display: flex;
84 | align-items: center;
85 | justify-content: center;
86 | transition: background-color 0.2s;
87 | }
88 |
89 | .bookmark-btn:hover {
90 | background-color: rgba(0, 0, 0, 0.8);
91 | }
92 |
93 | .bookmark-btn.active {
94 | color: #dcff1e;
95 | }
96 |
97 | .rating-select {
98 | background-color: rgba(0, 0, 0, 0.7);
99 | color: white;
100 | border: none;
101 | padding: 0.5rem;
102 | border-radius: 4px;
103 | cursor: pointer;
104 | margin-top: 0.5rem;
105 | }
106 |
107 | .race-info {
108 | padding: 1rem;
109 | flex: 1;
110 | display: flex;
111 | flex-direction: column;
112 | gap: 0.5rem;
113 | }
114 |
115 | .race-info h3 {
116 | font-size: 1rem;
117 | margin: 0;
118 | }
119 |
120 | .race-info p {
121 | color: #999;
122 | font-size: 0.9rem;
123 | }
124 |
125 | .user-rating {
126 | color: #ffd700;
127 | font-size: 0.9rem;
128 | margin-top: auto;
129 | }
130 |
131 | @media (max-width: 768px) {
132 | .race {
133 | font-size: 0.9rem;
134 | }
135 |
136 | .race-info {
137 | padding: 0.75rem;
138 | }
139 |
140 | .bookmark-btn {
141 | width: 32px;
142 | height: 32px;
143 | font-size: 1.2rem;
144 | }
145 | }
146 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This demo uses Redis as a frontend cache for BigQuery. It demonstrates how to
2 | apply the cache prefetching strategy and use Redis for JSON storage and search.
3 | The app is written in Express and React with vite.
4 |
5 | ## Requirements
6 |
7 | - [gcloud
8 | credentials](https://cloud.google.com/docs/authentication/set-up-adc-local-dev-environment)
9 | - [BigQuery](https://cloud.google.com/bigquery) setup with the [Formula One](https://www.kaggle.com/datasets/rohanrao/formula-1-world-championship-1950-2020) dataset loaded
10 | - [bun](https://bun.sh/)
11 | - [docker](https://www.docker.com/)
12 | - Optional
13 |
14 | ## Getting started
15 |
16 | Copy and edit the `.env` file:
17 |
18 | ```bash
19 | cp .env.example .env
20 | ```
21 |
22 | Your `.env` file should contain the connection string you copied from Redis Cloud. It also has the Google Cloud credentials for connecting to BigQuery.
23 |
24 | 1. Copy the JSON from the generated `application_default_credentials.json` into your `.env` file using the `GOOGLE_APPLICATION_CREDENTIALS` variable
25 | 2. Set the `GOOGLE_CLOUD_PROJECT_ID` environment variable in your `.env` file to the associated gcloud project you want to use.
26 |
27 | Your `.env.docker` file will overwrite the REDIS_URL to use the appropriate docker internal URLs. Here is
28 | an example:
29 |
30 | ```bash
31 | REDIS_URL="redis://redis:6379"
32 | ```
33 |
34 | Next, spin up docker containers:
35 |
36 | ```bash
37 | docker compose up -d --build
38 | ```
39 |
40 | You should have a server running on `http://localhost:
71 |
72 |
73 | ) : (
74 |
75 | {races.map((race) => (
76 |
79 | )}
80 |