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:
- First, learn JavaScript fundamentals
- 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)
๐ Resources:
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/awaitmakes asynchronous code look synchronous - Error handling with try/catch
๐ Resources:
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
๐ Resources:
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
๐ Resources:
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
๐ Resources:
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/awaitdoes 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