Skip to content

Further Development Instructions

Jeffery Zhan edited this page May 17, 2022 · 4 revisions

Backend Development

To further develop this application, the following components should be added:

Models:

The models directly retrieve, manage and interact with the database, and receive user input from the controller. To add new models for the application, from the repository, navigate to the Backend directory, then the app directory, and create a new file in models directory with the name MODELNAME.model.js.

Controllers:

The controllers are responsible for providing user input for the models, and returns the fetched data from the model back to the users. To add new controllers for this application, from the repository, navigate to the Backend directory, then the app directory, and create a new file in controllers directory with the name CONTROLLERNAME.controller.js. In order to allow a model and a controller to properly communicate with each other, the following require statement is needed:
const __OBJ_NAME__ = require(PATH_OF_THE_MODEL);
This line of code allows the controller to reference all of exported model functions.

Routes:

The routes forward requests to the appropriate controller functions. To add new routes for the application, from the repository, navigate to the Backend directory, then the app directory, and create a new file in routes directory with the name ROUTESNAME.routes.js. In order to allow a controller to properly communicate with the routes, the following require statement is needed:
const __CONTROLLER_NAME__ = require(PATH_OF_THE_CONTROLLER);

This line of code allows the controller to reference all of exported controller functions and therefore allows requests to be directed to the appropriate controller functions. Newly added routes must also be specified in index.js in the routes directory.

Tables:

To add new tables in the database, navigate to the schemas directory in the repository. The following lines must be added at the beginning of each file in order to specify the use of homes_for_heroes database:
CREATE SCHEMA IF NOT EXISTS homes_for_heroes;
USE homes_for_heroes;

Adding Sample Data:

Sample data can be added for development and testing purposes. To add sample data, navigate to sample_schema.sql in the schemas directory. Sample data can be added by adding INSERT statements on specific tables.

Validators:

If a route accepts user input, by adding validation, user input can be validated before the request is forwarded to the corresponding controller functions. After a route is created, navigate to the validator directory under app under Backend, and create a new file named ROUTENAME-validation.js. Each validation file can contain multiple schemas, each schema responsible for validating a specific route. To integrate validation with the routes, in the routes file, add the following lines of code at the beginning:
const validationSchema = require(VALIDAION_SCHEMA_PATH);
const validationErrorHandler = require('../middleware/validation-error-handler'); Then, specify the specific validation schema in the route. See README.md in the validators directory for more instructions.

Frontend Development

To further develop this application, consider the following when adding more components:

General guidelines:

  • For components that may not be specific to certain users/roles, they can go in the components directory rather than pages, and the opposite is also true for components that are specific to certain users/roles.

  • Currently, all our React components are written as functional components rather than class components.

  • We heavily make use of the great MUI component library for our components and designs.

  • If you want to be able to retrieve the current user's id, add the following lines to your code:

    • import { selectUser } from '../../../redux/userSlice';
    • const currentUserId = useSelector(selectUser).user_id;

Routes

To add a new route for a frontend component, navigate to App.jsx. Add your route nested in the Switch component, using either the regular Route component, the AdminProtectedRoute, or the AuthProtectedRoute, depending on what level of access you want it to have. For more information, see the documentation page on routing.

  • If you want to create a new routing component for different restrictions that the original three mentioned before do not cover, you can do so by navigating to /src/components/routes/. Here, add a new file with the name 'SOMETHINGProtectedRoute.js'. For information on what specifically to put in this file, again, check out the documentation page on routing as well as the files AdminProtectedRoute and AuthProtectedRoute themselves for ideas.