Added docs for path alias, date-fns and directory structure. (#171)

README.md

@@ -48,9 +48,13 @@ npm run start
 | **src/components**   | Reusable components go here                                                                                                                                                               |
 | **src/pages**        | Pages go here - a page is a component that is directly rendered by a Route in our react router                                                                                            |
 | **src/constants**    | Constants go here                                                                                                                                                                         |
-| **src/images**       | Contains images used throughout project                                                                                                                                                   |
-| src/contexts.js      | React contexts go here                                                                                                                                                                    |
-| src/index.js         | Entry point of app                                                                                                                                                                        |
+| **src/HOCs**         | Higher-order components used for frontend RBAC go here                                                                                                                                    |
+| **src/services**     | Service functions used by React components, either to make an HTTP request to backend or process information or extract data, go here                                                     |
+| src/storybook        | Introduction to storybook and non-component specific stories go here                                                                                                                      |
+| src/images           | Contains images used throughout project                                                                                                                                                   |
+| src/contexts.ts      | React contexts go here                                                                                                                                                                    |
+| src/config.ts        | Environment variables are gathered into one single config object here                                                                                                                     |
+| src/index.tsx        | Entry point of app                                                                                                                                                                        |
 | src/serviceWorker.js | Runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages                                 |
 | .env                 | Environment variables                                                                                                                                                                     |
 | firebase.json        | Defines Firebase Hosting configuration                                                                                                                                                    |

guides/miscellaneous/date_time_library_to_use.md

@@ -0,0 +1,7 @@
+# Date Time Library To Use
+
+Use **date-fns** for any of your date time needs. Do not use **moment.js** or any other DateTime library, nor should you directly use the DateTime API offered by JS/TS.
+
+We used to have moment.js as our main DateTime library, but switched to date-fns for very good reasons that can be found [here](https://github.com/you-dont-need/You-Dont-Need-Momentjs).
+
+## Use date-fns please!

guides/path_alias/add_path_alias.md

@@ -0,0 +1,51 @@
+# Add Path Aliases
+
+Follow the steps below to add your own path alias.
+
+### 1. Determine the name and the destination to point to for your path alias
+
+The name of the path alias should be in UpperCamelCase and it should be as short and concise as possible.
+
+The destination to point to should not coincide with the destination that an already existing path alias points to. We don't want multiple path aliases pointing to the same place.
+
+### 2. Navigate to ./tsconfig.paths.json and add your path alias
+
+Go to the `paths` property of `compilerOptions` and add a new key-value pair
+
+- `"@YourPathAlias": ["DestinationPathToReplace"]`
+
+Example: `"@Pages": ["src/pages"]`
+
+### 3. Navigate to ./config-overrides.js and add your path alias
+
+Go to the line starting with `module.exports` (should be at the end of the file) then look at `addWebpackAlias`. Add your path alias as a parameter to `addWebpackAlias`
+
+- `'@YourPathAlias': path.resolve(__dirname, 'DestinationPathToReplace')`
+
+Example: `'@Images': path.resolve(__dirname, './src/images')`
+
+### 4. Navigate to ./eslintrc and add your path alias
+
+Go to the `rules` property of the config JSON object, then to the `import/order` property of `rules`. Then, go to the `pathGroups` property and add your path alias
+
+```
+  {
+    "pattern": "@YourPathAlias/*",
+    "group": "internal"
+  }
+```
+
+Example:
+
+```
+{
+  "pattern": "@Constants/*",
+  "group": "internal"
+}
+```
+
+### 5. Restart VSCode to start using the path alias
+
+Now you can use the path aliases whenever you need to, making import statements much cleaner and easier to read!
+
+**Please make sure that your path alias string and destination path string all match up across all three files mentioned**

guides/path_alias/path_alias.md

@@ -0,0 +1,41 @@
+# Path Aliases
+
+## Definition
+
+A path alias is a string mapped to a specific file/folder path that can be either relative or absolute.
+
+A path alias still represents the actual file/folder path and has the option of reaching to the subfolder(s) and subfile(s) of the path it replaces (if that path leads to a folder).
+
+## Rationale
+
+Writing the filepaths for import statements can be a big pain. An example of this is:
+
+- The folder **src/pages/EventDetailsPage/components/EventDetails** has an index.tsx file. This index file imports components Tag, Card and Button from **src/components**.
+- This means that to import Tag, Card and Button from **src/components** to index.tsx without using path aliases, a developer would have to write an import statement like this: `import { Tag, Card, Button } from '../../../../components';`.
+- This is rather cumbersome to write and unclean to look at, which will multiply even more if there are multiple files/folders to import from.
+
+To greatly alleviate this issue, path aliases were onboarded. They help make the import paths a lot less burdensome to write and to look at.
+
+## Available Path Aliases
+
+Currently in this codebase, there are 8 path aliases in total. They are:
+
+- `@Pages` - Points to **src/pages**
+- `@Constants` - Points to **src/constants**
+- `@SharedComponents` - Points to **src/components**
+- `@Services` - Points to **src/services**
+- `@HOCs` - Points to **src/HOCs**
+- `@Images` - Points to **src/images**
+- `@Contexts` - Points to **src/contexts**
+- `@Config` - Points to **src/config**
+
+## Usage
+
+`import <Stuff being imported from file/folder> from '<Path alias>';`
+
+To use the example elaborated earlier in the _Rationale_ paragraph, using path aliases would give:
+`import { Tag, Card, Button } from '@SharedComponents';`
+
+## Add More Path Aliases
+
+Refer to this [doc](./add_path_alias.md).