Skip to content
This repository was archived by the owner on Aug 6, 2024. It is now read-only.

Frontend

Jump to bottom
Victor Veytsman edited this page Jul 21, 2021 · 9 revisions

The frontend of StuyActivities is written in JavaScript, and hosted on Netlify. It uses React, GraphQL, and Material UI for most of the things that it does. It was created with Create React App, so a lot of the scripts are based on it (run, build, etc.). To work on StuyActivities, pull the repository and install the npm dependencies (usually with npm i). Then, just run npm start. By default, the client will connect to the live StuyActivities API. If you would like it to connect to a local API, set the REACT_APP_GRAPHQL_URI environment variable to the location of the API. For example, if you use the default options in hosting the API, you would run the program with REACT_APP_GRAPHQL_URI=http://localhost:3001/graphql npm start.

File Structure Overview

The best way to dive into the way StuyActivities works is by looking at the file structure. Here is a breakdown of some of the files:

  • package.json - this defines the dependencies, prettier parameters, and other various things. You usually won't need to touch this unless a dependency breaks.
  • src - the folder with all the code
    • index.js - the entryway into the program, just sources App.js
    • App.js - the real entryway. This file introduces all of the providers that are used across the site, and then sources the pages directory. For more info on providers and context, look at the React documentation.
    • pages - this folder contains all of the main pages.
      • index.js - this is the main file in the pages. It uses react-router-dom to do all of the routing on the front end. It also includes a few dialogs.
      • org, admin - these are pages with sub-pages in them, so they are folders with their own index.js, which also uses react-router-dom to do routing. org also has a sub-page admin for the admin panel of the organization page.
    • comps - this folder contains components that aren't entire pages but that are used on pages. It is a good idea to put components here if a page file is too long or if a certain component is used across multiple pages.
      • auth - components in this folder are used for authentication
      • context - components in this folder are called in App.js
        • ApolloProvider.js - includes information on how to connect to GraphQL
        • UserProvider.js - includes information on how to sign in and sign out
      • There are more folders under here, each corresponding to a specific use.

Common Tasks

Clone this wiki locally