freecodecamp/classroom

freeCodeCamp.org is a friendly community where you can learn to code for free. It is run by a donor-supported 501(c)(3) nonprofit to help millions of busy adults transition into tech. Our community has already helped more than 40,000 people get their first developer job. Our full-stack web development and machine learning curriculum is completely free and self-paced. We have thousands of interactive coding challenges to help you expand your skills.

Classroom

A self-hosted solution to help teachers plan and manage classroom-based learning, on top of freeCodeCamp's learning platform.

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.

Contributing

Optional - GitHub Codespaces Environment

If you have used GitHub Codespaces in other projects, doing the same in freeCodeCamp Classroom should be straightforward.

• https://docs.github.com/en/codespaces/overview

• https://docs.github.com/en/codespaces/getting-started

• If you want a ready-made dev environment in your browser, make a fork of this repository.

• Afterward, set up your NextAuth-related environment variables in the .env file.

• Please follow the "Setup Instructions" in the terminal for more information.

Within freeCodeCamp Classroom, GitHub Codespaces is on par with Gitpod so that you can use either.

Optional - GitPod Dev Environment

If you want a ready-made dev environment in your browser, make a fork of this repository and then prefix your fork with "gitpod.io/#". For example,

gitpod.io/#https://github.com/{your-github-user-name}/classroom

You will still need to setup your NextAuth-related environment variables in the .env file. For more information, please follow the "Setup Instructions" in the terminal. For setting up locally, follow the instructions below.

Styling a component

We recommend styling components using our design style guide.

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

We recommend going through our system design diagram.

Prepare the database

This project uses a PostgreSQL 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.

Docker based setup on Linux, macOS, etc.

# create a directory for the data
mkdir -p $HOME/docker/volumes/postgres

# start a container (this will use the "latest" tag. Use the version as needed)
docker run -it --name pgsql-classroom -e POSTGRES_PASSWORD=password -d --restart unless-stopped -p 5432:5432 -v $HOME/docker/volumes/postgres:/var/lib/postgresql/data postgres:latest

# change DATABASE_URL in your .env to
postgresql://postgres:password@localhost:5432/classroom

Get the code

1. Clone the project repository.

   git clone https://github.com/freeCodeCamp/classroom.git
   cd classroom

2. We use npm (specifically npm workspaces) to manage our dependencies.

   npm ci

3. Create .env file based on the .env.sample file. Theses are the environment variables that are used by the application.
4. Run npx prisma generate.
5. Run npx prisma db push.
6. Run npx prisma db seed.
7. Run npm run develop.
8. Run npm run mock-fcc-data
9. Run npx prisma studio

Need more help? Ran into issues? Check out this guide that walks you through all the steps of setting up the repository locally, without Docker.

Join us in our Discord Chat here.

---

Terminology

freeCodeCamp uses the following terms:

Certification = 'superblock'

Course(s) = 'blocks'

Everything under a course/block is a 'challenge'

---

Tech stack learning resources

Testing with jest https://jestjs.io/docs/snapshot-testing

Next.js fullstack framework https://nextjs.org/docs/pages/building-your-application/optimizing/testing#jest-and-react-testing-library https://dillionmegida.com/p/nextjs-main-concepts/ https://blog.devgenius.io/advanced-next-js-concepts-8439a8752597

Next.js terminology:

SSR - Server Side Rendering

SSG - Static Site Generation

ISR - Incremental Static Regeneration

CSR - Client Side Rendering

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

Copyright © 2021 freeCodeCamp.org

The content of this repository is bound by the following licenses:

• The computer software is licensed under the BSD-3-Clause license.

classroom's Issues

Write unit tests to confirm that the admin dashboard page is secure

The admin dashboard page should only be accessible by an authenticated admin user. Write a unit test to verify that the page (and the relevant API endpoints) are secure.

Certification drop-down menu remembers un-saved changes

Looking forward for reporting a security issue:
Please report security issues by following our security policy: https://contribute.freecodecamp.org/#/security

