From ff958051e4e5d05aed4407f3386427f2f90ac2bd Mon Sep 17 00:00:00 2001 From: Newton Chung Date: Tue, 28 Apr 2026 14:36:39 -0700 Subject: [PATCH 1/3] Updated React Dependency Versions This stops a 'Conflicting Peer Dependency' error from occurring when you run npm install while react is currently below 18.3.1 --- package-lock.json | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2deb6d09..18625c56d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,9 +14,9 @@ "json-server": "0.17.1", "next": "^15.5.12", "next-auth": "4.24.5", - "react": "^18.2.0", + "react": "^18.3.1", "react-data-table-component": "7.5.3", - "react-dom": "^18.2.0", + "react-dom": "^18.3.1", "react-multi-select-component": "4.3.4", "react-table": "^7.8.0", "react-tabs": "4.3.0", diff --git a/package.json b/package.json index b475a58b8..a1637107d 100644 --- a/package.json +++ b/package.json @@ -37,9 +37,9 @@ "json-server": "0.17.1", "next": "^15.5.12", "next-auth": "4.24.5", - "react": "^18.2.0", + "react": "^18.3.1", "react-data-table-component": "7.5.3", - "react-dom": "^18.2.0", + "react-dom": "^18.3.1", "react-multi-select-component": "4.3.4", "react-table": "^7.8.0", "react-tabs": "4.3.0", From 75fe42fe3cd4def89de0390b09d4df83e3ed3e6e Mon Sep 17 00:00:00 2001 From: Newton Ly Chung Date: Sat, 13 Jun 2026 12:14:23 -0700 Subject: [PATCH 2/3] docs: organize README with collapsible dropdown sections (closes #593) --- README.md | 63 ++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 46 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index ca1a61db4..b75acc341 100644 --- a/README.md +++ b/README.md @@ -11,11 +11,12 @@ ## Motivation -For a while now teachers have been asking for a way to get a birds eye view of multiple students who are progressing through the course. This is why we set out to make freeCodeCamp classroom mode, an interactive dashboard for teachers to view multiple freeCodeCamp users’ progress on their courses. +For a while now teachers have been asking for a way to get a birds eye view of multiple students who are progressing through the course. This is why we set out to make freeCodeCamp classroom mode, an interactive dashboard for teachers to view multiple freeCodeCamp users' progress on their courses. ## Contributing -### Optional - GitHub Codespaces Environment +
+GitHub Codespaces Environment (Optional) If you have used GitHub Codespaces in other projects, doing the same in freeCodeCamp Classroom should be straightforward. @@ -33,19 +34,36 @@ This [video](https://www.loom.com/share/37dcb9555ad642618d82619277daaa38?sid=c17 For setting up locally, follow the instructions below. -### Styling a component +
+ +--- + +
+Styling a Component We recommend styling components using our [design style guide](https://design-style-guide.freecodecamp.org/). We are strongly opinionated about adding new variables/tokens to the colors. After careful research, the colors have been chosen to respect the freeCodeCamp brand identity, developer experience, and accessibility. -### System Design and Architecture +
+ +--- + +
+System Design and Architecture ![System Diagram](https://github.com/freeCodeCamp/classroom/assets/44416323/8278d34f-af4d-48a0-bc2e-7f30c5ad011a) We recommend going through our [system design diagram](https://www.canva.com/design/DAFo8ezu7W8/EfUE0hjSDuJHFRGnG9NOvQ/edit?utm_content=DAFo8ezu7W8&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton). -### Prepare the database +
+ +--- + +
+Local Setup + +### Prepare the Database This project uses a [PostgreSQL](https://www.postgresql.org/) database. You should follow the instructions in the linked documentation to set it up for your system. Alternatively, you can use the below commands for a docker-based setup on likes of Linux or macOS, if you have docker installed. @@ -66,7 +84,7 @@ postgresql://postgres:password@localhost:5432/classroom
-### Get the code +### Get the Code 1. Clone the project repository. ```console @@ -89,15 +107,18 @@ postgresql://postgres:password@localhost:5432/classroom Need more help? Ran into issues? Check out this [guide](https://docs.google.com/document/d/1apfjzfIwDAfg6QQf2KD1E1aeD-KU7DEllwnH9Levq4A/edit) that walks you through all the steps of setting up the repository locally, without Docker. + + --- -### Authentication Setup +
+Authentication Setup The Classroom application supports two authentication providers: **GitHub OAuth** (recommended for contributors) and **Auth0** (required for production). You must configure at least one provider to use the application. For FCC Proper integration, install the application locally and use Auth0 for authentication. -#### GitHub OAuth Setup (Recommended for Development) +### GitHub OAuth Setup (Recommended for Development) 1. Go to GitHub Settings → Developer Settings → OAuth Apps 2. Click "New OAuth App" and fill in: @@ -111,20 +132,20 @@ For FCC Proper integration, install the application locally and use Auth0 for au GITHUB_OAUTH_PROVIDER_ENABLED=true ``` -#### Auth0 Setup (Production & Advanced Development) +### Auth0 Setup (Production & Advanced Development) **Important:** Auth0 callback URLs must exactly match your application URL including the port number. After changing ports, you must update your Auth0 application settings. **Note: If you have FCC Proper and FCC Classroom set up locally and want to use the same Auth0 application for both, follow [this guide](https://youtu.be/38OwBwQEQz4).** -##### Creating an Auth0 Application +#### Creating an Auth0 Application 1. Go to [auth0.com](https://auth0.com/) and create an account (or sign in) 2. Click "Create Application" and select "Regular Web Applications" 3. Select "Next.js" as your technology 4. Navigate to the "Settings" tab (do NOT follow the "integrate with my app" tutorial) -##### Auth0 Configuration Mapping +#### Auth0 Configuration Mapping Copy the following values from your Auth0 Application Settings to your `.env` file: @@ -136,7 +157,7 @@ Copy the following values from your Auth0 Application Settings to your `.env` fi **Note:** Do NOT include a trailing slash in `AUTH0_ISSUER`. -##### Auth0 Application URLs (Critical for Port Changes) +#### Auth0 Application URLs (Critical for Port Changes) In your Auth0 Application Settings, configure these URLs based on your environment: @@ -156,7 +177,7 @@ In your Auth0 Application Settings, configure these URLs based on your environme **Note:** Auth0 allows multiple callback URLs separated by commas. You can add all your development environments to support seamless switching. -##### Running with freeCodeCamp Proper Locally +#### Running with freeCodeCamp Proper Locally If you need to run Classroom alongside freeCodeCamp's main platform (fCC Proper) on the same machine: @@ -187,7 +208,7 @@ Add BOTH callback URLs to your Auth0 Application Settings: - This allows both apps to access the same Auth0 session - Different domains (e.g., Codespaces URLs) would NOT share authentication state -##### Debugging Authentication Issues +#### Debugging Authentication Issues **If authentication fails:** @@ -207,7 +228,7 @@ Add BOTH callback URLs to your Auth0 Application Settings: - **"Invalid state"**: Session/cookie issue, try clearing cookies for localhost - **401 Unauthorized**: Check that `NEXTAUTH_SECRET` is set in your `.env` file -##### Production Deployment Notes +#### Production Deployment Notes In production environments with separate domains (e.g., `classroom.freecodecamp.org` and `freecodecamp.org`): @@ -216,13 +237,16 @@ In production environments with separate domains (e.g., `classroom.freecodecamp. - No port conflicts occur because domains are different - The port changes in this repository are primarily for local development +
+ --- ### Join us in our [Discord Chat](https://discord.gg/qcynkd4Edx) here. --- -### Terminology +
+Terminology freeCodeCamp uses the following terms: @@ -232,9 +256,12 @@ Course(s) = 'blocks' Everything under a course/block is a 'challenge' +
+ --- -### Tech stack learning resources +
+Tech Stack Learning Resources Testing with jest https://jestjs.io/docs/snapshot-testing @@ -258,6 +285,8 @@ SSR is probably the focus point. https://dev.to/mbaljeetsingh/what-is-csr-ssr-ssg-isr-different-rendering-strategies-and-which-framework-does-it-better-angular-react-vue-4lkp +
+ --- ### License From fc7216d23fd887cdb97d0f8bc7c299174207a8ce Mon Sep 17 00:00:00 2001 From: Newton Ly Chung Date: Sat, 13 Jun 2026 23:41:55 -0700 Subject: [PATCH 3/3] Update section summaries to bold in README.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index b75acc341..dc478ec42 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ For a while now teachers have been asking for a way to get a birds eye view of m ## Contributing
-GitHub Codespaces Environment (Optional) +Optional - GitHub Codespaces Environment If you have used GitHub Codespaces in other projects, doing the same in freeCodeCamp Classroom should be straightforward. @@ -39,7 +39,7 @@ For setting up locally, follow the instructions below. ---
-Styling a Component +Styling a Component We recommend styling components using our [design style guide](https://design-style-guide.freecodecamp.org/). @@ -50,7 +50,7 @@ We are strongly opinionated about adding new variables/tokens to the colors. Aft ---
-System Design and Architecture +System Design and Architecture ![System Diagram](https://github.com/freeCodeCamp/classroom/assets/44416323/8278d34f-af4d-48a0-bc2e-7f30c5ad011a) @@ -61,7 +61,7 @@ We recommend going through our [system design diagram](https://www.canva.com/des ---
-Local Setup +Local Setup ### Prepare the Database @@ -112,7 +112,7 @@ Need more help? Ran into issues? Check out this [guide](https://docs.google.com/ ---
-Authentication Setup +Authentication Setup The Classroom application supports two authentication providers: **GitHub OAuth** (recommended for contributors) and **Auth0** (required for production). You must configure at least one provider to use the application. @@ -246,7 +246,7 @@ In production environments with separate domains (e.g., `classroom.freecodecamp. ---
-Terminology +Terminology freeCodeCamp uses the following terms: @@ -261,7 +261,7 @@ Everything under a course/block is a 'challenge' ---
-Tech Stack Learning Resources +Tech Stack Learning Resources Testing with jest https://jestjs.io/docs/snapshot-testing