Live Project: HyperSpace BnB

See Components styled with TailwindCSS
See Data fetching with getStaticProps
See Custom pagination component

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.

• Designed custom pagination and sorting functions to filter fetched data based on user input
• Utilized getStaticProps() to fetch data from a mock API and pre-render the page to the user
• Developed and styled responsive layouts using TailwindCSS
• Created reusable functional components using React hooks