Blueming Floral

Floral Tech, Empowered by Graph Database, and also Square's Checkout API. We are Reimagining the Florist Shop.

Comment

Inspiration

Blueming Floral is an actual floral shop that is gonna be opening soon in the Greater Toronto area, so this web application is a proof of concept for using graph database neo4j and Square for its powerful checkout functionalities. Moreover, flowers are great gifts for any situation, whether its an anniversary, or a special day, a fresh bouquet will always do a great job to brighten up someones day.

What it does

Blueming Floral is a web application that lets you view the list of available products from the shop and let you add to cart with checkout hosted on Square's checkout links. Also, it leverages Square's subscription plans for users that wants a monthly flower delivered to their doorsteps. Additionally, customers would be able to check their existing orders and also make payments.

Features include the following:

  1. Display Items
  2. Carousel with animations
  3. Plan Subscription
  4. Order
  5. Sign Up/Log In
  6. Cart
  7. Cart Context
  8. Checkout
  9. Item Details
  10. Order Details
  11. Most Popular Item

How we built it

The application is hosted on vercel, and we used nextjs to utilize its out of the box Server Side Rendering features. In terms of user authentication, magic.link is used to handle user login and sign up flow. Then, we have a graph database with neo4j to store item details, and it was a good set up to implement the recommendation engines with neo4j to increase conversion of traffic. Most of the data related to orders and checkout is stored with Square. The main packages used for the project is chakraui for clean UI designs, magic-sdk for user authentication, neo4j driver to connect with the database, then square and react.

Square APIs that we used:

  1. Checkout
  2. Customer
  3. Order
  4. Subscription

Challenges we ran into

We ran into quite a few challenges but there are 2 notable ones that helped me improve and learn a lot.

  1. Optimizing Images for better performance
    • We experienced performance bottleneck caused by large image files with high resolution. The Largest Contentful Paint was dragging down the load speed by an average of 7.7 seconds, which is not a good user experience.
    • As a customer advocate, we implemented lazyloading and also added skeleton in place of the image, so when the image is still loading, users attention would still be focusing on the image that is almost done loading
  2. Hydration problem caused by mismatch of server side value and client side value
    • In the application, we have a bubble above a cart icon at the top right of the application that indicates the number of items that are in the cart.
    • Since Nextjs has a mix of server side rendering and client side rendering, the initial prop for the quantity is 0, but we are storing the cart items in local storage and updating it without any interactions with the backend. Then a discrepancy is introduced and hydration issue surfaces.
    • The solution is to use useffect to ensure the context is updated strictly on the client side, so their won't be a hydration problem, and the state would be updated when new item is added.

Accomplishments that we're proud of

We are proud of the integration with Square's powerful APIs, and also the frontend design was visually pleasing. More importantly, we are proud of the learning experience, and we were able to build this fullstack application from the ground up in 10 days. It just goes on to show how anything is possible if you put your mind and heart to it.

What we learned

I have learned a lot in this journey building web applications in short amount of time from structuring code to refactoring code to improve performance, and also learning about graph database is interesting. Moreover, I learned a lot about how to build application with multiple environments and testing the application in sandbox mode.

What's next for Blueming Floral

Introduce the recommendation engine to unleash the full potential of the graph database. Modify the sign up flow to allow guest checkout. Allow customers to book a DIY section at one of our physical locations. Another add on is build more custom plans such as sending bouquets to customers on all the special holidays instead of monthly recurring plan.

Built With

Share this project:

Updates