Skip to content

4. Creation

Sjors Wijsman edited this page Jun 9, 2020 · 13 revisions

Table of Contents

4.1 Backend Progress (BEw1-3)

Week 1

Installed NPM and created a basic boilerplate for my feature with Express and some static HTML pages.

Week 2

Added a /video route that returns a video in .mp4 format. Added a /profile route that receives and returns profile ID route params. Installed EJS and created a Homepage that displays a location variable and a list rendered by EJS. Created a /users view that displays a user list by using EJS Includes. I haven't started creating the specific headers/footers/forms for my feature as I want to think about how I am going to set that up and what I need before actually creating it. I should probably also clean up the folder structure before I really start working on the feature.

Week 3

Initially I tried to make the upload process using Multer & Bodyparser but I had some issues getting that to work with my use case, as I need something that can easily parse both a file and some fields in a form. I ended up using Formidable as I found some useful resources and I liked the documentation a lot more. Right now, users can upload a single artwork with an image, title, artform and specify whether they made the art or not. I am pretty happy with what I got so far!

Week 4

Setup a database with MongoDB and atlas and connected to it through node. Stored user info in the database and made a connection to retrieve and update this user info. Users can now toggle between opus mode and upload their favourite artwork. This gets stored and retrieved from the database, ensuring the data has loaded before rendering a new view. Implemented sessions to store the preferred username of previous users.

4.2 First Prototype (PTw2)

The first prototype of Opus allows the user to switch to "Opus mode" where he can upload his favourite artwork. This artwork now shows up as his profile picture. Additionally, Opus now shows artwork of others instead of their selfies on the Discover page.

Prototype Result GIF