Client - kvanland/csci401ProjectPlatform GitHub Wiki

Client Documentation

Technology Selection Process

  • Language: TypeScript, a superset of JavaScript, since we implemented the frontend using React and most members on the team were already familiar with it.
  • Frameworks/Libraries:
    • React: An efficient, component-based library which would automatically update views based on changing data.
    • Blueprint.js: Helped us build a professional, aesthetic interface.
    • Yarn: Packaged our code and increased development speed when testing in only the frontend.

Set Up

Running the Application

  • In a separate tab in Terminal, run the client with yarn start
  • Navigate to localhost:3000 in your browser

Code

src/

Organization

The client/src/ folder is split further into components and scenes, modeled off of this article.

  • Components:
    • Place any reusable React components here so that they will be accessible from any scene.
    • Since each user type had such different functionality, this folder was not ultimately used.
  • Scenes: Organizes by feature, in our case, by user type and then by page.

Navigation

  • In each user type folder is a [UserType]Navigation.tsx file which contains the React component for the navigation bar. It uses Routes and a BrowserRouter from react-router-dom to handle navigation.
  • The index.tsx is the highest-level React component for each page, and is mapped to by each [UserType]Navigation.tsx component in the import statements. For example:
import ProjectProposal from './ProjectProposal/index';

Sending GET/POST requests to the java server

Examples:

const response = await fetchServer('/projects/email-assignments', 'POST', { 
      'year': this.state.editYear, 
      'semester': this.state.editSemester
    });
    if (response.ok) {
      MainToast.show({
        message: 'Projects assignments were successfully emailed to students.',
        intent: 'success',
        icon: 'tick',
      });
    } else {
      MainToast.show({
        message: 'Could not email projects.',
        intent: 'danger',
        icon: 'error',
      });
    }

const response = await fetchServer(`/projects/stakeholder/${getUserEmail()}`, 'GET');

        if (response.ok) {
            const data = await response.json();

            this.setState({
                projects: data,
                isLoading: false
            });
        }

Some Helpful Links