Open Coding Society Setup Redesign — Contributor Documentation

Welcome to the Open Coding Society Setup Redesign Project!
This project improves how students are onboarded into coding by simplifying the setup process across several tools and tracking their understanding with quizzes and a leaderboard.

Objective

To redesign instructional pages on the Open Coding Society site so students can more easily:

Understand what accounts to create and why (including PII awareness)
Use GitHub Pages to deploy static sites in-browser via VSCode
Learn Git/GitHub workflows like git pull, commit, forking, etc.

The site now also includes a login system, progress-tracking quizzes, and a working leaderboard.

What We Did

Redesigned Pages

Accounts Page
- Teaches what accounts to create (GitHub, Replit, etc.)
- Introduces the concept of PII and safe digital practices
GitHub Pages Page
- Teaches how GitHub Pages works
- Includes deployment of VSCode in-browser
- Guides students to publish their first static website
GitHub Workflows Page
- Covers essential Git commands like pull, commit, clone, fork
- Explains why these actions matter in collaboration

Backend + Frontend Features

Login System: Users sign in; their token is saved in localStorage
Token Authenticated Score Submission: Only logged-in users can submit scores
Quiz Completion Requirement: All 3 quizzes (one per page) must be completed before score submission
Relational Database: Each score is tied to a specific user through a user ID (foreign key)
Leaderboard: Displays names and scores from the backend in order

Data Flow Overview

User Logs In ➜ Token Saved in localStorage ⬇ User Completes 3 Quizzes ➜ localStorage Tracks Completion ⬇ User Clicks Submit Score ➜ POST Request with Score. Synced to logged in User because of related table ⬇ Backend Stores Score (linked to User) ➜ Leaderboard Displays It