Living Lab Website¶

livinglab-site-v3
.
├── Dockerfile
├── docker-compose.yml
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md                   // GENERAL DOCUMENTATION
├── next.config.js              // CONTAINS CONFIGURATIONS FOR RUNNING SUCH AS FOR WEBPACK
├── package.json                // CONTAINS THE DEPENDENCIES OF THIS PROJECT
├── yarn.lock
├── assets                      // MATERIAL KIT ASSETS
│   ├── css                     // CONTAINS CSS MAP FROM SCSS
│   ├── img                     // CONTAINS STATICALLY INCLUDED IMAGES THAT ARE NOT REFERENCED BASED
│   │   └── ...                     // SUCH AS FAVICON, BASE BACKGROUND
│   ├── jss                     // CONTAINS PROPERTIES OF THE STYLED COMPONENTS
│   │   ├── custom              // CONTAINS CUSTOM COMPONENTS SPECIFIC STYLING
│   │   │   └── ...
│   │   ├── nextjs-material-kit // CONTAINS ALL MATERIAL KIT STYLING
│   │   │   ├── components      // CONTAINS MATERIALKIT COMPONENTS SPECIFIC STYLING
│   │   │   │    └── ...
│   │   │   └── pages
│   │   │       └── ...
│   │   └── nextjs-material-kit.js  // CONTAINS BASE TEMPLATE OF GENERAL STYLING FOR MATERIAL KIT COMPONENTS
│   └── scss                        // CONTAINS ALL SCSS - GENERAL STYLING FOR THE WHOLE WEBSITE
│       ├── core
│       │   ├── mixins              // SCSS MIXINS
│       │   └── variables           // SCSS VARIABLES
│       ├── plugins                 // MATERIAL KIT PLUGINS
│       └── nextjs-material-kit.scss   // LINKER OF ALL THE SCSS FILES
├── pages                           // ACCESSIBLE ROUTES
│   ├── api
│   │   └── mail.js                 // API for Mail Service - sends mail towards the an address after contact form
│   │
│   ├── accelerated-life-testing
│   │   ├── [testingName].js        // (DYNAMIC PAGE) for all ALT Equipment
│   │   └── index.js                // ALT equipment mainpage
│   │
│   ├── case-studies
│   │   ├── [caseStudyName].js      // (DYNAMIC PAGE) for all Case Studies
│   │   └── index.js                // Case Study Base page
│   │
│   ├── roadmap
│   │   ├── accelerated-life-testing    // (DYNAMIC PAGE) for all Case Studies
│   │   │   └──[testingName].js         // (DYNAMIC PAGE) for all Pathway Page
│   │   │   └──accelerated-life-test.js // CUSTOM Pathway Page
│   │   │   └──index.js                 // Mainpage for ALT Roadmap
│   │   │
│   │   └── accelerated-life-testing    // (DYNAMIC PAGE) for all Case Studies
│   │       └──[testingName].js         // (DYNAMIC PAGE) for all Pathway Page
│   │       └──site-trial.js            // CUSTOM Pathway Page
│   │       └──index.js                 // Mainpage for DST Roadmap
│   │
│   ├── _app.js                     // CONTAINS THE BASIC LAYOUT OF ANY PAGE SERVED IN /pages
│   ├── _document.js                // CONTAINS ANY META TAGS OF ANY PAGE SERVED IN /pages
│   ├── _error.js                   // CONTAINS WHAT HAPPENS ON ERROR OR 404
│   ├── components.js
│   ├── about.js
│   ├── index.js
│   └── privacy-policy.js
│
├── components                      //REUSABLE COMPONENTS - small case are for following PAGES directory
│   ├── accelerated-life-testing    //  upper case are for general directory
│   │   ├── TestingCard.js          // CARD LAYOUT OF THE TESTING EQUIPMENT
│   │   ├── TestingModal.js         // MODAL VIEW OF THE TESTING EQUIPMENT
│   │   └── TestingPageContent.js   // PAGE VIEW OF THE TESTING EQUIPMENT
│   │
│   ├── case-studies
│   │   ├── CSCard.js               // CARD LAYOUT OF THE TESTING EQUIPMENT
│   │   ├── CSModal.js              // MODAL VIEW OF THE CASE STUDY
│   │   └── CSPageContent.js        // PAGE VIEW OF THE CASE STUDY
│   │
│   ├── Context                     // Contextual Component
│   │   └── index.js                // General Context - currently only has Contact Form Trigger and State
│   │
│   ├── Layout
│   │   ├── CallToAction.js                       // THIS IS EMBEDDED WITH FOOTER
│   │   ├── Contact.js
│   │   ├── Footer.js
│   │   ├── Head.js                               // CONTAINS ALL META TAGS
│   │   └── Navbar.js
│   │
│   ├── MaterialKit                 // ALL MATERIAL KIT COMPONENTS
│   │   └── ...
│   │
│   ├── roadmaps
│   │   └── StepperPathway.js       // CONTAINS ICONS AND COMPONENT SPECIFIC TO THE ROADMAPS
│   │
│   └── Team
│       └── Collage.js
│
├── data                                      //CONTAINS ALL GROUPED DATA SUCH AS:
│   ├── AcceleratedLifeTestingContent.js    // ALT
│   ├── CaseStudies.js                      // Case Studies
│   ├── Roadmap-AcceleratedLifeTesting.js   // Roadmap Pathways and Details
│   ├── Roadmap-DeriskingSiteTrials.js
│   └── Team.json                             // Team Details
│
├── pages-sections                            // SECTIONS OF PAGES - NAMED AFTER PAGES AND ROUTES OF PAGES
│   ├── AboutPage-Sections                    // ABOUT PAGE SECTIONS
│   │ ├── AboutLivingLab.js
│   │ └── MeetTheTeam.js
│   │
│   ├── accelerated-life-testing
│   │ └── AcceleratedLifeTesting-Sections     // ALT SECTIONS
│   │     ├── Description.js
│   │     └── Testings.js
│   │
│   ├── CaseStudies-Sections                  // CASE STUDIES SECTIONS
│   │   ├── CaseStudiesContent.js             // CONTENT OF A SPECIFIC CASE STUDY
│   │   ├── CaseStudiesList.js                // LISTING OF CASE STUDIES
│   │   └── CaseStudiesMainPageContent.js     // THE MAIN PAGE CASE STUDY
│   │
│   ├── HomePage-Sections                     // HOME PAGE SECTIONS
│   │   ├── About.js
│   │   ├── AcceleratedLifeTesting.js
│   │   ├── CaseStudies.js
│   │   ├── DeriskingSiteTrials.js
│   │   └── Partners.js
│   │
│   ├── PrivacyPolicy-Sections
│   │   └── PrivacyPolicyContent.js
│   │
│   └── roadmap                                 // ALL ABOUT ROADMAP
│       ├── RoadmapContent-Sections             // A SPECIFIC ROADMAP CONTENT LAYOUT
│       │ ├── Content.js
│       │ └── RoadmapPathwayPage.js
│       │
│       └── RoadmapMainPage-Sections            // ROADMAP MAIN PAGE CONTENT LAYOUT
│           ├── ALTDescription.js
│           ├── Description.js
│           ├── DSTDescription.js
│           └── RoadmapsCard.js
├── helpers                                     // HELPER FUNCTIONS
│   └── validation.js                           // CLIENT-SIDE and SERVER-SIDE DATA VALIDATION
├── middlewares                                 // BACKEND MIDDLEWARES
│   └── SMTP.js                                 // CONTAIN SMTP TRANSPORTER
│
└── public                    // PUBLIC STATIC ELEMENT - FOLLOWS CLOSELY THE DIRECTORY STRUCTURE OF PAGES
    └── img                                          // CONTAINS IMAGES THAT ARE BY REFERENCE
        ├── ...                                      // GENERAL IMAGES
        ├── accelerated-life-testing                 // ALT EQUIPMENT IMAGES
        │   └── ...                                  // THE IMAGES ARE DIVIDED INTO EQUIPMENT DIRECTORIES
        │
        ├── case-studies
        ├── logos
        ├── roadmap                                  // ROADMAP IMAGES FOR ALT AND DST
        │   ├── accelerated-life-testing
        │   └── derisking-site-trials
        │
        └── team                                     // TEAM IMAGES
            └── ...

// 1. Importing of Modules
import ... from "..."

// 2. Setting Up Components
const StyledStepButton = styled(StepButton)({
    ...
});

// 3. (START) Component Exporting Content
export const StepIcon = (props) => {
    ...
};

export const StepIconALT = (props) => {
    ...
};

const StepperPathway = ({ pathway, roadmapTitle, whiteFont }) => {
    ...
};

// 5. Default Export
export default StepperPathway;

MAIL_RECEIVING_ACCOUNT=####
SMTP_HOST=####
SMTP_PORT=####
SMTP_AUTH_PASS=####

$    docker build -t livinglab-site-v3 .

$    docker-compose up -d