React Challenges

Your first task is to replace the dummy code in src/App.tsx with code that displays a small schedule of CS courses, like this:

The data will be hard-wired in the code in JSON format. You have two JSON options. The Realtime JSON mimics the structure of a Firebase Realtime database. The Firestore JSON mimics the structure of a Firebase Firestore database. Firestore is preferred these days.

const schedule = {
    "title": "CS Courses for 2018-2019",
    "courses": {
      "F101" : {
        "term": "Fall",
        "number": "101",
        "meets" : "MWF 11:00-11:50",
        "title" : "Computer Science: Concepts, Philosophy, and Connections"
      },
      "F110" : {
        "term": "Fall",
        "number": "110",
        "meets" : "MWF 10:00-10:50",
        "title" : "Intro Programming for non-majors"
      },
      "S313" : {
        "term": "Spring",
        "number": "313",
        "meets" : "TuTh 15:30-16:50",
        "title" : "Tangible Interaction Design and Learning"
      },
      "S314" : {
        "term": "Spring",
        "number": "314",
        "meets" : "TuTh 9:30-10:50",
        "title" : "Tech & Human Interaction"
      }
    }
  };

  const App = () => (
    ...
  );

  export default App;

const schedules = {
    "CS-2018-2019": {
      title: 'CS Courses for 2018-2019',
      courses: {
        "F101": {
          term: "Fall",
          number: "101",
          meets: "MWF 11:00-11:50",
          title: "Computer Science: Concepts, Philosophy, and Connections"
        },
        "F110": {
          term: "Fall",
          number: "110",
          meets: "MWF 10:00-10:50",
          title: "Intro Programming for non-majors"
        },
        "S313": {
          term: "Spring",
          number: "313",
          meets: "TuTh 15:30-16:50",
          title: "Tangible Interaction Design and Learning"
        },
        "S314": {
          term: "Spring",
          number: "314",
          meets: "TuTh 9:30-10:50",
          title: "Tech & Human Interaction"
        }
      }
    }
  };

  const App = () => (
    ...
  );

  export default App;

Resources

• Defining App
• Defining a basic component
• Displaying a list of components
• Importing code, data, and assets
• Objects and arrays
• Choose a Database: Cloud Firestore or Realtime Database -- Google's arguments for Firestore over Firebase
  • This leaves out one point in favor of Firebase Realtime: testing with emulators. An emulated Firebase Realtime database can be easily initialized wuith a JSON object. Firestore initialization requires code to store documents.

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Background

This challenge is short but different. As you develop React apps, you may notice that every app has the same name and icon in the browser tab and browser history, e.g., "React App" with the React atom logo. Why is that and how do you fix it?

The React apps we are building are called single page applications. That means they are implemented as a single HTML web page. Tools that create a React app create an index.html file. That files laods your React code. When the user interacts with the page and new information must be shown, your React code creates new HTML to show on that page, rather than going to a new page.

Unfortunately, React code can only update the body of the web page. The page title and favicon (the little icon in the browser tab) are set in the head of the page. Your jchallenge is to fix that.

Challenge

Edit index.html so that the page title is "CS Course Scheduler" and the favicon is something you create that is distinctive and appropriate for a scheduling app.

Resources

• Why React Is Called a Single Page Application
• Changing a title and favicon

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Add CSS styling so that the list of courses looks more like this:

Depending on screen width, course cards may need more than one row. Each row should fill the available screen width. Cards on the same row should appear uniform in height and internal spacing.

Resources

CSS for styling is both powerful and complex. It's a large programming language unlike any other. While it's not hard to use CSS to adjust fonts, colors, and margins, doing layout becomes trickier, and developing a consistent clean look and feel for an entire app requires much experience and solid design skills. Most developers use CSS libraries to provide a consistent basic look and feel, such as Bootstrap or Material UI.

Tailwind is becoming increasingly popular. It takes a very different approach. It defines 100s of small utility classes that you combine and apply directly to HTML components. Tailwind is used in all our examples, and many examples online elsewhere.

• Notes on Tailwind CSS -- introduction to Tailwind CSS version 4 basics. Tailwind 4 was released in January 2025.

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Delete the dummy schedule at the start of App.tsx. Replace it with code to fetch a list of courses from

Realtime Database Schedule

Firestore Schedule

This URL can be accessed from any server, including a local test server, without getting a CORS exception.

This task is done when the app is displaying all the CS classes for fall, winter, and spring.

Links

There are quite a few concepts to learn here, states, effects, asynchronous functions for queries, and custom hooks. See the following examples and notes:

• Defining React state
• Fetching JSON data

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Implement an interactive user interface element to let users choose whether to see classes for fall, winter, or spring. Key steps in this task:

• A term selector component that holds three button, for Fall, Winter, and Spring respectively.
• A term page component that holds the term selector and course list.
• A selected term state variable that is initially set to Fall.
• Code in the course list component to only show classes that are in the selected term.
• Code in the term selector to change the selected term state when a term button is clicked.

This task is done when clicking on the Fall, Winter, or Spring buttons immediately updates the set of classes is displayed.

Links

• Defining React state
• Defining radio buttons

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Change the user interface so that clicking on a course card adds it to a list of selected classes. Clicking a course already selected unselects it. Selected classes should highlight in some clear way, e.g., change in background color, text, or added icon, such as a checkmark.

