File Directory
The skeleton of Truman actually comes from the outline of another Node.js project (https://github.com/sahat/hackathon-starter).
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.
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) 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.
The View components handles all the user interface logic for the application. It generates the user interface for the user.
The Model components handles all the database schemas, i.e. it defines what the database "structure" looks like and defines what information is stored.
The Controller 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.
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.
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.
config/passport.js
Passport Local and OAuth strategies, plus login middleware.
Handles login authentication of email and passwords.
controllers/actors.js
Controller for actors.
controllers/helpers.js
Helper Controller methods.
controllers/notification.js
Controller for platform notifications.
controllers/script.js
Controller for feed and user behavior.
controllers/user.js
Controller for user.
models/Actor.js
Mongoose schema and model for Actor.
models/Notification.js
Mongoose schema and model for Notification.
models/Script.js
Mongoose schema and model for Script.
models/User.js
Mongoose schema and model for User.
input/actors.csv
input/notification (read, like).csv
input/notification (reply).csv
input/posts.csv
input/replies.csv
post_pictures
Directory containing all the files of the post photos
profile_pictures
Directory containing all the files of the actor profile photos
public/
Static assets (fonts, css, js, img).
public/css/notification.css
Main stylesheet for notifications.
public/css/script.css
Main stylesheet for the social media timeline / feed (ex:posts).
public/css/ui_layout.css
Main stylesheet for the app.
public/js/actor.js
Client-side JavaScript for actor profile pages.
public/js/main.js
Client-side JavaScript for the app.
public/js/notification.js
Client-side JavaScript specific to the notification components and functionalities.
public/js/postFunctionalities.js
Client-side JavaScript specific to post interactions (ex: liking/disliking and flagging posts and comments, adding comments).
public/js/profile.js
Client-side JavaScript for profile forms (on Sign Up and Update Your Profile pages)
public/js/script.js
Client-side JavaScript for feed/timeline
views/account
Folder containing the templates to pages related to a user's/participant's account
views/account/forgot.pug
Template for Forgot your Password page
views/account/login.pug
Template for Login page
views/account/profile.pug
Template for user's Update My Profile page
views/account/signup_info.pug
Template for Tell Us a Little More About Yourself page, shown initially upon user's sign up
views/account/signup.pug
Template for Sign Up page
views/partials
Folder containing the templates of partial components.
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 <filename>" when needed reduces code redundancy and maintains consistency across components.
views/partials/actorPost.pug
Partial template for an actor post
views/partials/ui_flash.pug
Partial template for error, info and success flash notifications.
views/partials/ui_header.pug
Partial template for header (navigation bar)
views/partials/userCard.pug
Partial template for user card (displayed on timeline and displayed on user's Profile page)
views/partials/userPost.pug
Partial template for a user's post
views/actor.pug
Template for an actor's Profile
views/actors.pug
Template for the Actor Directory page. Only accessible to admin users.
views/com.pug
Template for the Community Rules page.
views/completed.pug
Template for the Completed page.
views/error.pug
Template for the Error page.
views/info.pug
Template for the Welcome to EatSnap.Love! page
views/me.pug
Template for the Welcome to EatSnap.Love! page
views/notification.pug
Template for the Notifications page
views/script.pug
Template for the Timeline/Feed page
views/test.pug
Template for the Test Timeline/Feed page (same as above). Can be used for testing purposes.
views/tos.pug
Template for the Terms of Services page
views/ui_layout.pug
Base template. All templates extends (or are based off of) this template.
.dockerignore
Folder and files ignored by docker usage.
.env.example
Example template of .env file (to be copied and Your API keys, tokens, passwords and database URI.
.env
.gitignore
Folder and files ignored by git.
app.js
The main application file.
data-export.js
JavaScript file that exports basic user information for each user on the site, into a readable csv file.
docker-compose.yml
Docker compose configuration file.
Dockerfile
Docker configuration file.
package.json
NPM dependencies.
package-lock.json
Contains exact versions of NPM dependencies in package.json.
populate.js
JavaScript file that populates the database with the csv files in the /input folder.
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.
Last updated
