Modern Redux development
Utility-first styling
Question bank and progress storage
Navigation and routing
I built this web app in a day as a helpful resource for my Assembly class. It features a simple quiz and a leaderboard where users can submit their scores for others to see. I'm considering adding more resources and features to expand its usefulness for my classmates.
1
2 const MainPage = () => {
3 const dispatch = useDispatch();
4 const { questions, status, index, answer, points } = useSelector(
5 (store) => store.quiz
6 );
7
8 const url =
9 "https://rtzwjflattrvmhgikvrv.supabase.co/storage/v1/object/public/CS218/218.json";
10
11 useEffect(() => {
12 async function fetchQuestions() {
13 try {
14 dispatch(start());
15 const response = await fetch(url);
16 const data = await response.json();
17
18 dispatch(dataReceived(data.questions));
19 } catch (error) {
20 console.error("Fetch error:", error);
21 dispatch(dataFailed(error));
22 }
23 }
24
25 fetchQuestions();
26 }, [dispatch]);
27
28 const numQuestions = questions?.length || 0;
29 const maxPoints = questions?.reduce((prev, cur) => prev + cur.points, 0) || 0;
30
31 return (
32 <div>
33 <Questions>
34 {status === "loading" && <Loader />}
35 {status === "error" && <Error />}
36 {status === "ready" && (
37 <StartScreen numQuestions={numQuestions} dispatch={dispatch} />
38 )}
39 {status === "active" && questions?.length > 0 && (
40 <>
41 <ProgressBar
42 index={index}
43 numQuestions={numQuestions}
44 points={points}
45 maxPoints={maxPoints}
46 />
47 <Quiz
48 answer={answer}
49 questions={questions[index]}
50 dispatch={dispatch}
51 />
52 <NextButton
53 answer={answer}
54 dispatch={dispatch}
55 numQuestions={numQuestions}
56 index={index}
57 />
58 </>
59 )}
60 {status === "finish" && (
61 <Finished dispatch={dispatch} points={points} maxPoints={maxPoints} />
62 )}
63 </Questions>
64 </div>
65 );
66};
67