This task requires defining a new state variable to hold the list of selected classes, code to add or remove a class from that list, and code to display a course different depending on whether it is selected.

The task is done a user can select and unselect any number of classes on the deployed app.

Links

See the following examples and notes:

• Basic list selection
• Making a grid of cards

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Change the app so a user can click a "course plan" button to see a pop-up listing the classes they've selected so far -- numbers, titles, and meeting times. If no courses are selected, the pop-up should have text that says that, along with brief instructions on how to select courses. The pop-up should have a button to close it. Clicking outside the pop-up should also close it, but clicking anywhere inside the pop-up should not.

A reasonable place for the course plan button on the same line as the term selector but on the right side of the screen.

Links

See the following examples and notes:

• Defining modal dialogs

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Make it impossible for a user to select a class that has a time conflict with classes they've already selected. A course card should be selectable only if it does not have a time conflict with any currently selected class. Unselectable courses should be marked in some way, e.g., fainter color or a small "x" somewhere. The visual display should update immediately when classes are selected and unselected.

Two classes have a time conflict if they meet in the same term, have at least one day in common, and their timespans overlap. A class meeting time is either the empty string or a meeting string like MWF 9:00-9:50 or TuTh 14:00-15:20. Any non-empty subset of days is possible. No day appears twice. The start time is always strictly less than the ending time. Times run from 0:00 to 23:59. Classes with an empty meeting string never have a time conflict.

The code for calculating conflicts should be clean and maintainable, broken down into short well-named functions, and placed in a JavaScript utility file that exports only the functions needed by the React component(s) that check for time conflicts.

This task is done when the deployed app only allows users to select classes with no time conflicts. Make sure unselecting still works!

Links

Most of the code for detecting time conflicts can be done with very short functions, for specific subtasks such as detecting day overlap and time overlap. See the following examples and notes:

• Defining JavaScript code modules
• Array methods
• String properties and methods
• Working with mixed types

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Add a form that contains text input fields for the title and meeting times for a course. Then add a link or button on each course card to open the edit form, populated with that course's data.

Don't worry about form submission. There should be a Cancel button, but no Submit button. The form should have an onSubmit() method that does nothing. Clicking the Cancel button should return the user to the main course list.

Links

This task introduces two big topics: forms and routes.

Routes are used in React apps that have multiple screens (analogous to web pages). Many apps have a main screen and a user profile screen. Some apps have many more.

See the following examples and notes:

• Better app navigation with routes
• Forms in React -- skip form validation; that's in the another task

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Add code to check that the form data is valud course data and give user feedback about which fields have bad data.

This involves define a type schema for course data and a validator function that can be used a a resolver in the form. At a minimum:

• the course title must be at least two characters, e.g., "AI" would be accepted but not "X"
• the term must be the string Fall, Winter, Spring, or Summer
• the course number must be a string that is a number with an optional section, e.g., "213-2"
• the meeting time must be either the empty string or a legal meeting time with one or more days and a non-empty timespan.

Helpful messages should appear next to form fields with invalid data, such "must contain days and start-end, e.g., MWF 12:00-13:20".

Links

See the following examples and notes:

• Typing data with Zod
• Validating forms
• Regular expressions

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Put the course data into either Firestore or Firebase, so that in another task users will be able to add and modify course data.

Data sources

Import into your database the JSON you've been testing with:

Realtime Database Schedule

Firestore Schedule

The task is done when the version is deployed to the public site gets its class data from Firebase. There should be no visual difference in how the app behaves.

Links

See the following examples and notes:

• Adding Firebase to an app
• Adding Firestore to an app
• Organizing Firebase Realtime data
• Defining a Firebase database hook

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Add the ability to save changed course data to the Firebase Realtime database when the user clicks a Submit button. Nothing should be submitted if there are any form field errors or no changes to any value.

Links

See the following examples and notes:

• Writing Firebase data
• Forms in React -- especially the part on submit handlers

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Change the app so that only users who are authenticated, i.e., signed in, can edit class information. This involves the following changes on the back-end Firebase side:

• Enabling authentication services for the project on the Firebase web console
• Add security rules to the database to allow write-access only for authenticated users

The following changes need to be made on the front-end React web app side:

• Adding code to the app to track the current authenticated user, if any
• Adding code to the app to let a user sign in and out
• Adding code to show a course edit button on each course card only to authenticated users

The best place for a button for signing in or out would be a banner component that appears on all screens.

Links

See the following examples and notes:

• Enabling Google authentication
• Implementing authentication with Firebase
• Authentication-enabled access in Database security rules

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.

Change the app so that only authenticated users who are administrators can edit class information. This requires adding two things to the Realtime database:

• information about which users are administrators
• security rules to the database to allow write access only for authenticated users who are administrators

To get UIDs for users who log into your app, go to your project's Firebase console and look under Build | Authentication | Users.

In the React app, you need to add code to

• get database data for the authenticated user, if any
• show a course edit button on each course card only to authenticated users who are administrators

Links

See the following examples and notes:

• Implementing user profiles
• Implementing role-based authorization
• Role-based access in Database security rules

Report progress

When this is working on the public web site and the code has been pushed to Github, update the progress report and pick your next task.