216 homepage v1 (FIX)

[jerohero]

From #256: Due to several issues with merging this branch with develop, I will be moving this PR to new branch with a new PR. In this branch I'll copy paste all changes from this branch specifically, so there won't be any odd overlapping changes from other branches.

This branch contains all new code from 216-homepage-v1, without containing old overlapping code from an old develop version.

closes #216

What is it supposed to do
This branch contains the first version of the home page (completely replacing the old one), meaning the components required for showing posts from the DB are being displayed. Posts are fetched dynamically and should implement lazy loading (not sure how to test this; might be easier to test once infinite scrolling is implemented). Posts are displayed according to the designs in Zeplin and are supposed to be fully responsive (min. 320px width). There's no algorithm that decides which posts are larger or should be on the top of the list (sorted by date). All data apart from the post's category and the reading time should be displaying the correct data. Bookmarking posts is not functional.

How can we test your branch
All the new features are located right at the start of the application. Try checking if all posts in the database get showed. Posts should be fetched in chunks of 6 posts, fetching more as you scroll down. Since the seeder only creates 4 posts, I recommend creating some new posts with titles that vary in length. Since you can't yet give posts a description, you should be using the DevTools of your preferred browser to insert some values. With this you can try to play around with the responsiveness. The posts should not break; they should not become unreadable or unusable and should not lose any precious style points. You could also try comparing the look of the posts with the designs (desktop, tablet and smartphone) in Zeplin. They should be as pixel perfect as possible.

General checklist

• [x] Tested happy flow.
• [x] Tested unhappy flow.
• [x] No unexpected exceptions.
• [x] No code with high complexity. (Big O)
• [x] EOF newline.
• [x] No floating comma's and spaces.
• [x] No unexpected/unhandled errors.
• [x] Lines no longer than 'guideline' in IDE.
• [x] Correct indentation.
• [x] No usage of legacy functionalities.
• [x] (JS) Curly braces on the sameline as reserved keywords (if () { instead of { on line below)
• [x] (JS) No double quotes.
• [x] (JS) Single newline above unique code structures and reserved keywords.
• [x] (JS) Variables bundled where possible.
• [x] (JS) No semi-colons except where they have a functional necessity, such as for-loops.

If relevant, front-end checklist

• [x] Responsive. (Desktop all the way to mobile 320px)
• [x] Using SCSS variables where relevant.
• [x] Relevant class names
• [x] No modified global SCSS properties, except if necessary and fully tested the impact.
• [x] Checked caniuse for more modern CSS properties.

If relevant, back-end checklist

• [ ] No unhandled promise rejections.
• [ ] Seeders still functional.
• [ ] No primary-key violations.
• [ ] Normalization, atleast 3NF.
• [ ] Used guards (middleware) where necessary and tested if route is guarded.

If relevant, test these browsers

• [x] Chrome
• [ ] Firefox
• [ ] Opera
• [x] Edge (dynamic loading feels rough/choppy, not sure if that's something that can be fixed)
• [ ] Safari

[AjobK]

Incorrectly outlined

[AjobK]

Clicking on bookmark on mobile redirects me to post

[AjobK]

Cutting off arrows? Likely has something to do with the first comment I sent

[AjobK]

Firefox works strangely as seen below. Title is cut off on mobile