Skip to content

Latest commit

 

History

History
66 lines (40 loc) · 3.64 KB

README.md

File metadata and controls

66 lines (40 loc) · 3.64 KB

Freestyle pizza creator

pizzaPreview

⚠️ Not maintained, code mainly from jan 2020 🚢 deployed at vercel

This is best viewed in Chrome or Firefox on a screen min 1440 x 900.

Here is a time table of what I spent how much time more or less.

To start:

yarn start

🎨 Design inspiration

As this was for a challenge, I didn’t have the time to design something completely new from scratch (and that would be outside of my expertise as a developer).

Therefore, I decided to create a wizard-like app that is based on an existing design to make this more of a real-life example. After a deep dive into dribble, bechance, and Pinterest for inspiration, I ultimately landed on this design.

At first I thought about using a react ui component library, like Evergreen, but eventually decided to create the components myself, because I only needed a very limited amount of elements.

Then I replaced the photo in the Design with this pizza illustration from freepik (where I also got the pizza mockup from), to be able to animate the svg better. I sourced the slized pizza icon for the size collection from noun project.

When I first got this challenge, I was immediately reminded of pizza connection 2, a favourite from the early 2000s. So, I wanted to pay homage to it and thus based the app’s pizza creator on it, hopefully making it more fun and intuitive for the customer :)

💻 Implementation

I used several npm modules:

react-step-wizard: Offers a simple API to quickly create a wizard

react-helmet: Component based handling of changes to the document head tag

styled-components: Well you know styled components

husky, prettier and pretty-quick: For code formatting

shortid: to generate UUIDs for cart items

react-spinners: Is a package of easy to use loading spinners

lottie-react-web: Is a react wrapper for Bodymovin Animations

What I did not do, but would have in real life:

  • write tests
  • use a roter & prevent user from navigating via hash to all steps
  • create more modular components and encorporate design system / component library
  • write animations using a framework instead of keyframes
  • fetch sizes & toppings from backend
  • store all data in backend instead of local storage
  • group identical items in cart. put a "2x" if an identical item is in the cart multiple times
  • have better validation for input (phone number, credit card number, MM/YY stuff like that)
  • have actual request error handling (I created empty promises where you would typically would fetch a BE)
  • do not have hard coded text: I personally prefer i18n if you are encorporating different languages
  • make responsive, browser & device compatible