My Projects

MySpotifyInsights | React + Flask Web App

For this project, I led a team of 4 students in my Senior Project course to develop a full-stack application with React and Flask. We utilized the Spotify Web API, allowing users to view their personal Spotify data such as top tracks, artists, albums, audio features, and also give personalized song recommendations tailored to their unique music taste. Normally, Spotify only allows users to see their Spotify stats or "Spotify Wrapped" at the end of the year, however with MySpotifyInsights, users may view their listening data any time they chose.

React
Styled-Components
Spotify API
Chart.js
Python
Flask
Heroku

View Site See Code

SFCarRental | React + NestJS Website

I built a full-stack application that serves as a website for a car rental company, built with React/Redux on the frontend and NestJS on the backend. I created this not only to build upon my frontend skill set but to also integrate a backend with the Node.js framework, NestJS. For my frontend client, I used GraphQL's Apollo Client.

React
Redux
NestJS
TypeScript
JavaScript
Tailwind CSS
Styled-Components
GraphQL
Node.js
TypeORM
Express.js
MySQL
Heroku

View Site See Code

XCAPE | Travel Agency Website

This is a travel agency website I created with React and GatsbyJS. Building this site has helped me learn GraphQL querying to provide optimized images that can improve overall performance. I also learned how to utilize React Styled-Components as an effective tool for styling various components. As a developer who values both software performance and efficiency, I have come to appreciate Gatsby's fast speeds and its seamless developer experience, along with the many other advantages that come with static site generators.

React
Styled-Components
Gatsby
GraphQL

View Site See Code

Photo Search Gallery | Web App

This is a web app I made after learning the fundamentals of React Hooks. It allows users to search for photos that others have posted on Unsplash.com via Unsplash API. Here, I gained experience in fetching and handling data from a third-party REST API. I utilized React Hooks and the JS Fetch API to populate this data to my custom UI.

React
Unsplash API
HTML
CSS

View Site See Code

COLORS | Landing Page

This is a landing page I created for a fictional company called COLORS. I built this site with the intention to develop my skills with SCSS styling. I included some vibrant color schemes via uiGradients and also implemented some JavaScript to create a smooth navbar highlighting effect.

HTML
SCSS
Javascript
Smooth Scroll

View Site See Code

OnABudget | Web App

OnABudget is a responsive web application that can be used as a monthly budget tracker. This was my first web development project I built back in 2018. It was my first time working with a Javascript Design Pattern and applying data structures to a project outside of my coursework. This web app can be useful for individuals who need to effectively save and budget their money to achieve their long-term goals. Since then, I believe my web development skills and eye for visually appealing design have sharpened.

HTML
CSS
BootStrap
Vanilla JavaScript