🖼 Wireframes

Before writing a single line of code, I designed the entire website in Adobe XD. Using Bulma documentation as a frame of reference, each wireframe approximated a style that would eventually be compiled by Bulma and customized with SCSS.

📲 Mobile functionality

Particular importance was paid to the app's mobile-responsiveness. Shrinking the Desktop window will automatically display a hamburger menu in the navbar, featuring the same links and routes to pages when viewed fullscreen, except now vertically stacked and left-aligned. JQuery toggles the "active" class from false to true in order to display the menu and links it contains inside.

⚙️ API

For the FAQ page, I used JSONPlaceholder API to dynamically fill cards with Lorem Ipsum text. Who said Latin is a dead language?

🔋 Live websites Github repositories

🤔 Conclusions

👍

Overall, I like Vue the best because it's a lightweight and comfortable framework. It actually reminds me of JSX in React in terms of similar components, how props are passed and their MVC patterns. Being able to call "item of items" seems easier to me than passing a destructured prop that is then mapped onto new cards.

🤙

As a first time Typescript user, I really enjoyed the experience. Routing was easy to set up. Click-handling events and navbar menu class-toggling was straightforward. Angular doesn't use axios, which Vue and React do, to fetch data because it has its own library and services to do so. To call the API, I installed an injectable service that grabs Observable data, while the FAQ page subscribed to a function which sliced the first 10 entries.

👎

Least favorite was React. By design, it forces you to write html that is then rendered and returned, which causes frequent formatting issues. By the time you start writing html, you're already levels deep in the Class construction so the IDE no longer recognizes it as html.

Deployment was nothing short of a nightmare. In order to deploy, you have to set a homepage in the package.json. Then you have to refactor your code to add a public URL to the paths with less than accurate results. Then, add a 404.htmlto redirect back to index.html from the build folder, which was renamed to /docs because it's hosted on Github Pages. I'm still a little confused by the {Route}, {Routing}, {HashRouting} and {BrowserRouting} tags, when to use them, how they actually function or might override one another.