DEV Community

Cover image for DevGrad2020: Sweet Spot - A Pastry E-Commerce Site
Megan
Megan

Posted on

DevGrad2020: Sweet Spot - A Pastry E-Commerce Site

Many of my posts on Dev have been related to Flatiron School, and as I've mentioned a few times already (sorry!), I graduated back in February. It was an amazing experience and I'm very fortunate for having had the opportunity to pursue my dream career.

My Final Project

I'm happy and excited to share my final project at Flatiron School, Sweet Spot! Sweet Spot is a pastry e-commerce website for pastry chefs and small businesses to be able to sell their products to people in the community. This project was inspired by my previous career as a pastry chef, as an alternative to creating a business and dealing with the red tape involved there just to be able to sell products and gain recognition in the industry.

Demo Link

You can browse pastries at the live site and even purchase them using the Stripe test credit card number.

Link to Code

GitHub logo mwong068 / sweet-spot-front-end

A pastry e-commerce website for pastry chefs and small businesses to be able to sell their products to the community.

Sweet Spot: A Pastry E-Commerce Site

GitHub repo size GitHub stars GitHub forks Twitter Follow

About

Sweet Spot is a marketplace for pastry chefs and small bakeries and restaurants to share their baked goods with their community. It was made to bring communities together and to highlight smaller businesses.

This was my final project at Flatiron School and is a combination of Rails, React, Redux, Thunk, JWT, and the Stripe API.

How it works

This application was built using React.js and Redux for this frontend portion. Please see the below sections on how to run the application on your local environment Please ensure that you have downloaded the backend portion of this application, to ensure full functionality of the application as it was designed.

Features

How to use it

  1. Create a clone of this…

GitHub logo mwong068 / sweet-spot-back-end

A pastry e-commerce website for pastry chefs and small businesses to be able to sell their products to the community.

Sweet Spot - Back End

GitHub repo size GitHub stars GitHub forks Twitter Follow

About

Sweet Spot is a marketplace for pastry chefs and small bakeries and restaurants to share their baked goods with their community. It was made to bring communities together and to highlight smaller businesses.

This was my final project at Flatiron School and is a combination of Rails, React, Redux, Thunk, JWT, and the Stripe API.

How it works

This repository contains the database and backend structure necessary to correctly run the entire Sweet Spot project.

Features

How to use it

  1. Create a clone of this repo using GitHub's repository cloning functionality
  2. Locate the folder in your system and follow the steps below to run the server

Set up

Prerequisites

Before you begin, ensure you have met the following requirements:

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Sweet Spot was built using Rails as the backend RESTful API and React with Redux and Thunk for the frontend. Many of the frontend components were stylized using Material UI. I also implemented the Stripe API so that an actual monetary transaction can be made possible.

The whole project was a huge learning experience for me, especially as it was the first project I built entirely myself. I think a few things that really stuck out for me were using functional components in React and setting up the Stripe API in Rails.

When we were taught React at Flatiron, we mostly learned using class components. But upon choosing to use Material UI as my frontend framework, I was forced to encounter functional components as that was how most of their examples were written. It was definitely a bit of a learning curve, but I was able to familiarize myself with hooks, which I ended up really enjoying. It even gave me more of an appreciation for React and was a large leap in my education and understanding of the framework.

Another aspect of the project that was interesting and new to me, was setting up the Stripe API using Rails. In the past, all of the Rails projects I had done were just setting up basic servers to house all of the information that was received from frontend API calls. I wasn’t very familiar with making API calls to the backend, let alone using a service connected with Rails. Fortunately, Stripe’s documentation was fairly straightforward and I was able to quickly implement the service class and create instances of credit card transactions. It was very fascinating to use Rails in this way and definitely gave me a deeper appreciation for the backend framework.

Additional Thoughts / Feelings / Stories

I had so much fun making this project and also it was one of the most intense learning experiences thus far in my programming career.

I think an entertaining anecdote from this journey was right at the very beginning, my initial thoughts about an e-commerce site. Throughout my few, though exciting and sometimes unnecessarily expensive, online shopping sprees, I assumed an e-commerce site was simple. Code up some items, add them to a cart and checkout, boom. I was very shocked, when upon just creating user stories and drawing database relationships, the concept of this cart was very intricate and complicated.

After a week full of numerous discussions with my mentors, teachers, and fellow classmates, I finally came to the conclusion that the backend would handle all of my cart additions, and each manipulation of the cart would warrant an API call.

But through all of the consultations, this was only one way we found to implement an e-commerce site. It’s so fascinating because my classmate, who was also creating an e-commerce site, chose to use a completely different approach. I realized that that is something I really enjoy about programming, there are just so many different solutions to a problem.

Thanks for reading about my little project! I’m excited to have just begun my programming journey and...

Congratulations to all of the 2020 Grads! We did it! 🎉👩🏻‍🎓

Discussion (2)

Collapse
shaijut profile image
Shaiju T

Nice , 😄, How did you learn HTML, CSS, React, Rails, REST API ? Did teachers in university taught you or self taught by online tutorials ?

Collapse
mwong068 profile image
Megan Author

Hi Shaijut! I taught myself a bit of HTML and CSS before attending Flatiron School where I learned Rails, Javascript, and React. 😊