Backend and Frontend Template – Software Architecture Group 35

Latest version: (public Github mirror)

Project Structure

File Purpose What you do?
server/ Backend server code All your server code
server/ Everything about the server READ ME carefully!
client/ Frontend client code All your client code
client/ Everything about the client READ ME carefully!
docs/ Free online production deployment Deploy your app online in production mode
docs/ Local production deployment Deploy your app local in production mode


The version numbers in brackets indicate the tested versions but feel free to use more recent versions.
You can also use alternative tools if you know how to configure them (e.g., Firefox instead of Chrome).

Getting started

# Clone repository
git clone [email protected]:courses/dit341/group-00-web.git

# Change into the directory
cd group-00-web

# Setup backend
cd server && npm install
npm run dev

# Setup frontend
cd client && npm install
npm run serve

Check out the detailed instructions for backend and frontend.

Visual Studio Code (VSCode)

Open the server and client in separate VSCode workspaces or open the combined backend-frontend.code-workspace. Otherwise, workspace-specific settings don’t work properly.

System Definition (MS0)


Our system’s central focus is to create a social media platform that allows for the comparison of user created concepts/ideas, products, companies, users, really anything that a user can think of to compare. These user created “things” can then be compared to other “things” in which users can comment, like, dislike, provide evidence or arguments; essentially interact with each other and influence the overall metric that is used for comparison. The overall metric for these things by which they are being compared is their contribution to the destruction of the planet.


Is to provide a visually stimulating environment for debate and discourse in a social media type manner for the comparison of things in regards to their effect on planet longevity.

  • Home Page – For web application similar layout as pintrest. And for phone a layout similar to tiktik.
  • Profile – In the simplest version just a username and picture.
  • Create – A page for creating comparrisons.
  • About – Explainging the applications purpose and creators.

Entity-Relationship (ER) Diagram

ER Diagram

Teaser (MS3)

Opinge Teaser


View Github