logo
/

Scooper Mcquades

Next.js | React | Tailwind CSS

Project

Overview

Scooper McQuades is an ice cream shop, a coffee shop, and a soup and sandwich shop all in one. Carefully cultivating a family-friendly atmosphere, Scoopers sees a cross-section of our town, often hosting birthday parties in the Arcade. Having just opened in 2022, this business relied exclusively on Facebook for web presence. I offered to create a single-page site, build it with Next.js, and host it for free on Vercel as my first freelance website.


Client meetings were conducted frequently to deliver updates, conduct A/B testing, and guage preferences throughout production. React Carousel was chosen as a vehicle for displaying the client's seasonal announcements produced with Canva. Calendly's JavaScript widget was selected for scheduling reservations, interacting directly with the client's email.


This project saw more usage of Next's "use client", React's useEffect, and useState hooks - mostly for toggling mobile functionality. Next Image's attributes and Image StaticImageData were important to understand to get the Carousel functioning.


This project saw extensive use of CSS image parallaxes, flexboxes, grid columns; Tailwind's media breakpoints, inline styling; and ternaries for mobile-friendly styling. Pexels and Unsplash were extremely useful for obtaining mock-up images currently on the site.


I found using a Greenspace component for compartmentalized mock-ups to be fast and effective. I also learned to habitually bookmark links, as I frequently referenced the tech stack's documentation.

Technologies

Next.js

Tailwind CSS

React

TypeScript

HTML5

CSS3

Calendly

Home