To Reproduce
Steps to reproduce the behavior:

1. Go to “Create class” or “Edit Class” page, and change the selections of certifications
2. Click on “Cancel”
3. Go back to the “Create class” or “Edit Class” page and open the drop-down certifications drop-down menu
4. The canceled changes are pre-selected.

Expected behavior
Make sure the Certifications drop-down shows the correct previously saved certifications selections

Add an explicit opt-in step to join Classroom

Right now, here is the flow:

1. the student clicks the "join" link.
2. Student is taken to the Join page on the classroom app.
3. Request to the mock API endpoint which returns the uuid

Ideally, after the student clicks the join link, auth0 redirects to freecodecamp.org. The student gives permissions to share information with the classroom app. Student is redirected to the classroom app.

Edit (Mrugesh):

Every user (student) of freeCodeCamp should opt-in to sharing their data with the Classroom app. It requires some development work on the freeCodeCamp (main) project as well. Here is a list of action items that we want to do:

1. Classroom app gets a verified user from our IdP (which is Auth0) and hands off the request to Classroom's backend API.
2. The backend API checks with freeCodeCamp API if the user has opted-in for sharing data with the Classroom app (more on this later).
3. The freeCodeCamp API can respond with status as the case may be.
4. The Classroom UI app can display a message which is either the user had opted-in already or a link to the settings page on freeCodeCamp where they can check off a box to opt-in.
5. The Classroom UI and Backend can repeat step 2 as many times as needed to confirm when the user has opted-in.

We'll need to complete Issue #56 before we can work on this issue.

Add edit functionality for a classroom

Teacher can edit the classroom metadata.

Editing the topics for a classroom does not remember the previously chosen topics

Steps to reproduce the behavior:

1. Create a new classroom. Select at least one topic for the freeCodeCamp curriculum.
2. Go to the edit page for a class
3. Click on the drop down for the classroom topics
4. Note that it does not remember which classes were previously selected.

Remove mentions of localhost:3000 in our code

A lot of our code has references to localhost:3000. In certain places like the .env files it's fine to have this reference but any javascript files should not have localhost:3000 written because in production the port will be different. Any hardcoded links will also not link to correct spot in prod as well.

Anything written like localhost:3000/classes should be changed to /classes

Refactor page content into components

Describe the issue
When running tests, we need to be able to test them independently. Currently, when we are running tests to render a page we need to check if a session exists which is not what the test is for. Because of this, we should make a component for our main content on each page where you don't need to log in to view the content (index, join, etc) since they should all independently be able to render without a session.

To Reproduce
Steps to reproduce the behavior:

1. Go to /pages tests.
2. Delete the mock session inside the test
3. The test will fail due to a lack of a session even though we only want to render some HTML.

Expected behavior
Pages should be able to render correctly regardless of if a session exists or not. Making components should allow us to do this since it gives us greater control over what we can test by making everything independent.

☂️- User Stories Dashboard

Umbrella issue to track all the user stories for the MVP. Anything in this list should be considered to be build before the first release

• #2
• #3
• #4

Onboarding for a Teacher

As a teacher I should be able to:

• Visit the classroom app and request to sign up.
• Confirm and verify my email, etc.
• Add details to my profile:
  • Name
  • University
  • ...

...

Config Next-Auth to allow account linking between different auth providers

Describe the bug
Currently, if you have an account signed in using Google OAuth and you try to sign in using that same email, but through a different OAuth provider (Github), you are not allowed to sign in despite it being the same email. For ease of use, we want to enable account linking (so long as they are the same email under different Auth providers) for development experience only.

Steps to reproduce:

