nav bg

The Jump Shop

Creating an online store with React & GraphQL.

The Jump Shop is a personal project where I built a full-stack e-commerce application from the ground up. This project focuses on modern JavaScript and real-world application of implementation concepts.

  • JWT Authentication (JSON Web Tokens),
  • Permissions,
  • Sending transactional email,
  • Uploading Images,
  • and charging credit cards.

GraphQL Server

I utilized Prisma to generate a MySQL database for my data layer. Prisma shines for its ability to layer a GraphQL server on top of your database (GraphQL Yoga); Prisma provides an enormous set of GraphQL CRUD APIs as a helper and starting point for development.

I then used this GraphQL server to implement and provide custom GraphQL Mutations and Query Resolvers. This was the heart of the app's backend development where custom resolvers allow the ability to query or mutate data given the proper scenario.

Prisma operates seamlessly with hosting providers to serve the App's actual database and provides a beautiful GUI for the main database as well.

Frontend

The Frontend application is built mainly with React & Apollo. In addition, I use Next.js for server-side rendering of the frontend, Styled-Components for styling, Jest & Enzyme for testing.

Apollo allows me to perform the GraphQL operations I created on the backend:

  • performing GraphQL Mutations,
  • fetching GraphQL Queries,
  • caching GraphQL data,
  • manage the local state,
  • handle error and UI states

Feature Branches

Full list of concepts implemented:
  • React Best Practices
  • Server Side Rendering
  • Styled Components
  • Theming
  • Render Props
  • Routing
  • GraphQL Schema
  • Queries and Mutations
  • JSON Web Tokens (JWT)
  • Resolvers
  • Cache Management
  • Loading and Error States
  • Sending Email
  • Logic and Flow with Async + Await
  • Authentication and Permissions
  • Charging Credit Cards
  • Hosting and Transforming Images
  • Pagination
  • Forms in React
  • Animations
  • Third party React Components
  • Unit Testing
  • Mocking Components
  • Mounting vs Shallow Rendering
  • Deployment