> For the complete documentation index, see [llms.txt](https://truman.gitbook.io/the-truman-platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://truman.gitbook.io/the-truman-platform/setting-up-truman/file-directory.md).

# File Directory

{% hint style="info" %}
The skeleton of Truman actually comes from the outline of another Node.js project (<https://github.com/sahat/hackathon-starter>).&#x20;

That repository has a lot of helpful and relevant information on the libraries, organization, setup, and FAQs on web development. Feel free to read through their README.md as well for a more expansive understanding of the project structure.
{% endhint %}

The Truman Platform (Truman) is a web application that uses a Node.js, MongoDB, Express.js and Pug templating engine webstack.

## The Model View Controller (MVC) framework

The project follows a basic MVC (Model View Controller) framework. The [**Model-View-Controller (MVC)**](https://www.geeksforgeeks.org/mvc-design-pattern/) framework is an architectural/design pattern that separates an application into three main logical components: **Model**, **View**, and **Controller**. Each architectural component is built to handle specific development aspects of an application.&#x20;

* The <mark style="color:green;">**View**</mark> components handles all the user interface logic for the application. It generates the user interface for the user.&#x20;
* The <mark style="color:red;">**Model**</mark> components handles all the database schemas, i.e. it defines what the database "structure" looks like and defines what information is stored.
* The <mark style="color:purple;">**Controller**</mark> components handles the interaction between the views and the models (i.e. between what appears to a user of an application and the database). The controller components act as intermediaries.&#x20;
  * The controller receives input from the view, uses logic to translate the input to a demand for the model, the model grabs the data, then the controller passes data from the model back to view for the user to see in a nice display.&#x20;

More information about the MVC framework can be found online if you are interested.

## Project Structure

The main node application (that defines the express server, connects to the MongoDB, and defines all the routes) is in **app.js**.

Below is a breakdown of the project files, with the name of each file and a brief description of each file's purpose.

<table data-full-width="false"><thead><tr><th width="299">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>config</strong>/passport.js</td><td><p>Passport Local and OAuth strategies, plus login middleware. </p><p>Handles login authentication of email and passwords.</p></td></tr><tr><td><mark style="color:purple;"><strong>controllers</strong></mark>/actors.js</td><td>Controller for actors. </td></tr><tr><td><mark style="color:purple;"><strong>controllers</strong></mark>/helpers.js</td><td>Helper Controller methods.</td></tr><tr><td><mark style="color:purple;"><strong>controllers</strong></mark>/notification.js</td><td>Controller for platform notifications.</td></tr><tr><td><mark style="color:purple;"><strong>controllers</strong></mark>/script.js</td><td>Controller for feed and user behavior.</td></tr><tr><td><mark style="color:purple;"><strong>controllers</strong></mark>/user.js</td><td>Controller for user.</td></tr><tr><td><mark style="color:red;"><strong>models</strong></mark>/Actor.js</td><td>Mongoose schema and model for Actor.</td></tr><tr><td><mark style="color:red;"><strong>models</strong></mark>/Notification.js</td><td>Mongoose schema and model for Notification.</td></tr><tr><td><mark style="color:red;"><strong>models</strong></mark>/Script.js</td><td>Mongoose schema and model for Script.</td></tr><tr><td><mark style="color:red;"><strong>models</strong></mark>/User.js</td><td>Mongoose schema and model for User.</td></tr><tr><td><strong>input</strong>/actors.csv</td><td>csv file defining the simulation actors (see <a href="/pages/dy76JNC2Vw1vy0Ooa4bQ#input-actors.csv">here</a>)</td></tr><tr><td><strong>input</strong>/notification (read, like).csv</td><td>csv file defining the simulation notifications (see <a href="/pages/dy76JNC2Vw1vy0Ooa4bQ#input-notifications-read-like-.csv">here</a>)</td></tr><tr><td><strong>input</strong>/notification (reply).csv</td><td>csv file defining the simulation notifications (see <a href="/pages/dy76JNC2Vw1vy0Ooa4bQ#input-notifications-reply-.csv">here</a>)</td></tr><tr><td><strong>input</strong>/posts.csv</td><td>csv file defining the simulation posts (see <a href="/pages/dy76JNC2Vw1vy0Ooa4bQ#input-posts.csv">here</a>)</td></tr><tr><td><strong>input</strong>/replies.csv</td><td>csv file defining the simulation comments on the posts (see <a href="/pages/dy76JNC2Vw1vy0Ooa4bQ#input-replies.csv">here</a>)</td></tr><tr><td><strong>post_pictures</strong></td><td>Directory containing all the files of the post photos</td></tr><tr><td><strong>profile_pictures</strong></td><td>Directory containing all the files of the actor profile photos</td></tr><tr><td><strong>public</strong>/</td><td>Static assets (fonts, css, js, img).</td></tr><tr><td><strong>public</strong>/<strong>css</strong>/notification.css</td><td>Main stylesheet for notifications.</td></tr><tr><td><strong>public</strong>/<strong>css</strong>/script.css</td><td>Main stylesheet for the social media timeline / feed (ex:posts). </td></tr><tr><td><strong>public</strong>/<strong>css</strong>/ui_layout.css</td><td>Main stylesheet for the app.</td></tr><tr><td><strong>public</strong>/<strong>js</strong>/actor.js</td><td>Client-side JavaScript for actor profile pages.</td></tr><tr><td><strong>public</strong>/<strong>js</strong>/main.js</td><td>Client-side JavaScript for the app.</td></tr><tr><td><strong>public</strong>/<strong>js</strong>/notification.js</td><td>Client-side JavaScript specific to the notification components and functionalities.</td></tr><tr><td><strong>public</strong>/<strong>js</strong>/postFunctionalities.js</td><td>Client-side JavaScript specific to post interactions (ex: liking/disliking and flagging posts and comments, adding comments).</td></tr><tr><td><strong>public</strong>/<strong>js</strong>/profile.js</td><td>Client-side JavaScript for profile forms (on <em>Sign Up</em> and <em>Update Your Profile</em> pages)</td></tr><tr><td><strong>public</strong>/<strong>js</strong>/script.js</td><td>Client-side JavaScript for feed/timeline</td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>account</strong></td><td>Folder containing the templates to pages related to a user's/participant's account</td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>account</strong>/forgot.pug</td><td><p>Template for <em>Forgot your Password</em> page</p><p></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>account</strong>/login.pug</td><td>Template for <em>Login</em> page</td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>account</strong>/profile.pug</td><td><p>Template for user's <em>Update My Profile</em> page</p><p><img src="/files/E82YNFhIeiXXekUBsssH" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>account</strong>/signup_info.pug</td><td><p>Template for <em>Tell Us a Little More About Yourself</em> page, shown initially upon user's sign up<br></p><p><img src="/files/d31FVqDWb0B3vZ4MOGbz" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>account</strong>/signup.pug</td><td>Template for <em>Sign</em> <em>Up</em> page</td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>partials</strong></td><td><p>Folder containing the templates of partial components. </p><p>These components are not complete pages, but rather components of the interface that appear in multiple places or repeatedly. Defining the components in one file and then including it with the code "include &#x3C;filename>" when needed reduces code redundancy and maintains consistency across components.</p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>partials</strong>/actorPost.pug</td><td><p>Partial template for an actor post</p><p><img src="/files/OnMGz3krJ5ZDUM0nuksa" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>partials</strong>/ui_flash.pug</td><td><p>Partial template for error, info and success flash notifications.</p><p><img src="/files/gbEApSLYwHrFpr5NZ44Y" alt="" data-size="original"></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>partials</strong>/ui_header.pug</td><td><p>Partial template for header (navigation bar)</p><p><img src="/files/7KzQMPtgmgLR0zWQ0pfe" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>partials</strong>/userCard.pug</td><td><p>Partial template for user card (displayed on timeline and displayed on user's <em>Profile</em> page)</p><p><img src="/files/VJJ0ofFhgegl2VeQ0FR1" alt="" data-size="original"></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/<strong>partials</strong>/userPost.pug</td><td><p>Partial template for a user's post</p><p><img src="/files/77LyuyYZXsN2abubSNro" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/actor.pug</td><td><p>Template for an actor's Profile</p><p><img src="/files/saRol6qadeZYTkXSbPFn" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/actors.pug</td><td><p>Template for the <em>Actor Directory</em> page. Only accessible to admin users.</p><p><img src="/files/4b2mI4ImPMk6i8NCkulA" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/com.pug</td><td><p>Template for the <em>Community Rules</em> page. </p><p><img src="/files/hztYOU8JAvFSBPWR69sN" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/completed.pug</td><td>Template for the <em>Completed</em> page. </td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/error.pug</td><td><p>Template for the <em>Error</em> page. </p><p><img src="/files/6j4G8QTQEuNhUEqeRn8d" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/info.pug</td><td><p>Template for the <em>Welcome to EatSnap.Love!</em> page</p><p><img src="/files/ywD2dh2tnEQV568EW0FT" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/me.pug</td><td><p>Template for the <em>Welcome to EatSnap.Love!</em> page</p><p><img src="/files/bDdX5n0ZGjjwEQszivyV" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/notification.pug</td><td><p>Template for the <em>Notifications</em> page</p><p><img src="/files/LgfYGftAtI8kjBH2D0oB" alt="" data-size="original"></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/script.pug</td><td><p>Template for the <em>Timeline/Feed</em> page</p><p><img src="/files/TvrjJUTKoWMFhZtGbXfY" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/test.pug</td><td>Template for the <em>Test Timeline/Feed</em> page (same as above). Can be used for testing purposes.</td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/tos.pug</td><td><p>Template for the <em>Terms of Services</em> page </p><p><img src="/files/DAZR5gW7FtjcEN4ajYSL" alt=""></p></td></tr><tr><td><mark style="color:green;"><strong>views</strong></mark>/ui_layout.pug</td><td>Base template. All templates extends (or are based off of) this template.</td></tr><tr><td>.dockerignore</td><td>Folder and files ignored by docker usage.</td></tr><tr><td>.env.example</td><td>Example template of .env file (to be copied and Your API keys, tokens, passwords and database URI.</td></tr><tr><td>.env</td><td>Environment variables file, where <a href="/pages/Z8lr9UFsUBSDso4OmW0c#step-2-create-and-edit-the-environment-file-.env">database URI</a>, and <a href="/pages/cy5zT4iDfitnwH2yCu7S">other simulation components</a> are defined.</td></tr><tr><td>.gitignore</td><td>Folder and files ignored by git.</td></tr><tr><td>app.js</td><td>The main application file.</td></tr><tr><td>data-export.js</td><td>JavaScript file that exports basic user information for each user on the site, into a readable csv file.</td></tr><tr><td>docker-compose.yml</td><td>Docker compose configuration file.</td></tr><tr><td>Dockerfile</td><td>Docker configuration file.</td></tr><tr><td>package.json</td><td>NPM dependencies.</td></tr><tr><td>package-lock.json</td><td>Contains exact versions of NPM dependencies in package.json.</td></tr><tr><td>populate.js</td><td>JavaScript file that populates the database with the csv files in the <code>/input</code> folder.</td></tr></tbody></table>

**Below are libraries that Truman uses and references to each library’s documentation.**

**Pug.js:** <https://pugjs.org/api/getting-started.html>

* Why do we use Pug?
  * Pug.js is a templating language rather than raw HTML. Most sites use some kind of templating language rather than raw HTML.
  * Using a templating language decreases the likelihood of bugs and security risks. It also is easier to write code in this templating language than in raw HTML.

**Semantic UI:** <https://semantic-ui.com/>

* Semantic UI is a front-end development framework that helps create beautiful, responsive layouts using human-friendly HTML. Almost all of our components are borrowed and customized from Semantic UI.