1. Must build locally (do not use the Gitpod setup)
2. Please use this guide to set up the dev environment locally.
3. Sign in and make an account using the Google provider option
4. Sign out
5. Sign in to the Classroom App again using a different provider option, but make sure it still falls under the auth0 options (for example, Github). The Github account must be associated with the same Gmail address as when you signed in on step 3. (For example, your Gmail used in step 3 is [email protected], and your GitHub account also needs to have the email address:[email protected]

Current Behavior:

• Step 5 fails with an unclear error message: "Cannot verify identity" (I don't remember the exact error message).

Desired Behavior:

• Allow account linking between different providers but only for development experience. If the need arises (through user feedback), we can attempt to implement a much safer option for end-users to also have this experience.

This document also explains how to reproduce

Integrate FreeCodeCamp API's in place of the Mock API endpoints

We have two main mock API endpoints:

1. The dashboard gets its data from the /getProfileData endpoint.
2. The join page fetches the student uuid from the /getStudentProfile endpoint

Creating more UX friendly alerts

For Rob's mentees/micro-internship, do NOT assign to anyone else
Currently, the alerts we have set in place are vanilla JS alerts that can be seen as less user-friendly/cumbersome.

We want to be able to produce banner alerts or some other alert form that is more modern and sleek but still gets the overarching message across.
Perhaps something like this:

Current alert view:

Bug: The create-classroom modal changes size after user clicks drop-down menu

To reproduce:

• Sign in with a Teacher account
• Go to the classes page
• Create class
• Select different courses from the drop-down menu.

Update package.json to specify the correct version of react (and another dependencies)

See Mrugesh's comment.

Instead of documenting the correct react version numbers in the README.md, let's pin the versions in the package.json.

Dependabot may be continually updating the package.json with the latest version numbers of all libraries. We may need to somehow disable /modify the behavior of dependabot so that we can pin the version numbers.

Authentication Change

Change NextAuth to Auth0 in order to have the same authentication with freeCodeCamp.

Refactor: Generate error messages in the server

We are currently generating error messages in the client-side (for example, see pages/join/[...joinCode].js). Ideally, the server-side logic should generate the error messages and pass the messages along to the client-side (perhaps as an array). The client-side should then check if the server generated any error messages and display the messages accordingly.

Classroom mode v2?

Hello,

I was apart of the first integration for a classroom for teachers: https://github.com/freeCodeCamp/classroom-mode-archived and one of the things that blocked us from completing was the fact that we had no way of getting previous attempts. The discussion was with @ojongerius and @QuincyLarson that storing previous attempts was expensive.

I see the goals are still the same. Have we came up with something to achieve that? How are you tracking progress?

Investigate the student-details view

Should we create a student-details view for the MVP?

Link to wireframes

Create stub for freeCodeCamp API response

We can potentially create some sample data and stub the endpoint until we have the finished FCC endpoint. Currently have mock APIs based on this library:

https://github.com/freeCodeCamp/classroom/tree/main/mock-json-server

Delete our old ones, make new one based on: https://gist.github.com/roberthuskins/04d8c767e1e6a0994440c94c2a00ece8

Readme has instructions on how to run the old ones

2 warning messages of Navbar component

Describe the bug
There are two warnings related to the Navbar component:

1. "Warning : Encountered two children with the same key..."
2. "Warning: validateDOMNesting(…) <div> cannot appear as a descendant of <p> ..."

To Reproduce

1. Go to localhost:3000
2. Open the browser console, the warnings will show.

Expected behavior
No warnings

Screenshots

Bug: cannot sign out of ADMIN page without error thrown

Looking forward for reporting a security issue:
Please report security issues by following our security policy: https://contribute.freecodecamp.org/#/security

Describe the bug
When the user signs out of the ADMIN page, their session is null so an error is thrown.

To Reproduce
Steps to reproduce the behavior:

1. Go to '/admin' while signed in
2. Sign out.

Expected behavior
It should redirect to the home page

Stop showing dashed names when creating a classroom

For the sake of UX, we can start to show normal titles (non-dashed) rather than dashed names when creating classrooms inside of our modal.

Current view of the modal:

We store the non-dashed names inside of the same block where we store the dashed names so we can simply pass them along inside of our props when creating the modal.

Automatically run unit tests when submitting a new PR

Assigning this to Rob

Restructure the response we get from the FreeCodeCamp available-super-blocks API

Right now query the curriculum structure from freeCodeCamp via the following API endpoints:

1. https://www.freecodecamp.org/curriculum-data/v1/2022/responsive-web-design.json
2. https://www.freecodecamp.org/curriculum-data/v1/available-superblocks.json

The second API endpoint provides a complex format that is confusing to parse. We can write some logic to restructure this in a more intuitive way. Create some helper functions to help us access the block names / challenge ID's. Perhaps make a seperate file (api_utils.js) which take in the URL responses and provide a better interface for accessing the data to the dashboard page.

We would also need to refactor the dashboard page to work with the new helper functions.

Assigning this to Edgar.

Pinning Next & React version

NextJS has some new changes that could heavily impact the way the application works, following good practice we'll be pinning the Next version so we can slowly implement our changes to accommodate it.

Read more on Next13's changes here

Add red/yellow/green color codes for each student in the classroom

We would like to add a red/yellow/green label to each student on the dashboard page for the classroom. The red-zone students are least enaged; green-zone students are most engaged.

TODO: We will post a design mock-up showing what the new UI should look like with the color codes. Or, if any contributors want to propose a mock-up, please do so.

Level 2: consider adding filtering functionality so that the Teacher can quickly select the students who are in the red-zone or yellow/green zones.

Authenticate all API endpoints

Most of the API endpoints are not secure. We should add checks to ensure that only authorized users have access to specific endpoints. Take a look at this file

Blocking ADMINs from changing other ADMIN or themselves roles

Describe the bug
Admin can change roles for other people. But currently, they can also change their own roles. If an Admin changes his/her role to another role, the admin will be locked out of the app, with the screen showing “access denied”. The user cannot undo the change easily.

Expected behavior
Don’t allow admins to change the role of other admins through the UI.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-config-next to v14
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency eslint-plugin-cypress to v3
• chore(deps): update dependency eslint-plugin-jest to v28
• chore(deps): update dependency husky to v9
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency prettier to v3
• chore(deps): update github actions to v4 (major) (actions/checkout, actions/setup-node)
• chore(deps): update node.js to v20
• chore(deps): update npm to v10
• chore(deps): update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react)
• fix(deps): update dependency @headlessui/react to v2
• fix(deps): update dependency flowbite to v2
• fix(deps): update dependency react-tabs to v6
• fix(deps): update dependency react-toastify to v10
• fix(deps): update dependency styled-components to v6
• fix(deps): update prisma monorepo to v5 (major) (@prisma/client, prisma)
• 🔐 Create all pending approval PRs at once 🔐

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• fix(deps): update dependency @headlessui/react to v1.7.19
• fix(deps): update dependency next-auth to v4.24.7
• chore(deps): update dependency @testing-library/react to v14.3.1
• chore(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency eslint-plugin-jest to v27.9.0
• chore(deps): update dependency tailwindcss to v3.4.4
• fix(deps): update dependency react-data-table-component to v7.6.2
• fix(deps): update react monorepo to v18.3.1 (react, react-dom, react-test-renderer)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency npm-run-all with npm-run-all2 5.0.0
• chore(deps): update dependency autoprefixer to v10.4.19
• chore(deps): update dependency eslint-plugin-cypress to v2.15.2
• chore(deps): update dependency postcss to v8.4.38
• fix(deps): update dependency json-server to v0.17.4
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• fix(deps): update dependency react-toastify to v9.1.3

Detected dependencies

devcontainer

.devcontainer/devcontainer.json

• ghcr.io/devcontainers/features/common-utils 2
• ghcr.io/devcontainers/features/node 1
• ghcr.io/devcontainers/features/git 1

docker-compose

.devcontainer/docker-compose.yml

dockerfile

.devcontainer/Dockerfile

• node 20-bookworm

github-actions

.github/workflows/ci.yml

• actions/checkout v3@f43a0e5ff2bd294095638e18286ca9a3d1956744
• actions/setup-node v3@1a4442cacd436585916779262731d5b162bc6ec7

.github/workflows/update-license.yaml

• actions/checkout v3@f43a0e5ff2bd294095638e18286ca9a3d1956744
• FantasticFiasco/action-update-license-year v3@9135da8f9ccc675217e02357c744b6b541d45cb0

npm

package.json

• @headlessui/react 1.7.17
• @next-auth/prisma-adapter 1.0.7
• @prisma/client 4.16.2
• flowbite 1.8.1
• json-server 0.17.1
• next ^12.1.6
• next-auth 4.24.5
• react ^18.2.0
• react-copy-to-clipboard 5.1.0
• react-data-table-component 7.5.3
• react-dom ^18.2.0
• react-multi-select-component 4.3.4
• react-select 5.8.0
• react-table ^7.8.0
• react-tabs 4.3.0
• react-toastify ^9.0.8
• styled-components 5.3.11
• @testing-library/jest-dom ^5.16.5
• @testing-library/react ^14.0.0
• autoprefixer 10.4.16
• eslint 8.53.0
• eslint-config-next 12.3.4
• eslint-config-prettier 8.10.0
• eslint-plugin-cypress 2.15.1
• eslint-plugin-jest ^27.2.1
• eslint-utils 3.0.0
• husky 7.0.4
• jest ^29.4.3
• jest-environment-jsdom ^29.4.3
• lint-staged 12.5.0
• npm-run-all 4.1.5
• postcss 8.4.31
• prettier 2.8.8
• prisma 4.16.2
• react-test-renderer ^18.2.0
• tailwindcss 3.3.5
• node ^16
• npm ^8

---

• Check this box to trigger a request for Renovate to run again on this repository

Create API which assigns a role of "student" to the user and adds user to the classroom

This task is a pre-requisite for Issue #114

Improve setup process for new contributors:

Currently we give contributors the credentials (not ideal because we want to keep these private)
Solution 1: Add instructions for how contributors can create their own Auth0 credentials (not ideal because it may too daunting/complex). Or maybe this is manageable? Let's investigate.
Solution 2: Create a Dev Log-in setup (simpler than Auth0)

Create Dev Login

Currently, it is a pain for new users to create a new Auth0 account and set up their credentials in order to login to the classroom app. We should have an easier login flow for developers.

The plan is to create a secondary pathway for logging in using Github oAuth. The user would need to create a Github App, which should be a much easier setup process than Auth0.

Assigning this to Rob.

Creating Classrooms

2 warning messages at the terminal

There are 2 warning messages at the terminal while running, clearing these warnings could help a developer to see new error/warning messages easier.

1. Warning: Received true for a non-boolean attribute crossOrigin.
   This one is from next.js google font loading

2. [next-auth][warn][NO_SECRET]
   This one is from next-auth.js and warns about no defined random string secret for hashing tokens, sign/encrypt cookies
   REF. https://next-auth.js.org/configuration/options#secret

To Reproduce
run npm run develop

Expected behavior
no warnings, clearly logging messages at the terminal

Screenshots

Warning: Received `true` for a non-boolean attribute `crossOrigin`.

If you want to write it to the DOM, pass a string instead: crossOrigin="true" or crossOrigin={value.toString()}.
    at link
    at head
    at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:239:1)
    at html
    at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:204:73)
    at MyDocument (webpack-internal:///./pages/_document.js:11:1)
[next-auth][warn][NO_SECRET] 
https://next-auth.js.org/warnings#no_secret

Where is this hosted?

Just a minor question. Where is this hosted? Thanks. :)

