About

This React App is currently a prototype I have built for my IS 542 class. While there is a payment processing area in this app, it is yet to be set up so your card will not be charged. No sales will happen while using this website.

The purpose of this project is to demonstrate my skill with JavaScript development. While this website functions simply, the code behind it is quite extensive and will be very useful for scaling up should I choose to do so. Check out my code to see this for yourself.

I hope you enjoy my project, to authenticate yourself:

email: testuser@test.com password: testme

Viewing My App

To get started, check out the https://heraresult.web.app/store first. The Following steps will guild you through my application:

• In the Store view, you will see a tab that says "Pricing" click on it
• Click on the "Get Started" button in the second card called "The Self Learner"
• Now in the Pay view, use the auth credentials from above to sign in (you can sign up with a google account if you wish)
• You will now be able to click on "Pay" in the product card.
• Now go to your profile (located in the top right corner)
• You will be able to see a list of charges, with the day it was "purchased"
• Click on the "Sign Out"

Tech

I used the following technologies in this project:

• JavaScript
  • Leveraged OOP for data representation
  • Promise API
  • Asynchronous Programing
  • Creating utility classes that I actually used more than once
  • Handling user state globally
• React.js
  • State management with React Context
  • React Hooks
  • useEffect
  • useState
  • useRef
  • useContext
  • This was my first time being almost solely dependent on React functional instead of class components. It was quite the learning experience and I can now say I fully support functional React.
• Material UI
  • Css in JavaScript
  • Animations
  • Global Theme with ReactContext
  • Media Query
  • Any general Material UI Components used in this App
• React Router
  • Sub Switches
  • Private Routes
  • Redirects
• Firebase Auth
  • Email / Password
  • Sign in with Google
  • User event listener
• Firebase Firestore (database)
  • Leveraged sub collections
  • Designed data for scalability
• Firebase Hosting
  • This is being hosted by Firebase!