Tech Stack

React + Redux Toolkit

Modern Redux development

Tailwind CSS

Utility-first styling

Supabase

Question bank and progress storage

React Router

Navigation and routing

Project Journey

A Quick and Practical Tool for My CS218 Class

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.

Code Highlights

app.jsx
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