Write a ERD for issue #72 (RBAC)

Write down a proposal for what changes we should introduce into the codebase:

• Are we changing any existing models? Creating new models?
• Will we have 1 button that supports both the sign-in and sign-up functionality, or split up the behavior into separate buttons?
• Are we creating any new pages, classes, controllers?

Dropdown menu doesn't show the full list on small screens

People on small screens cannot see the full dropdown menu because the size of the modal is hard coded (presumably).

Users have a workaround in minimizing their screen, but this is not ideal.

Onboarding for a Student

Fix CORS issue on Firefox when attempting to join classroom

Describe the bug
The bug has been temporarily patched with this commit: 40e7ab1

However, this is a temp fix as we should look into why there is a CORS issue when using this API on Firefox. The issue does not appear on Chrome and has not been tested on Microsoft Edge.

To Reproduce
Steps to reproduce the behavior:

1. Go to '/pages/join/[...joincode].js'
2. Remove/comment out event.preventDefault()
3. Attempt to invite someone to the classroom
4. See error (TypeError: NetworkError when attempting to fetch resource)

Additional context

The bug is currently patched, but we should look into the underlying cause to fix it without bypassing CORS the way we did.

Create a Join-class button component on the Join page which assigns a role of "student" to the user

Workflow:

1. User clicks on join link
2. User lands on the Join page
3. User clicks on the "Join" button
4. User is assigned a role of "student"
5. User is added to the correct classroom (based on the ID in the join url)

