<aside> 📖 Table Of Contents

Problem Statement

As a software engineer, you’ll be working on the technical development of the platform on a week to week basis, building software that makes an impact. For this deliverable, imagine you’re working with the ACLU to develop a case tracker (that mimics the behavior of a todo list) to make their operations more efficient. As a starter, you’re tasked with setting up the basic functionality of the website to include the following features:

This deliverable should take anywhere from 3-5 hours! If you find yourself spending excess of this suggested time, or cannot allot 3-5 hours this week to complete the deliverable, please email [email protected], and we will figure something out.

Guide to the Application

You can view a live version of the application here! By the end of this deliverable, you will have the same functionality as this version of the application (and maybe more!)

The starter code for the deliverable can be found here. Please fork this repository to create a version specific to your Github. This will be important for submission and deployment at the end of the deliverable.

The application has two main parts, the frontend built with Next.js/React, and the backend built with Hasura/Graphql. If you are unfamiliar with these two technologies, that is intentional. Part of the reason we selected a specific tech stack is to give everyone a level playing field! This deliverable is guided, and you should be able to complete it without familiarity with the stack. It should have approximately the same difficulty as a CS50 PSET. We will give you a brief primer on the frontend and backend technologies used so that you will have all the knowledge you need to complete the deliverable.

<aside> 📢 ← Alerts labeled with the horn are notices!

</aside>

<aside> ❗ ← Alerts labeled with the exclamation mark this are optional tasks that will help you get more familiar with the code base. These are NOT part of the deliverable, but once again, these will help you navigate the code when you do proceed to the deliverable.

</aside>

Frontend

As mentioned before, the frontend is made with React and Next.JS. The main application directory can be broken down into 3 important folders: pages, CaseComponents, and MockCaseComponents. The pages folder can be found directly in the main directory, and the CaseComponents, and MockCaseComponents folders can be found inside the components folder.

<aside> 📢 If you are unfamiliar with React, you can watch the first view videos in this series as a primer.

</aside>

<aside> ❗ Start the frontend and follow along with this guide by running npm install and then running npm run dev

</aside>

The pages folder

The pages folders stores all of the code that shows pages on the web-page. The name of the files here correspond to what is shown on the web-app when a specific url is queried. For example if the user went to localhost:3000/container-test, then the file called container-test.tsx would be responsible for rendering the web page.