A simple micro-blogging site, developed to meet the requirements for GA SEI-R project 2 (MEN stack CRUD application).
Open up the deployed app at proj-xylem.herokuapp.com and you'll be greeted with a simple landing page, with a link to login with your Google account via OAuth:
Once logged in, you'll see your dashboard, which will show the posts of users you follow, your own posts, and, most importantly, a form for publishing new posts:
Opening a post by clicking on either its timestamp or the comment icon will display the post with all of its comments and a form for adding a new comment:
To see a user's profile, just click on their name on a post or comment. For your own profile, there is a link in the navigation menu at the top called "Profile." Profiles can show either the posts created by a user or the posts liked by that user, as well as a follow/unfollow button which is replaced by a link to edit your settings on your own profile:
Xylem is a Node.js application using a MongoDB, Express.js, and Node.js (MEN) solution stack following a Model-View-Controller (MVC) pattern. The project is hosted by Heroku.
Model → MongoDB
The NoSQL database MongoDB is used for data storage, with Mongoose
as a native JavaScript object document mapper (ODM). Schemas in the /models
directory model the database as well as define validation functions. In
production, the database is hosted by MongoDB Atlas (currently using a
Google Cloud Platform (GCP) cluster).
Server-side routing is managed by the Express.js web framework.
Views are preprocessed with Embedded JavaScript (EJS) templates (written
in HTML with embedded tags for JS, similar to PHP) from the /views directory
or served statically using the express.static() middleware from the
/public directory.
Controller → Node
The server is all written in JavaScript and runs as a Node.js
application. The package type is set to module such that modularity of the
code is handled via ES 2015 modules rather than Node's default CommonJS modules.
User Stories → Trello Board
This board describes features from a user's perspective, what the user might want to do (and sometimes why). Each card follows a general format of "AAU (As A User), I want to <action>, because <reason>" and falls into one of three categories:
- Ice Box, for user stories that may be added in the future, but are not required for minimum viable product (MVP).
- Current/MVP, for user stories that are required for MVP and need to be implemented before presenting the project.
- Completed, for user stories that have been successfully implemented.
Features → GitHub Project
Where the Trello board is focused on user stories, this Kanban-style project board is dedicated to features. Each feature is given an "enhancement" issue on the repo and attached to the relevant cards on Trello using the GitHub Power-Up. These issues are also automatically added to the project board under "To do" until a pull request is made to close them.
Entity Relationship Diagram (ERD) → Lucid Document
This entity relationship diagram (or entity-relationship model) was created with the ERD template on Lucidchart, which uses crow's foot notation for cardinality. This is the initial pass on modeling the database for Xylem, outlining the most important models for basic functionality of the project: User, Post, Comment (embedded), Like (embedded), and Follow; additionally, there are two ice box models that will be necessary for future updates: Image and Notification.
Wireframe → Adobe XD Design Review
This wireframe was done in Adobe XD, initially using the Wires wireframe kit. It outlines the user interface (UI) for the landing page, users, and posts, as well as basic user experience (UX) via a flow prototype.
Going forward, the client should run as a single page application (SPA) for better user experience (UX).
Further updated from there are planned as Version 1.1 (adding image uploads, user bios, and richtext) and 1.2 (adding notifications, tagging, and messaging).