A coffee roastery site with a full menu, a cart and a checkout.
A site for a roastery that serves what it roasts.
Raw Roast is a concept brand: a small coffee roastery with its own counter. The idea is simple. They roast the coffee and serve it the same day. The site has to say that fast, show the menu and let people order. I built it from scratch. The brand look, the design in Figma, the Next.js code, the menu data, the cart and the checkout are all my work.
Hand-drawn lettering on a clean grid.
The brand has a street, hand-made feel. Big black headlines sit on a plain light page. Orange marker lettering adds a second voice, like "Every day for love" in the hero. Black line drawings of cups, kettles and bags fill the empty space. The layout stays calm so the lettering can carry the personality. The coffee photos are soft and bright, and most of the hot drinks use the same green cup.
26 items in five groups, each with its own page.
The menu has five groups: coffee, sandwiches, salads, desserts and coffee beans. Filter tabs switch between them. A plus button on every card adds the item to the cart. Every item has its own page with a photo, price, description, size and nutrition: calories, protein, fat and carbs. Coffee beans come in 500 g and 1 kg bags, each with its own price. At the bottom of the page, a Pairs well with block suggests other items.
Item page
One clear photo, the price and one button. The details sit in a collapsed block, so the page stays short.
From the menu to checkout in a few taps.
When an item is added, a small message appears and the cart count in the header goes up. On an item page the Add to bag button turns into a quantity stepper. A guest can change the amount without opening the cart. Checkout is one page. The guest picks Dine-in / Pickup or Delivery. The form asks for name, email and phone. For delivery it also asks for a street address. The order summary stays at the side with the subtotal, shipping and total, and the total is repeated on the Place order button.
Add to bag
The stepper and a direct link to checkout appear in the same place as the button.
Checkout
Two columns: the form on the left, the order summary on the right. A line drawing fills the space under the summary.
Everything a small café site needs.
The home page tells the story in sections: the hero, the menu, how the roastery works, customer reviews, the team with a hiring link, and the address with opening hours. Beyond it there are About us, Our process, Gallery and Contacts pages, and the checkout. The legal pages are ready too: Privacy Policy, Terms of Service, Returns & Refunds and Shipping Info. I also designed the 404 and 401 pages.
A complete site, built from scratch.
The site is live. It has 26 menu items with their own pages, a cart that adds up the total with shipping, a checkout, and every page a small café needs, from the story to the legal documents. It is a full build of my own: brand, design, Next.js code and content, all by one person.