Add multiple teachers to a classroom

Describe the bug

We only support one teacher/instructor per class, however, this may not fit all use cases. We would like to be able to have multiple teachers (limit yet to be discussed). The first step would require us to change the Prisma schema / database to support multiple teachers for a given classroom.

Here is how you can approach this task:

1. Open schema.prisma
2. Update the Classroom model ==> classroomTeacherId should take an array of Strings. Afterwards you will need to do a prisma migration or wipe the DB and start from scratch.
3. Search the codebase for all references to classroomTeacherId in javascript files. Update the code so that works with an array. For example, you may want to append to the classroomTeacherId array instead of setting it directly.

A warning message of classes page

When there are more than one class on classes page, a warning: 'Each child in a list should have a unique "key" prop' showed.

To Reproduce

1. Sign in with a Teacher account
2. Go to the classes page
3. Add classes if you have less than two classes.
4. The warning will show at the terminal

Expected behavior
No warning

Screenshots

Fix hydration issue on Navbar to make it conform to the new React 18 version rules

Assigning this to Josue

Task: Log in with the new Auth0 credentials. Make sure the sign-in flow still works.

Get the login credentials from @utsab

Bug: The response format is inconsistent for the API endpoints

The /pages/api/modifyuser.js expects a JSON object, whereas the other api endpoints expect a string. Can we make all of the api endpoints consistent?

