Contact page with a large lightweight background.
A 3d grid inspired by Need for Speed.
Product designs following the brand design guide made for this project.
OVERVIEW:
Ceramic Lounge Coffee is a personal project created to explore bold design choices while maintaining a web-safe, lightweight infrastructure. It was a brand building exercise for me to practice graphic design and creatives, while creating an SSR site on a fairly new and powerful platform, Astro Web Framework. This site provides a fully operational payment system with Stripe.
Main Tech Stack:
Astro.js, Stripe, Svelte.js, HTML/CSS/JS
Other technologies:
Vercel, GitHub, Yarn, Node.js, RESTful APIs
TECHNICAL GOALS:
The Learning Goal for this project was to expand my knowledge of SSR Frameworks, Node.js SSR API routes, Brand Design Identity, and other concepts around building a brand identity for a client. I created lots of products following a design guide, created logos, brand packages, and other frontend specific items I'm not used to creating as a backend developer. This project was a successful attempt to leave my comfort zone and exapnd my boundaries as a developer.
NOTABLE FEATURES:
Astro Stripe Integration:
Astro runs on a very odd version of node, not fully conforming to other frameworks like react. Therefore, I had to piece together portions of Node, React, and other stripe documentations to create a usable integration. The only useful information was a Japanese website with code snippets for complex astro-stripe webhooks.
Lightweight Quality Assets:
One of the hardest parts of web development is making a page load extremely fast without sacrificing photo quality. In this project I use webp as a primary file type, and have assets that are 2000px in width but only 200kb. That's the large background found behind the store and grid on the homepage. Webp is supported for over 98% of internet users.
HURDLES:
Young Framework:
Astro is still a very new framework, so there's not much online in terms of solutions for obscure issues, like the vercel adapter not working for seemingly no reason. This makes it difficult to find solutions that would otherwise be solved on React.
Astro APIs:
Learning the process for creating Astro APIs was interesting considering it's very different from other fraemworks. When creating a POST request, the request object is not always created in the API route, nor is the response object, which is created by the user, not the framework. There's also different types of requests that run before or after page load, on the client or server.
