edX React Hackathon 2023

Owned by Ben Warzeski (Deactivated)
Last updated: Oct 24, 2023
2 min read

Participants: (with github handles)

  • @Ben Warzeski (Deactivated) - muselesscreator (organizer)

  • @Cindy Nguyen - cintnguyen

  • @Mena Hassan - httpsmenahassan

  • @Jakub Szewczulak -jszewczulak

Schedule:

Monday 10/23

 

11AM EST: http://meet.google.com/ezm-juos-uci https://drive.google.com/file/d/1EkRGOkxOB1J-rRW6KMDG3aOJJ5FZjHe3/view?usp=drive_link

  • Meet and give overview

  • Create Git repository

  • Copy template repo

  • Configure devstack to allow api connection

  • “What is a UI?”

1PM-3PM EST: http://meet.google.com/zmo-kkbi-szh https://drive.google.com/file/d/1PyfidlP22_JGdlRpMTCWmR_aMCaBAqlb/view?usp=drive_link

  • Walkthrough and React Fundamentals:

    • Initialize app

    • Fetch data from a variety of devstack apis

    • Display data in generic JSX

    • Generate custom display of devstack API data with Paragon components

    • Send messages to devstack API and update on response

  • Topics to review:

    • How does a react app “initialize”? What is different about MFE initialization? Why?

    • Brief understanding of tools:

      • Webpack

      • Babel

      • Eslint

      • Jest

    • Helpful simple ES6 syntax

    • React components

      • What makes a component?

      • How to define PropTypes?

      • What makes a component update (component lifecycle)?

      • Behavior vs render

      • Basic hooks for render (useState, useEffect)

      • Generic custom hook extraction

      • How to test generic react behavior

    • Network interaction

      • What are Promises? How do they work? How do we work with them?

      • How do we make asynchronous network requests?

      • Where should network requests be defined in the project?

      • How do we load data in from network api sources?

Tuesday 10/24

11AM-12PM EST http://meet.google.com/fpc-eeqk-vkd

  • How to test network code?

    • What do we test? Why? How?

  • How to cleanly internationalize strings?

1PM-3PM EST: http://meet.google.com/xbc-qfzd-fsq

  • Coding user interaction and app-level state (user selection of which api method to display).

  • Topic generation for individual projects

Wednesday 10/25:

11AM-12PM EST: http://meet.google.com/hnn-euwt-amq

  • Shared working session

1PM-3PM EST: http://meet.google.com/axv-ofpc-jmt

  • Shared working session

Base Project

  • Build a custom MFE that connects to the devstack and loads data from a variety of devstack api sources.

    • Initial apis: [courses, course blocks, mfe context, instructor reports, bulk emails schedule]

  • Generate JSX display for asynchronously loaded api data

  • Allow user to send an api command (unenroll from course)

  • Create global state tracking for which api(s) to display, provide UI to manage, and update the UI accordingly.

Demo Goals

Do Something with data from an api source (even if not an edx source).