Documentation
https://spacexlaunchesbyhs.herokuapp.com/
-
Technology Stack
HTML
CSS
Django
Jquery
Javascript
AJAX
API call
-
Contents and Style applied
As per task defined the filter card was created as static while other launches card were created dynamically as per number of contents.
Website was designed responsive using custom media query which style html page acording to display width ie. mobile, tablet and desktop view.
While launch info was fetch from spacex API call the image was stylized accordingly.
Font applied for overall webpage is in "Arial, Helvetica, sans-serif;" format.
Logo used for website is from "Icon8" website as embedded html.
-
Hosting
There are multiple hosting services such as Heroku, codelab, AWS, Azure, GCP, DigitalOcean,etc.
I have hosted this website on heroku. Heroku is a cloud platform as a service (PaaS) supporting several programming languages. As it provide python running application to host, which this website was developed on.
As it have build pack as python so django is able to work on serverside updates for the site.
-
Learning
I learned lot about webdevelopment while working on this project.
It helped me to get more comfortable with html, css, javascript, django and jquery.
New things I learned was about AJAX call which is used to update page without refreshing it.
Also learned how to create dinamic website and work with API calls to colled data and use acordingly.
-
Lighthouse score
Overall score:
Because of api call limit is 100 there is slow loading time which leads to performace drop and also image taking some time to load.
This can be improve further by displaying light weight images to the site or load site partially as per 100% dispalyed or by using multithreading approach.
improvements to make:
Image element
Minimize main thread work
Serve static assets with cache policy
Avoid an Excessive DOM size
Transfer should be samll
-
Potential changes to make for website to look better will be to go tor React js for more user friendly UI.
More over it requires some featur update such as need of search bar for searching, api call data fetching limit in filter, button to get more info about Launches, etc
I have added one feature to it ie. clear filter button.
