BC Vape Finder

http://bc-vape-finder.herokuapp.com/

Description

BC Vape Finder is a search portal for vaping-related products that are sourced from e-vendors across the lower mainland

(the page may take up to 10~ seconds to load if not accessed recently)

Purpose

I developed this project to demonstrate my full-stack web development skills. Tasks include:

• combining a modern UI framework with the Apollo and Realm APIs to fetch content from a cloud-hosted datastore using GraphQL
• discovering content by scraping e-commerce websites, cleaning and loading the data into Atlas
• performing compatibility testing using BrowserStack,LambdaTest to ensure proper functioning on all modern browsers for mobile/desktop

Features

Product Search

• Filter products by categories, brands, and/or e-store tags using the respective dropdown menus
  • or alternatively, type a tag name into the input box
• Sort by highest or lowest price
• Search results from previous queries are cached

Desktop	Mobile

• Each product card contains a direct link (with an age vertification popup) to the product source page

Desktop	Mobile

Dynamic Pagination

• Load the next page of results when the end of the current page is reached

Desktop	Mobile

About Page

• Contains project description, contact form , disclaimer, and icon links to frontend/backend implementation technologies

Desktop	Mobile

Tech Stack

frameworks

• apollo-client
• graphql
• realm-web
• react-router
• emailjs

UI

• react
• react-icons
• react-responsive
• react-transition-group

Potential Improvements

• integrate a CSS preprocessor such as SaSS, use styled-components
• change hosting provider from Heroku to Netlify