The Jump Shop
Creating an online store application with React & GraphQL
The app is neatly partitioned into frontend & backend segments for deployment flexibility & code clarity. Continue reading for more details about these areas and the full feature-set of this app.
This app features a Node.js backend and includes a few Express middleware packages for proven reliability, security, and functionality.
I utilized Prisma to construct the 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 base for database queries and mutations with GraphQL. Prisma saves you thousands of lines of code.
Prisma operates seamlessly with hosting providers to serve the App's MySQL database realtime and provides a beautiful admin GUI for the main database as well.
GraphQL is a great query language to interface with your database and serve your data. I used my GraphQL server to implement additional app-specific Mutation and Query Resolvers on top of the base functionality provided by Prisma. This was the heart of the app's backend logic where custom resolvers allow the ability to query or mutate data given specific logic, requirements, and scenarios.
The Frontend application is built mainly with Next.js, React, and Apollo.
I use Next.js which is an elegant React framework for the server-side rendering of the frontend. Building this with React was a joy! I also use Jest & Enzyme to create deep test-suites to make sure the app is rendering and functioning properly in production.
With Apollo, I can communicate with the GraphQL server and enact the GraphQL operations created on the backend, such as:
- Performing GraphQL Mutations
- Fetching GraphQL Queries
- Caching GraphQL data
- Manage the local state
- Handle error and loading UI states
Approximately 90% of the app uses Styled Components for its CSS. Styled Components does a great job of avoiding ambiguous naming collisions and keeps styles closely coupled with their components which provides encapsulation & safety.
Here's a more exhaustive list of concepts implemented in this app:
- React Best Practices
- Server Side Rendering
- Styled Components
- App Theming & Variables
- Render Props
- GraphQL Schemas & Resolvers
- GraphQL Queries & Mutations
- JSON Web Tokens (JWT)
- Cache Management
- Auto-saving state changes
- Managing Loading and Error States
- Sending Email from a Node backend
- Logic and Flow with Async + Await
- Authentication and Permissions
- Charging Credit Cards
- Hosting and Transforming Images
- Form Handling in React
- Unit Testing
- Mocking Components
- Mounting vs Shallow Rendering
- Deployment with Now & Heroku