wip, adding info

docs/pages/Onboarding/Backend.md

@@ -6,17 +6,17 @@ parent: Onboarding
 
 # Backend
 
-The backend is comprised of a variety of systems and technologies. The application is a REST API created using Express.js that communicates with services such as a MongoDB for data storage, stripe for payments, and AWS (Amazon Web Services) Simple Email Service (SES)for sending dynamic emails to users. The following will expand on the require skill set to use each of these technologies. 
+The backend is comprised of a variety of systems and technologies. The application is a REST API created using Express.js that communicates with services such as a MongoDB for data storage, stripe for payments, and AWS (Amazon Web Services) Simple Email Service (SES)for sending dynamic emails to users. Additionally, Redis is used to hold session data to and to perform asynchronous tasks on the server side. The following will expand on the require skill set to use each of these technologies.
 
 ## Table of contents
+
 {: .no_toc .text-delta }
 
 1. TOC
-{:toc}
+   {:toc}
 
 ---
 
-
 ## Express.js
 
 #### **To Get a solid understanding of Express.js and its inner workings watch the following videos**
@@ -25,29 +25,203 @@ The backend is comprised of a variety of systems and technologies. The applicati
 - [REST API Explainer Video through Express.js](https://www.youtube.com/watch?v=-MTSQjw5DrM)
 - [Middleware Explainer Video](https://www.youtube.com/watch?v=lY6icfhap2o)
 
-Express.js is a Node.js framework that allows users to create a "REST API". This means that the backend API will respond to HTTP requests such as `GET, POST, EDIT,DELETE` to specific routes such as `/users, /info, ...`
+Express.js is a Node.js framework that allows users to create a "REST API". This means that the backend API will respond to HTTP requests such as `GET, POST, EDIT, DELETE` to specific routes such as `/users, /info, /announcement/create, ...`
 
-Additionally, Redis is used to create `Subscribers` to perform asynchronous tasks on the server side.
+### Middlewares
 
-### Routes & Routers
+When a request is sent to a specific route it needs to be properly processed until the server can identify what the request is asking for to then provide it with the correct response or in the case of an invalid request, an error. The processing of the data is done through `middlewares`. These are functions that take the request data and modify it in specific ways so that a response can be formed. Some middlewares are pre-made and can be used installed through Node.js packages, for example, the `bodyParser` middleware is a package that takes the request data and parses the body of the request or the data that was sent along with it and places it into a JSON object. However you can also create your own middlewares, any function that takes in `(request, response, next)` as arguments can be a middleware. These functions will execute some code and either modify the `request` object and then call `next()` which will then pass that information to the next middleware. The `request` object continues to get modified by different middlewares until the final middleware terminates the request by changing the `status()` of the `response` object, The final middleware can also send along data or information back to the user by using `send()`.
 
-Each set of routes get their own router file. These are stored in `server/src/routes`. Inside each router file a specific route and HTTP request type are mapped to a certain service. However, to make the codebase more dynamic the connection between the routes and the services are expanded to go through a `controller`.
+Example middleware and usage:
 
-### Controllers 
+```jsx
+/**
+ * Checks whether the user is signed in.
+ * @param {Object} req
+ * @param {Object} res
+ * @param {Function} next
+ * @return {*}
+ */
+const checkLoggedIn = (req, res, next) => {
+  if (req.isAuthenticated()) {
+    return next();
+  } else {
+    return res
+      .status(403)
+      .send({ message: "Please sign in to access this route!" });
+  }
+};
 
-Controllers are specific [middlewares](#to-get-a-solid-understanding-of-expressjs-and-its-inner-workings-watch-the-following-videos) used to perform some processing on the HTTP request before they are sent to [`services`](#services). 
-
-### Services
+app.get("/", checkLoggedIn, otherMiddleware, finalMiddleware);
+```
 
-Each service gets one or more file which directly works with the particular technology. For example, although MongoDB is one part of the tech stack   
+You can see how in the above message the response is a `403` error if the user is not logged in. However, if the user is logged in the `next()` function is called to send the data to the next middleware.
 
-### Subscribers 
+### Routes & Routers
 
+Each set of routes get their own router file. Inside each router file a specific route and HTTP request type are mapped to a certain service. To make the codebase more dynamic the connection between the routes and the services are expanded to go through a `controller`.
+
+Example router:
+
+```jsx
+const express = require("express");
+const { getTimeline } = require("../controllers/TimelineController");
+const router = express.Router();
+
+/**
+ * @swagger
+ * /timeline:
+ *   get:
+ *     summary: Get all the timeline events
+ *     responses:
+ *       '200':
+ *         description: Successfully retrieved the timeline events
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 timelines:
+ *                   type: array
+ *                   items:
+ *                     $ref: '#components/schemas/Timeline'
+ */
+router.get("/", getTimeline);
+
+app.use("/timeline", router);
+```
+
+### Controllers
+
+Controllers are specific middlewares used to perform some processing on the HTTP requests before they are sent to `services`. In the above example, `getTimeline` is one middleware from the timeline controller.
+
+Example controller:
+
+```jsx
+const AnnouncementServices = require("../services/AnnouncementServices");
+
+const AnnouncementController = {
+  /**
+   * Gets all announcements
+   */
+  async getAnnouncement(req, res, next) {
+    try {
+      const allAnnouncements = await AnnouncementServices.getAllAnnouncements();
+      return res.status(200).send({ announcements: allAnnouncements });
+    } catch (e) {
+      next(e);
+    }
+  },
+
+  /**
+   * Gets all completed announcements of a user
+   */
+  async getCompletedAnnouncements(req, res, next) {
+    const currentUser = req.user;
+    try {
+      const completedAnnouncements =
+        await AnnouncementServices.getCompletedAnnouncements(currentUser);
+      return res.status(200).send({ announcements: completedAnnouncements });
+    } catch (e) {
+      next(e);
+    }
+  },
+
+  async otherMiddleware (req, res, next) {...},
+};
+
+module.exports = AnnouncementController;
+
+```
 
+### Services
 
+Each service gets one or more file which directly works with the particular technology. However, although MongoDB is one service the majority of the service files use it since different parts of the website have their own section of the database. Each service file contains functions that communicate with their service without any interaction with the HTTP request. The functions return key pieces of information that was received from the service back to the controller.
+
+Example service file:
+
+```jsx
+const SES = new SESv2Client({ region: "ca-central-1" });
+
+const EmailServices = {
+  /**
+   * Create and save an email template
+   * @param {String} templateName name of the new template
+   * @param {String} html html body
+   * @param {String} subject subject of the email
+   * @param {String} text text body
+   * @see {@link https://aws.amazon.com/blogs/messaging-and-targeting/introducing-email-templates-and-bulk-sending/} for the filling of `html` and `text`
+   * @returns {Promise} promise
+   */
+  async createTemplate(templateName, html, subject, text) {
+    const params = {
+      TemplateContent: {
+        Html: html,
+        Subject: subject,
+        Text: text,
+      },
+      TemplateName: templateName,
+    };
+
+    const command = new CreateEmailTemplateCommand(params);
+
+    return SES.send(command);
+  },
+
+  /**
+   * Send bulk personalized template emails
+   * @param {Object[]} bulkEmailEntries an array containing arrays of email addresses
+   * @param {String} templateName name of template used
+   * @param {Object} defaultTemplateData defult data to be filled in the template
+   * @param {String} fromAddress the email adress the email is being sent from
+   * @returns {Promise} promise
+   */
+  async sendBulkTemplateEmail(
+    bulkEmailEntries,
+    templateName,
+    defaultTemplateData,
+    fromAddress
+  ) {
+    const params = {
+      BulkEmailEntries: bulkEmailEntries.map((entry) => {
+        return {
+          Destination: {
+            ToAddresses: [...entry],
+          },
+        };
+      }),
+      DefaultContent: {
+        Template: {
+          TemplateData: JSON.stringify(defaultTemplateData),
+          TemplateName: templateName,
+        },
+      },
+
+      FromEmailAddress: fromAddress,
+    };
+
+    const command = new SendBulkEmailCommand(params);
+
+    return SES.send(command);
+  },
+};
+
+module.exports = EmailServices;
+```
+
+
+## Redis 
+
+### Bull
+
+
+### Subscribers
 
 ## MongoDB
 
+### Mongoose
+
+### Models
+
 ## AWS SES
 
 ## Stripe

docs/pages/Onboarding/Docker.md

@@ -0,0 +1,5 @@
+---
+layout: default
+title: Docker
+parent: Onboarding
+---

docs/pages/Onboarding/Documentation.md

@@ -0,0 +1,5 @@
+---
+layout: default
+title: Documentation
+parent: Onboarding
+---

docs/pages/Onboarding/Frontend.md

@@ -81,7 +81,7 @@ When naming components make sure to use Pascal Case, e.g., FirstName and LastNam
 ```jsx
 import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
-import './yourFile.sscss';
+import './yourFile.scss';
 ```
 
 These three lines are pretty important! 
@@ -93,7 +93,7 @@ These three lines are pretty important!
 
 2. Secondly, PropTypes allows for built-in type checking when you pass in any props to your component.
 
-3. Lastly, make sure to import your .sscss file! Sscss includes all the features of scss but has more features. You can treat your Sscss file as a regular scss file.
+3. Lastly, make sure to import your .scss file! Scss includes all the features of scss but has more features. You can treat your Scss file as a regular scss file.
 
 In addition to those three important lines, you might also need to import images or components!
 
@@ -162,7 +162,7 @@ React syntax is slightly different than HTML, so here is the general format of a
 {: .new-note }
 We refer to anything inside the tag, this can be plain text, other tags or components as the children.
 
-You can add classes using `className` to specify multiple styles, these classes are imported from your Sscss file, or you can add style similar to an object.
+You can add classes using `className` to specify multiple styles, these classes are imported from your Scss file, or you can add style similar to an object.
 
 #### Multiple Classes
 
@@ -204,9 +204,9 @@ const styleTag = {
 {: .new-note }
 Generally, all the tags that you use in HTML can be used in React.
 
-### Important Sscss Notes
+### Important Scss Notes
 
-Once again Sscss, works the exact same way as scss. We keep all the style code in another file and import it to our .jsx file.
+Once again Scss, works the exact same way as scss. We keep all the style code in another file and import it to our .jsx file.
 
 When you’re writing your style code, here are some important styles you should keep in mind as well as general syntax!
 
@@ -345,7 +345,7 @@ export const ParentComponent = () => {
 
 Note that the line `<h1>Hello</h1>` is the children prop! 
 
-In this example above, due to `deafultProps`, although `propBool` isn’t stated, it will automatically be assigned the value **true**.
+In this example above, due to `defaultProps`, although `propBool` isn’t stated, it will automatically be assigned the value **true**.
 
 {: .confused}
 Let us know how we can help and improve this section! Feel free to check out the link [here](https://www.freecodecamp.org/news/how-to-use-proptypes-in-react/) as well, we mentioned the main propTypes you’ll need but there are others that you can look into!
@@ -480,7 +480,7 @@ Finally, you can change the size of your screen and check for responsiveness! Th
 
 And you've made it to the end!🎉 Thank you for reading up to here, I really appreciate it!
 
-To be completetly honest, I'm still learning too so please send me a message if you're still confused or need further clarification on something!
+To be completely honest, I'm still learning too so please send me a message if you're still confused or need further clarification on something!
 
 (🤫I also didn't test any of the code that I included on this document, so please let me know if there are any issues)
 

docs/pages/Onboarding/GitHub.md

@@ -30,7 +30,7 @@ There are two ways to clone repositories on GitHub, either through your command
 
 2. Click the green **Code** button, and copy the **HTTPS key**
 
-    ![github-https]('../../../../imgs/github-code-repo-https.png')
+    ![github-https]('/../../../imgs/github-code-repo.png)
 
 3. Open your command prompt
     + On Windows, search up **cmd** or **Command Prompt** by clicking on the Windows Key
@@ -55,7 +55,7 @@ Before beginning make sure to download [GitHub Desktop](https://desktop.github.c
 
 2. Click the green **Code** button, and click "Open with GitHub Desktop"
 
-    ![github-https]('../../../../imgs/github-code-repo-desktop.png')
+    ![github-https]('/../../../imgs/github-code-repo-desktop.png)
 
 3. Follow the GitHub Desktop prompts!
 
@@ -150,4 +150,11 @@ Some other important Git commands related to branching!
 * To pull from a specific branch
     ```
     git pull origin <branch-name>
-    ```
+    ```
+
+## Using Git & Github in VS Code
+
+### Changing Branches
+
+### Making Commits
+

docs/pages/Onboarding/Onboarding.md

@@ -9,7 +9,4 @@ has_children: true
 
 To make sure that you have the skills and knowledge base required to effectivity contribute to this project please complete this Onboarding Package.
 
-
-## Project Architecture
-
-This project is broken down into two (2) independent applications that communicate with each other to form a full-stack website. (To get an in depth description see [Project Architecture](/orientation-website/pages/Project%20Architecture) 
+The following is what we believe is relevant and necessary to know. However, you might find it not to be the best learning strategy for you. In that case we highly recommend that you supplement your learning by watching these [YouTube videos](https://youtube.com/playlist?list=PLSEVyJI0b7c_Z7OTrM0YQU2VUt8sVo_Pt).

docs/pages/Onboarding/Security.md

@@ -0,0 +1,5 @@
+---
+layout: default
+title: Security
+parent: Onboarding
+---