Introduction

This project would not have been possible without the dedicated guidance of Zachary Reece and his support throughout the process. The project is intended to demonstrate what I've learnt about React, Gatsby, Material UI and serves as a component for my résumé.

Usage

You can have have a look and play around with the UI by visiting the live demo. When the page loads for the first time (especially if you open it in the Incognito window), the layout maybe broken (I honestly don't know why this bug only shows up for the deployed version. So, if you happen to know the cause of that issue, I'd love to know how to fix it). In that case, refresh the page (a few times) and it'll work.

I do want to deploy the project with all of its functionality, but that requires maintaining the AWS EC2 instance to keep the backend running, whose usage exceeds the Free Tier's limit so... long story short, I'll have to pay for service to keep it working, which, you know, as a fresh graduate, it's out of my financial capability.

Caveats

The project has responsive design, however, for devices with 320px width it may look a bit off in some sections.

I don't have a designer's eyes, so the color layout may look mildly infuriating to your taste.

Installation

If you want to try out the fully functional version of the project, you'll have to run it locally and make sure to have the same environment as I do to get it working properly. Please download and install these 2 softwares if you don't have them already:

1. nvm-setup.zip from its latest release
2. Git

Then open up your terminal with Admin privilege and run:

1. nvm install 14.15.0
2. nvm use 14.15.0
3. node -v (the output should be v14.15.0)
4. Pick a folder of your choice or create an empty folder and then cd path-to-that-folder
5. git clone https://github.com/HelpMe-Pls/JAMStack-site.git
6. cd JAMStack-site
7. Proceed with the instructions from the backend and frontend folders respectively.

What I've learnt

• General:

  • CDN (Content Delivery Network)
  • CMS (Content Management System)
  • SSG (Static Site Generator)
  • SSR (Server Side Rendering)
  • GraphQL
  • JWT

• Gatsby:

  • Image Optimization and Responsive Image
  • SEO Optimization
  • PWAs

• Material UI:

  • Pre-built customizable components
  • Responsive design
  • Responsive layouts
  • Theming

• CSS:

  • Positioning
  • Flex designs
  • Transitions

• JavaScript:

  • Some of the Object methods
  • Some of the Array methods
  • Spread operator
  • Destructuring
  • Closure

• React:

  • Hooks
  • Context
  • Lifting the State up
  • React.cloneElement()
  • Overriding State

• Deployment:

  • AWS EC2 Instance
  • AWS S3 Bucket
  • NGROK
  • NGINX

Known bugs

• Unable to change subscription frequency in the list of subscriptions from User's profile.
• Only for the deployed version: broken layout when the page loads for the first time. This issue can be reproduce by open the page in a new incognito window of your browser.

Planned development

• Fix known bugs.
• Add functionality to "Search for products", "Pause subscription" and "Promo code".
• Integrate TDD.
• Further refractor code for readability, reusability and maintainability.
• Find other free alternatives to AWS EC2 for deploying the backend.
• Create a Docker image for this project.

Contributing

Pull requests are most welcome. For breaking changes suggestion, please open an issue first to discuss what you would like to change/improve.

Please make sure to contact me if you need further support.