Prerequisites

    Before you dive into the codebase, these fundamental concepts are mandatory.

    Welcome to the GDG UTSC website project! We're excited to have you here.

    Don't worry if this seems like a lot! Take your time. Learning these concepts is an investment that will benefit you far beyond this project.

    Your Learning Path

    This is the recommended order to learn these concepts. Each builds on the previous one.

    1. JavaScript/TypeScript

    What: JavaScript is the programming language of the web. TypeScript adds type safety.

    Why we use it: TypeScript helps catch bugs before runtime and makes the codebase more maintainable. All our code is in TypeScript.

    Learning path:

    1. First, learn JavaScript fundamentals
    2. Then learn TypeScript syntax and types

    What to focus on:

    • Variables, functions, objects, arrays
    • ES6+ features (arrow functions, destructuring, spread operator)
    • Basic TypeScript types (string, number, boolean, interfaces)

    2. Async/Await and Promises

    What: Code that doesn't block the program while waiting for something.

    Why we use it: Almost everything in web dev is asynchronous โ€” fetching data from Firebase, waiting for user input. You'll use async/await constantly.

    What to focus on:

    • What a Promise is and why we need it
    • How to use .then() and .catch()
    • How async/await makes asynchronous code look synchronous
    • Error handling with try/catch

    3. Client-Server Model

    What: How web applications work. The client (browser) sends requests to a server, which sends back responses.

    Why we use it: Our website has a frontend (client) that users interact with, and a backend (server) that processes requests and talks to Firebase.

    What to focus on:

    • What "client" and "server" mean
    • HTTP requests (GET, POST, PUT, DELETE)
    • What happens when you visit a website
    • Basic understanding of APIs

    4. Authentication Concepts

    What: How we verify users are who they say they are, and how we keep them logged in.

    Why we use it: We have user accounts, admin pages, and protected routes. Understanding authentication is crucial.

    What to focus on:

    • What authentication vs authorization means
    • How tokens work (think of them like digital keys)
    • What "Bearer Authentication" means
    • How sessions work

    5. Git and GitHub Workflow

    What: Version control system for tracking code changes and collaborating.

    Why we use it: All our code is on GitHub. You'll need to create branches, commit changes, and make pull requests.

    What to focus on:

    • Git commands: clone, branch, add, commit, push, pull
    • How to create a branch
    • How to make a pull request
    • How to resolve merge conflicts

    How to Approach Learning

    • ๐ŸŽฏ Focus on understanding, not memorization. You don't need to memorize syntax. Understand why these concepts exist and when to use them.
    • ๐Ÿงฉ Learn by doing. After reading documentation, try building small examples. Break things. Fix them. That's how you learn.
    • ๐Ÿค Ask for help. If you're stuck on a concept for more than a day, reach out to the team.
    • ๐Ÿ“š Use AI tools. ChatGPT, Claude, and GitHub Copilot are excellent learning companions.

    โœ… Checklist

    Before moving on, make sure you understand:

    • โ˜ JavaScript basics (variables, functions, objects, arrays)
    • โ˜ TypeScript type annotations
    • โ˜ What async/await does and how to use it
    • โ˜ How clients and servers communicate
    • โ˜ What authentication tokens are
    • โ˜ How to create a Git branch and make a pull request