Skip to content

Project Structure

Jump to bottom
Fang Shuo edited this page May 3, 2020 · 4 revisions

peoplepower-web

At the top-level, the main components of our project are:

- public
- src
- .airtable-schema-generator.env
- .env
- package.json
  • public: where our public assets live
  • .airtable-schema-generator/.env: environment files that need to be configured as part of setup
  • src: the main folder we need to be concerned with

Within src, the files are organized as follows:

- __tests__
    - (All test files. The structure of this folder mirrors the structure of the project folder. Currently empty)
- assets
- components
    - (Here are all app-level reusable components, like navbar, loading component, dropdown etc.)
- lib
    - airlock /* all functionality related to airlock */
    - airtable /* all functionality related to airtable */
    - highcharts /* all functionality related to highcharts */
    - paypal /* all functionality related to paypal */
    - redux /* all functionality related to redux + different helper functions */
    - ... (the rest are all different utility files with the business logic for various screens)
- screens
    - admin
        - components
        - (Here are all components specific to the admin dashboard screens. This way it's easy to tell which files are "helper components" and which ones are the actual "screen components". The folders below follow the same format)
    - ... (files related to the .. folder: in this case, admin)
    - auth
    - general
    - onboarding
        - components
        - steps
          - (the onboarding folder is a little different in it having a steps folder, which contains 'sub-components' for each step of onboarding that a user goes through)
        - components
        - ... (files related to the .. folder: in this case, onboarding)
      - shared
      - subscriber
    - styles
      - (Here are all the CSS/styling files)
- App.js
- colors.js /* all color constants used in the app */
- constants.js  /* all constants used in the app */
- index.js

The key thing to note here is that all external dependencies can be found within src/lib, with 1 folder per dependency. So all functionality related to Paypal, for instance, can be found int src/lib/paypal/paypal.js. Each folder, therefore, can be thought of as a stand-alone module that can be easily swapped out with another if necessary (e.g. if we want to use another payment provider, we can replace the paypal folder and change the import/calling of functions from there in otherparts of the project.

Clone this wiki locally