x

We use the latest technologies to provide the best experience!

Please download a newer version of your browser. Click to close

play icon

Jarmke, a jewellery webshop

Darian Rushworth, graduate of Class 42 shows of his portfolio project made during the Codaisseur Academy.
Darian Rushworth
Student of Class 42 @ Codaisseur Full Stack Academy
11 September 2020

Jarmke Jewellery

What is Jarmke

Jarmke is a brand of jewellery made by Kristina Jarmke Matthews, this is a webshop that I am busy constructing to suit her wants. She would like a webshop to be able to sell her jewellery as she doesn't have a storefront as of yet, but with the beauty of the web do you really need one?

Working version

Follow this link to find the working version thus far. JarmkeJewellery

Planning underwent

The first meeting, we gathered and spoke about the processes she would like her site to have and the information she would like available. After this, I created my backend project board BackendBoard , to plan out the information I needed from Kristina, and double-check the placements of the authentication routers. I used 6 models with two join tables, which you can see within this DatabaseDiagram

Backend Technologies

  • Sequelize
  • Postgres
  • express
  • Middlewares
  • JWT's
  • Stripe

Now that both Kristina and I were happy with the way the backend was firing, we approached her disires on the visual aspect and the reactivity of her webshop. I came up with my frontend project board FrontendBoard, and to get and idea of a MVP, I drew up this WireFrame

Frontend Technologies

  • React
  • Redux
  • Axios
  • React-Bootstrap
  • Stripe

Key Features

With both my backend and frontend firing together I could finally start putting all of these features in place:

  1. Pagination

  1. Favoriting Products

  1. User Profile Page
    • Update user information
    • Shows all Orders belonging to the user
    • Presents all favoured products
  2. Adding/Removing from Cart
    • Updates the number of items in the Cart
    • Changes the total of the Cart
    • If no active order, one is made upon adding product.

  1. Revising Shipping Details
    • Shipping to another address, pop up new address form
    • Express Shipping, updates the total accordingly
    • Both get updated on the order

  1. Payment Methods
    • Confirmation of all Details
    • Upon successful payment redirect to user profile, to see completed order

Interested in joining the Academy?