Movie Time Machine

I made this application while I was job seeking. I wanted to interact with a third-party API while keeping up with my React and deployment skills.

I use the fetch API to query the data from the MovieDB API. Then I map through the results and display movie posters with titles. I used Git version control and the site is deployed on Netlify.

React
CSS3
Bootstrap
GitHub
A tablet-size screenshot of my "Movie Time Machine" project. It has a heading, descriptive text and a search box. The movies are displayed in 2-columns. The current movies showing are Thor: Love and Thunder, Prey, DC League of Superpets and Nope.
A desktop-size screenshot of my "Movie Time Machine" project. It has a heading, descriptive text and a search box. The movies are displayed in 3 columns. The current movies showing are Thor: Love and Thunder, Prey, and DC League of Superpets.
Design spec from Frontend Mentor

3-Column Component

I came across Frontend Mentor while looking for project ideas. This 3-column preview card component uses HTML and Sass. This element is hosted on CodePen.io.

HTML 5
Sass
Codepen
GitHub

iThemes Cart

This was one of the first projects I was tasked with at iThemes. Their checkout flow was over a decade old.

I had to orient myself with a dated code base and learn how to translate Figma designs into code. I updated the existing Smarty Template layout and modified their CSS to use Flexbox for responsiveness.

React
CSS3
Flexbox
GitHub

**This code is not publicly available. **

A sparse Shopping Cart page with black text on a white background. There is an ad in the middle with a light blue background. At the bottom of the page there is a bright green button to checkout.
Before
The newer version of the previous Shopping Cart page. This page has a light gray background with black and blue text. It has two columns, 1 with a product summary and the other with the price tag and checkout button. There is a curvy blue image in the corner and add-on purchase links along the bottom.
The billing address screen from the iThemes shopping cart. It has two columns. On the left is a form to input an address with a green button on the bottom. On the right there is a summary of the order and the price. At the top there is a progress indicator showing this is step 2 of 4. Along the bottom are 3 icons with text describing support, checkout and return services. The page has a gray background with a partial blue swirl in the bottom, left corner.