Summit Shop - React E-commerce Store

Project Overview

An e-commerce store for alpine clothing and equipment with dynamic functionality. Built with React, Google Firestore, React Router, SCSS, and Midjourney AI.

Deployment Link

This e-shop is live! Check it out here.

Screenshot

Table of Contents

• Goals & MVP
• Tech Stack
• Build Steps
• Design Goals
• Project Features
• Additions & Improvements
• Learning Highlights
• Known Issues
• Challenges

Goals & MVP

The primary goal is to build a reactive e-shop website to demonstrate the ability to fetch and manage data using Firebase, navigate between different components with React Router, and implement dynamic user interactions.

Tech Stack

• HTML
• CSS/SCSS
• JavaScript
• React
• React Router DOM
• Google Firestore
• Midjourney AI

How to use

To start exploring the e-shop, visit the homepage where you can browse products, view details, and add items to your cart. Use the navigation links to switch between different views and manage your cart.

Design Goals

• Emphasized the use of functional components in React and hooks for state management.
• Decision to use Firestore was driven by the need for real-time data updates and easy scalability.

Project Features

• A dynamic carousel that swaps images on a timer
• Firestore seeder scripts for database population
• Product images generated exclusively by Midjourney AI
• Search functionality built into the NavBar
• Separate Cart database collection to separate concerns and improve scalability
• Ability to favorite products and add them to cart

Additions & Improvements

• Crop background on products page
• Change the landing page to be the products page while maintaining the current homepage
• Addition of mobile responsive design
• Integration of Stripe for test mode transactions.

Learning Highlights

• Building more dynamic components in React
• Integration of a Firestore database
• Creating JavaScript database seeding scripts
• Dynamic filtering and searching of data on page
• JavaScript -> Firestore database seeding scripts

Challenges

• Building carousel
• Fetching product data

Contact Me

• Visit my LinkedIn for more details.
• Check out my GitHub for more projects.
• Or send me an email at [email protected]

Thanks for your interest in this project. Feel free to reach out with any thoughts or questions.

Oliver Jenkins © 2024