Cameron Rankin

Port

folio

Here are some of my favorite projects!

Applications may take a minute or two for the server to restart.

Resume app
  • What Not to Where
  • Technology Used:  
  • Express, React, NextJS, and Tailwind CSS
  • Description: 
  • Pulling from three separate weather APIs, a user is able to enter a city, pass the latitude and longitude to those APIs, and receive current, hourly, and weekly forecast and AQI information to the client. This data is viewable in a dashboard, a detailed view (by hour) in a table, and a modal giving information about what to wear given the current real feel temperature and weather.
  • Lessons Learned: 
  • This project solidified my understanding of creating my own APIs and ensuring the format is simliar between them. This project also helped me with TailwindCSS and going with a mobile-first design pattern.
  • Next Steps: 
  • I want to look into creating graphs to display the change (over time) of the elements in these tables. I would also like to summarize the data being presented into a more modern iOS/Android approach.
  • Github (Frontend)
Resume app
  • Bake It Your Own
  • Technology Used:  
  • Express, React, NextJS, DaisyUI, CheerioJS, MongoDB, and Tailwind CSS
  • Description: 
  • A user is able to pass the url of two websites (Cookiesandkate.com or Cupcakesandkalechips.com) and with CheerioJS, scrape the html of the website and display core information to the front page (recipe title, ingredients, directions, and more). If a recipe has already been parsed, the recipe's information will be saved to MongoDB for quicker retrieval.
  • Lessons Learned: 
  • This project taught me the capabilities of basic web scrapping (reviewing the html/css of websites) and determining what common properties exist. I also learned the functional differences between SQL/noSQL by learning the basics of MongoDB. I was able to create a MongoDB cluster and save recipe objects to the database and retrieve them to pass to the front-end.
  • Next Steps: 
  • I will be adding user authenticaion to let users save their favorite recipes to their account! From there, give users the ability to edit those recipes as custom favorites. A stretch goal is defaulting the front page to fetch random custom recipes that exist in the database based on popularity.
  • Github (Frontend)
Resume app
  • Kardnl Project
  • Technology Used:  
  • React, NextJS, EmailJS, Tailwind CSS, and Sanity CMS. APIs: Spotify, Apple Music, Youtube, and Soundcloud
  • Description: 
  • This is the landing page for my music production project. Users are able to read recent information about the Kardnl project, listen to recent releases/ DJ sets, find my upcoming shows, and contact me via email. My blog is powered by Sanity CMS.
  • Lessons Learned: 
  • This project centered around making a modern web app experience to highlight my creative project while still showcasing a clean design and consistent theme. By incorporating streaming APIs, I was able to make the site more interactive and the addtion of my blog and EPK, it acts as a venue for fans, labels, and venues to gather what they need to know about me as an artist.
Resume app
  • Possible Worlds
  • Technology Used:  
  • React, NextJS, EmailJS, and Tailwind CSS.
  • Description: 
  • This is the landing page for an amazing commerce site of unique crafts and wares!
  • Lessons Learned: 
  • The CEO/Founder of Possible Worlds provided a clear vision for this site in terms of colors, fonts, themes, and feel. I was able to work with them to take that information and create an authentic, warm, and intimiate experience to launch the store while also providing functionality to intake potential customer contact information.