Check out components/updateUserForm.js as a good place to start investigating.

Create a RBAC implementation for separation between students and teachers

Originally posted by @utsab in #56 (comment)

We need to create a "role-based access control (RBAC)" implementation for separating things that regular student and teacher users of the app can do.

This needs some additional investigation and proposals.

Add NEXTAUTH_URL and NEXTAUTH_SECRET to sample env

Documentation improvement: Add tech stack diagram and learning resources to the README

We would like to add additional support materials to help new contributors become more familiar with the codebase:

1. A description (ideally with a visual diagram) of the key technologies in the project's technology stack
2. A recommended sequence of learning resources someone can work through to get some experience with the tech stack.

All of the information you need to answer the above two question is contained in this slide deck. For the tech stack diagram, look at slide 29. For the learning resources, take a look at slides 36 - 51.

For a model example of how an open source project can clearly document its technology stack, take a look at Open Energy Dashboard (see the "Built with" section). Then take a look at their more detailed helper page which lists out specific learning resources.

Investigate whether we are using any anti-patterns in the React code

We are currently using a pattern of fetching as much data as we can on the server. For example, on the classes page, we fetch the following info on the server: the the user info from the database, the list of classrooms, the freeCodeCamp API data. We then pass this info along to the React component when it renders on the client-side. Is this a reasonable pattern?

Documentation improvement: Mention the style guide

We currently follow the freeCodeCamp style guide when styling the Classroom App: https://design-style-guide.freecodecamp.org/

Add a comment somewhere in README.md that documents the style guide.