SaaS/Social Media

Vicomm

Build your following, create revenue and follow other stores.

Goal

Build a software as a service product which provides a platform for users to connect with others, host content, and create revenue with their own online store.

Solution

With this project, since the data is structured with relationships between accounts, posts, products, and orders I used SQL and created a MYSQL database. I also decided to build a GraphQL API with node.js to grab exactly what I need for the client side of the application and nothing more. For the client, I used Next.js (a React Framework) with Apollo Client to manage both local and remote data with my GraphQL API.

Technologies

  • MYSQL
  • Node.js
  • Express
  • Apollo Server
  • GraphQL
  • AWS
  • Mocha
  • Chai.js
  • Sinon.js
  • Next.js
  • React
  • Apollo Client
  • Styled Components
  • Jest
  • React-Testing-Library

Google Oauth 2.0

The user can login/signup with their google account to reduce friction when signing up or logging into their account.

Login

Image Gallery

Enable multi-select or single select with photos depending on whether or not a 'multiSelect' prop is passed into this reusable image gallery modal component. Can delete multiple photos, and is passed a 'useMLTMD' function prop to be used with the 'use' button in order to allow for different use cases.

Image Gallery Modal

Loading state with spinner overlay

Since the image gallery modal was scrollable, I needed to create a spinner that was positioned in the center over the modal regardless of where I was in the y-axis. By creating a spinner component that was at the same level as the modal in the DOM hierarchy, which behaved the same way as the modal, I was able to ensure it was always positioned over the modal regardless of the scroll position.

Loading Spinner

Product Form

Built a custom form to enable the user to save new products with images and item details.

Product Form

Product Form Gallery

I built a gallery to display selected images with horizontal scroll and the ability to crop images, change the image order, or remove images.

Product Form Gallery

Product Table

A paginated tabular view of product items from which the user can choose to view and update individual product details. The product table is kept in sync by ensuring cache is updated each time a product is created or updated.

Product Table

Lessons learned and highlights

With this project, some experiences that stood out to me were creating my own database with MYSQL, working with a GraphQL API, and working with Google Oauth 2.0.