Nathan's Clubhouse

Websites

Here are some of the websites I've made.


Ecommerce Fullstack

Features Angular front-end, Springboot back-end, MySQL Database, search functionality, pagination, catalogue categories, data validation, field auto-fill, and ordering functionality.

This was a massive project for me and has a lot of bells and whistles.

An image of the ecommerce website.

The search bar and categories on the sidebar both filter the database to only show relavent material. If there is nothing matching the search bar or if the back-end is not online the screen will show no items and display a message saying nothing is available.

An image of the ecommerce website.

After adding a few items to cart, you can click the cart button in the upper right. This will take you to your cart screen and show off all the items and prices. The price and item count next to the cart update whenever an item is added. Easy access buttons are available for cart items to increase/decrease quantity and even remove the item entirely.

An image of the ecommerce website.

Checking out takes you to... *drumroll*... the checkout screen. Amazing. The picture doesn't show it all, but you fill in your information here in dropdown boxes and fields. Most of them have at least a little bit of input validation such as making sure that only numbers are used where appropriate. The expiration field even auto sets to the most recent month/year and can't be changed to anything earlier. There's also functionality to match the shipping address and billing address to prevent the need of typing it all again.

An image of the ecommerce website.

If you attempt to click purchase without filling in the required fields, the website will prevent you from moving on.

An image of the ecommerce website.

After filling in everything correctly, an order is created with a unique order number using UUID and saved within the database.


World Map API

Features TypeScript with Angular and API usage.

This website allows the user to see information about any country in the world. Clicking on any of the countries in the world map will send an API request to api.worldbank.org and then display the related countries info in the red box on the right.

An image of the world map api website.

Hotel Reservation FullStack

Features multithreading and a dockerfile.

This website is for reserving a room at a fictional hotel. This site contains an ad for a live presentation which has date/time conversion based on timezones. At the top of the page is a few very out of place lines that are purely to show that multithreading is working.

An image of the reservation hotel website.

You select a start date and an end date and any rooms available in that time are shown. Any of these rooms can be reserved, and if they are, they will not show up as available during that time anymore. The price is displayed in multiple different currencies by utilizing pipes to convert them (doesn't covert the actual price, just adds the correct symbol).

An image of the reservation hotel website.

The last thing I did with this project is deploy it using Docker and AWS.