< Back to portfolio

Stories App

Tech stack: Node, Express, MongoDB

A simple application where users can post stories and comment on stories. Stories and comments have full CRUD functionality and access control, so that only authorised users can access them.

Code repository | Visit project

Stories app project

Modules

  • Dotenv for environment variables in development.
  • User authentication with Passport and Passport-google.
  • View engine with EJS.
  • Database ODM with mongoose.
  • Sessions with express-session.
  • Flash messages with connect-flash and express-messages.
  • Form validation with express-validator.
  • Secure HTTP headers with helmet.
  • Foundation CSS framework.

Implementation notes

  • For the database models I used MongoDB with nested sub-documents in key places. I did this as an exercise because nested data results in better read performance.
  • Form data is validated and sanitised to ensure a correct format and security.
  • Google+ ID, display name and avatar image are stored when the user logs in with google.

Stories app new story form

Features

General

  • Flash messages show messages for successful operations or unauthorised actions.

Stories

  • Logged in users can create stories.
  • Stories can have different privacy settings:
    • Public – Story is visible by everyone.
    • Private – Story is only visible by the user.
    • Unlisted – Story is only visible if you visit the URL directly.
  • The background color of the story changes to reflect the privacy setting.
  • Stories can have comments enabled or disabled.
  • Story bodies can use basic HTML styles like bold, italic, lists, links, etc. Other HTML and scripts are not allowed.
  • Clicking on the author name displays a page with all of that author’s public stories.

Users and authors

  • Users can log in with Google.
  • Authors can see all their stories on the dashboard page.
  • Authors have full CRUD functionality over their stories.
  • Authors can delete comments on their stories, but not edit them unless they own the comment.
  • Users can write comments on any story that allows comments.
  • Users have full CRUD functionality over their comments.

Stories app user dashboard

< Back to portfolio

^