Hyperspace BnB

Summary

Welcome to the 22nd century.

Hyperspace BnB is a twist on the modern vacation-booking websites of today. It includes a landing page, an informational page, and a mini-application to query listings for hotels (on other planets). It is fully-responsive and includes beautiful SVG graphics from undraw.co.

NextJS was utilized for its excellent developer experience as well as its server-side rendering capabilities. Upon visiting the "locations" page, the user is greeted with paginated listings of space hotels. This data comes from a mock API (mockend), which was configured to generate various combinations of sci-fi sounding names as well as placeholder data for each "hotel". 

I utilized the getStaticProps() function to serve this data, as it is completely static. This results in a quick-loading page that is able to be parsed by search engines.

I also took the initiative to learn TailwindCSS, as its reusable utility classes took much of the hassle out of styling this website. 

Technical Challenges

To challenge myself on this project, I developed custom pagination and filtering without relying on a third-party library. Filtering state data was easy enough, but adjusting pagination to account for a potentially smaller filtered dataset was difficult. To mitigate this problem, I created 2 state variables which hold the same data initially. Upon applying filters, the tool takes the initial data and applies filters. This modified data set is sent to the pagination functions to determine how many pagination breadcrumbs to build. This way, the initial data is still intact incase the user decides to remove all filters.