• 🔭 Showcase Project Locally E-commerce

  • locally-capstone.vercel.app

• 🔭 Showcase Project Rhythm Music

  • rhythmmusic.netlify.app

• Connect With Me! LinkedIn

• 📫 How to reach me [email protected]

• 📄 Find out more about experiences My Resume

https://rhythmmusic.netlify.app/

Backend | Frontend

Rhythm music app was created to discover, share and curate playlists! The app is a full-fledged music app with all the core features of a modern music app, such as account authentication, the ability to save and create shareable links, and most importantly discover tunes from a plethora of genres. Rhythm is also fully responsive for all screen sizes with an intuitive and beautifully sleek UI. The project proved to be an incredible undertaking to build out such a feature-rich application with many moving parts. (1.5 months to develop)

Tech Stack Frontend

• React JS

• Redux Took Kit – Redux was a treat to use to manage states around the complexities of handling music player functionality and user session data after authentication. RTK query was also used to automate data fetching & caching for CRUD playlist functionality. Although I’ve used useContext API before, RTK will be my go-to for state management for every future project for its amazing features.

• Tailwind – Was entirely done with tailwind, creating the amazing-looking UI.

Backend

• NodeJS, Express - Entire backend was built to handle charts/ genre data, user accounts, shareable links, and many more features.

• MongoDB, Mongoose – MongoDB/mongoose is used to handle storing all user, playlists, and song data. Users are able to register for an account, save playlists, and many more features using this excellent document oriented database.

• Becrypt, JWT – Used to help hashing, comparing, and authenticating users.

https://locally-capstone.vercel.app/

GitHub Repo

Locally is my NextJS Ecommerce website centered around giving local boutique handcraft makers an accessible B2C platform. This project was a part of my final capstone project for my time at Brain station. The website is a feature-packed with e-commerce cart and checkout functionality, many dynamic routes and a beautiful UI. The project was a big undertaking considering the short time span I had and the functionality I had to develop for an MVP. Although I gained so much knowledge about new technologies, the app was also fulfilling to create because of the social responsibility and sustainability behind the project. (2 Weeks to Develop)

Tech stack:

• Next JS - was a vital framework and was the best option for developing an ecommerce platform like this.

  • An intuitive dynamic routes and page-based routing, building dynamic filebase routing for product, makers and categories pages.

  • Pre-rendering, server-side rendering (SSR) are supported for fast load times and improved SEO

  • Automatic code splitting for faster page loads.

  • Client-side routing with optimized prefetching.

  • API routes to build API endpoints with Serverless Functions.

• Sanity CMS - was handling all the content on the website without the need for a complex backend. Data were queried using GROQ and using Next function getServerSideProps pre-render the page on each request. Sanity rich text, image handling, and content management were crucial in having a content-heavy website work.

• UseContextAPI - Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

• Tailwind - was amazing to use to create an elegant UI

• Stripe Payments SDK - Handling safe payments and checkout experiences.

• Auth0 - Centralize and manage users from multiple identity providers and give them branded, seamless signup and login experiences.

• Google Maps API

TELUS Digital challenged us on developing an application & design to tackle the option paralysis surrounding the multitude of streaming available. The 24 hour hackathon was exhilarating from the ideation process to developing the react app. We are super proud of our innovative app that solves option paralysis creatively and practically. This was a great opportunity to work cross-collaboratively with the UX team for ideation and creative design. Telus also provided a very open challenge that sparked ingenuity and critical thinking to solve a major issue many large companies struggle with. (24 hour hackathon )

A group project collaborating using GitFlow and Agile (Jira) workflows to produce a warehousing application to manage inventory & warehouses. InStock is a full-stack react app with a nodeJS backend handling all the data. Building this inventory management app taught us the intricacies of these applications, the necessity of building reusable components, and working collaboratively. (1 Week)

BrainFlix is a video-sharing and social media platform built on react. The application features video commenting and engaging , uploading placeholder videos, and setting username session data. The application used a node express backend to create an API for video and comments. (2 Weeks)

Project assignment for the BrainStation Bootcamp that leverages beautifully responsive design for all screens, advanced Javascript for adding commenting functionality and pulling data from APIs for displaying vital information, and using the document object model to display information. (2 Weeks)