Reactive Retail

Mock eCommerce site built in React using the FakeStore API and Firebase integration; currently working on converting this site to a full stack MERN application.

Desktop image mockup of Reactive Retail page

Technologies

React, Sass, Figma, Photoshop

LIVE PROJECT

GITHUB

About

This was a project initially built as part of Juno College's Web Development immersive program. Having had some more experience in the professional e-commerce space I plan to expand further on this project to show what I've learned both at work and from personal study.

Mobile image mockup of Reactive Retail page

Challenges

Reactive retail was my first project created entirely in React and my first time implementing a Firebase integration. As such, there was a steep learning curve initially due to my experience being limited to HTML, CSS, and jQuery. My original goal was to create a mock e-commerce page that adhered to WCAG 2.0 standards but eventually would be able to store users' items in a cart that would persist in between sessions. Learning a new library alongside tools such as Figma while maintaining deadlines and proper project estimates was difficult, but with proper planning and splitting the site into repeatable components, it became much easier to split the work into more manageable goals. From this experience, I was able to learn much more about React and build my expertise with design tools such as Figma.

Favourite Part

My Favourite part about building Reactive Retail was the freedom that I was given to build this project. Up to this point, my projects at Juno College had been pre-designed and with a strict standard that dictated how the work was going to be completed. As such, having been given the freedom to design the site from the ground up gave me a great insight into the importance of UI/UX and how to properly break down tasks when learning a new library.

Next steps

I'm currently learning more about MongoDB and Express.js, so I'm planning on using these newfound skills to recreate Reactive Retail as a full-stack MERN application alongside some fixes to the UI. This MERN application would include the ability to save the user's currency preferences and will allow for account creation with a stretch goal of adding Stripe integration for checkout.