Star Wars 3D Models and Blueprints Project Walkthrough

November 2020

Source Code

About

Originally homework from CS50, where we were tasked to build a simple homepage using HTML, CSS, and JavaScript. I took this as an opportunity to go beyond this by practicing design and using advanced CSS methods. The first version of the website built was Flask is archived is this repo: Star-Wars-Front-End-Web-App-using-Flask. I later refactored it from Flask to Gatsby.js and Styled Components. The core of the application was built in November 2020, with two small updates in April 2021 and one major update in July 2021.

Product Features and Specifications

Technologies

Front-End

  • Gatbsy
  • React
  • Typescript
  • Javascript ES6+
  • Styled Components
  • GraphQL

Development

  • Git
  • GitHub
  • Codacy

Production

  • Netlify
  • Google Domains
  • Google Analytics

UX/UI Mocks and Graphic Design

Heavily relied on open-source assests to make use of the high quality material created or curated by the open-source community. For the full list, please refer to the attribute section of this GitHub repo.

Protoyped website with a Mobile-first design as practice for implementing the industry-standard principle.Below is an AdobeXD interactive prototype mock for the mobile view. Start clicking on the screen to see hints where you should click next (highlighted in blue).

iPhone

Created prototype in AdobeXD to prevent wasted engineering time, to practice UX/UI design, and to practice building from a UX/UI design specification. Below is an AdobeXD interactive prototype mock for the desktop view. Start clicking on the screen to see hints where you should click next (highlighted in blue).

MacBook Pro

Design and Architecture

Initially built this website with a backend server using the Python framework, Flask, which was primarily used for its templating capabilities offered by Jinja 2.0. The website was hosted on the free tier plan on Heroku, alongside two other websites using the free tier plan. The main problem with this approach was that it was both heavy and expensive. It was heavy in that Flask wasn't strictly neccessary to achieve templating. It was expensive in that the free tier plan on Heroku put the app to sleep after 30 minutes. Furthermore, the free dyno minutes would often expire by the 24th of each month, which effectively took down the website until the start of the next month. Therefore, after learning about React and the Jamstack, I put the two together and refactored this application by migrating from a server-based architecture with Flask to a static website architecture with Gatsby.js, and by switching cloud-hosting providers from Heroku to Netlify. The code is more simple, DRY, and modular with React. The website has better performance when loading pages with Gatsby and even supports offline capability with Progressive Web App service workers.

Refactored plain CSS with Styled Components as a CSS alternative for better code organization, to practice working with CSS-in-JS, and to practice working with a new technology by only reading documentaton. Furthermore, Styled Components are the combination of the element and the rules that style it, so it's also less verbose than something like CSSModules.

Production System Cost

Production Metrics

Lessons Learned