JavaScript Jungle

By Joshua Alan, Jacob Premo, Andrew Dotterer, and Giiaga Agha - Visit JavaScript Jungle

Table of Contents

• Application Architecture & Technologies Used
• Frontend Overview
• Backend Overview
• Getting Started
• Updates

Meant to be a clone of StackOverflow, the updated project can be found here, while the original project and repo can be found here and here, respectively.

Application Architecture

Frontend Overview

Pug

The template engine implemented by Node.js.

Homepage Filters

Sort threads by most Recent and most Popular

Backend Overview

Sequelize

Sequelize establishes the database, models, and seeders. Seeder data fills Pug templates.

Express

Express handles all routes using RESTful API and sends all information from the database.

API Routes (routes/index.js)

  const homeRouter = require('./home');
  const usersRouter = require('./users');
  const apiRouter = require('./api');
  const questionRouter = require('./questions');
  const postRouter = require('./posts');

Getting Started

Prerequisites

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/jm-alan/JSJ-retooling

2. Install NPM packages

   npm install

3. Make a .env file

   DB_USERNAME=junglemaster
   DB_PASSWORD=password
   DB_DATABASE=db_name
   DB_HOST=localhost
   JWT_SECRET=your_secret
   JWT_EXPIRES_IN=604800
   SESSION_SECRET=your_secret

4. Sequelize commands

   (First)
   npx dotenv sequelize db:create

   (Second)
   npx dotenv sequelize db:migrate

   (Third)
   npx dotenv sequelize db:seed:all

5. Start the app

   npm start

6. Go to localhost:8080

   http://localhost:8080/

Updates

12/07/2020

Fixed a bug where voting and delete functionality was not active on AJAX-rendered new answers to a question.

12/07/2020

Created a new primary site user whose account is not accessible to the public, protecting the seeded content from unnecessary modifications.

12/11/2020

A fatal security bug allowed a potential user to submit an additional "question" to a thread via public API, and then delete that question, causing a cascade delete of the thread, effectively allowing users to delete any question they want regardless of post owner. This has been patched.

12/13/2020

Fixed a previously unnoticed issue causing the "recent" page to display each individual page in reverse order.

12/13/2020

Finally fixed a major, but intermittent issue that would cause threads not to delete correctly when deleting their corresponding question. Due to the way the homepage query is written, this was also causing a cascade effect where a thread existing with no posts would prevent the rendering of the entire homepage. That poor dependency has not yet been patched, but it should not present again in the immediate future.

12/13/2020

API to post new questions now follows a more RESTful design.

12/13/2020

Phase 1 of abstracting many of the front-end functions into their own files to make the code more modular, and consequently more maintainable.

12/18/2020

Added a bit of flare to the vote buttons on hover/click, and added persistent visual indication that a given logged-in user has voted on a given post.

01/17/2021

Posts are now editable

01/17/2021

The implementation of the homepage fetch functionality has been rebuilt from the ground up, with new, modular, scalable API routes. This has the added benefit of patching the dreaded bodyless thread homepage render fail bug mentioned earlier.

03/15/2021

Updated Readme, CSS, & more