Inspiration

I wanted to see what I could do with the Wegmans API... see what information I can pull, see what I can do to display it in a nice way for the user. Basically, it was an investigation into what it creates to make an online store.

What it does

The website allows you to search for items in the Wegmans API using a simple string search (e.g. how you would use a searchbar). It sends a request to the API, and displays results in a table. A user can click on a result to see information about the product (manufacturer, a more descriptive name, price), and can opt to add a quantity to add it to their "Shopping Cart".

Once items are added to the shopping cart, we send a request to the API for each item's price + qty, and display the cost in the table seen (both individual price and total price).

How I built it

I built the WebApp using Node.js on the backend, and AngularJS on the front end. I created a mix of Angular controllers and components to handle different parts of the page (e.g. the shopping cart was a component where I simply pass it a list of selected items).

To build the AngularJS code, I used webpack to compile all of the libraries into a single bundle that I imported in my base template. My angular templates were built in HTML, but my base templates used by the pages were built in Jade, which is a kind of weird templating language... I don't really think I like it.

The majority of my RESTful routes all pointed to a common file that handled /api/*. I received requests there, and called api_service.js to handle formatting + handling requests.

Challenges I ran into

I attempted to send requests to the API for getting the total cart cost, so there wouldn't be any "off-by-one" errors, but I was unable to get good responses back then sending POST requests of type "application/json". I'm not totally sure why, because I was still getting a 200 back from the API, but I couldn't extract any of the information. I was able to successfully send requests in PostMan, which makes it a little confusing as to why I couldn't in Node... maybe I had to get the response back differently.

Accomplishments that I'm proud of

I hadn't really stood up a Node.js webapp before, so I was pretty proud of doing that. Also, I'm proud of the amount of hits on the API I was able to accomplish successfully. I fully expected more issues like I ran into when trying to hit /pricepublic/cart/total.

What I learned

I learned a decent bit about how to send requests to APIs, though I sort've hacked it in that I kiiiinda copy pasted the same request promise and made individual modifications for each function. I think I could do better next time by figuring out a generic way to send a request to the API, and pass a function pointer to handle the response.

I also ended up figuring out how to successfully save a bearer token, and automatically refresh it if it was expired. This was kinda nice, because I wasted some time building a UI to manually refresh it, and then I'd go and copy paste it, which was a little slow... maybe not an optimization I needed though.

What's next for Garrison's Wegmans Website using API

A couple things I'd like to attempt next is to attach cart items to the session's cookie, that way users can refresh the page w/o issue.

Share this project:
×

Updates