Folder Structure

Web application architecture defines the interactions between applications, middleware systems, and databases to ensure multiple applications can work together.

Sequence Diagram

Folder Structure

|-- public
|-- src
    |-- api
    |-- assets
        |-- [+] images
        |-- [+] fonts
    |-- components
         |-- Header
         |-- Footer
         |-- [+]
         |-- Widgets
            |-- [+] Buttons
            |-- [+] tests
            |-- index.js
    |-- constants
        |-- endpoints.js
    |-- pages
    |-- services
    |-- styles
    |-- App.js
    |-- index.js
|-- package.json

• Api: This folder consists the list of all the API functions.
• Assets: This folder consists of all the fonts and other media particularly images.
• Components: This folder consists of shared elements that can be used by all the pages such as header and footer and consists of sub folder widgets with contains helper components for the pages such as Button, Text Field, Image etc.
• Constants: This folder consists the list of all the endpoints for the API and the object for the routes.
• Pages: This folder consists of all the pages to be displayed.
• Services: This folder defines all the API services.
• Styles: This folder contains mainly three files:
  • Theme: It consists of all the variables related to themes such as primary-color, secondary-color, primary-text etc.
  • GlobalStyle.js: It consists of all the css related to theme.
  • global.css: It consists of all the default css such as spacing.