Built with Astro, Crystallize, and Stripe (Nerd Streetwear Online Store) Part I

Side hustle built with Astro, Crystallize, and Stripe for payment. Aided by ChatGPT trained assistant.

This is a four-piece article:
1️⃣ Bringing Idea to Life and Setting Up the Backend
2️⃣ Building the Frontend with Astro and Integration with Stripe
3️⃣ Advance Features and Deploying the Project
4️⃣ Final Testing, Going Live, and Summary

We live in exciting times. AI is in the search, AI is in our phones, AI makes images, AI helps us code, and AI is soon to be our main learning source. So, I’ve wondered if AI can help me with a side hustle from beginning to end.

I could have picked a consultancy or newsletter (like I did 4 years ago) as a side hustle, but I wanted to do something different. That’s how nerd streetwear t-shirt brand DisBar came to life (nope, don’t ask me about the name). Think t-shirts featuring iconic tech, coding humor, and geek culture references.

Ideas matter the most, right?

Kind of🤔 Still, in today's competitive digital landscape, building a niche online store requires more than just having an idea and a platform. You must deliver a visually appealing, highly functional, and optimized-for-performance storefront.

To make things interesting, this guide is built entirely with the help of ChatGPT. From ideation to examples to step-by-step setup, it is all built by ChatGPT and proofread for accuracy.

A couple of caveats:

• I’ve trained ChatGPT assistant on 🚀Astro, 🛒Crystallize, and 💰Stripe documentation, and a couple of 🛠HOW-TO guides I managed to get my hands on.
• Most prompts have been descriptive, with multiple takes on the topic or code requested. Hence, no prompts will be shared.
• Building stuff this way is about perfecting the prompts, but I haven't done much of those. Instead, I took prompts granularly instead of using a single one. Hence, Easter eggs in images and code.
• I owe much gratitude to my good friend Dhairya, who reviewed the process and the code for accuracy.

The next step is actually to build the store myself (this does not mean you can’t do it as well).

Before You Start

• Explore Astro, Crystallize, and Stripe documentation to deepen your understanding and start building your e-commerce projects.
• Experiment with different integrations, design styles, and features to customize your store to meet the needs of your target audience.
• Share your project with the community, contribute to open-source, and continue learning as you develop your skills.

Technologies Used

To build a DisBar nerd streetwear online store, I’ve selected three core technologies that integrate smoothly to create a modern, performant, and scalable e-commerce solution.

1. 🚀Astro is a modern frontend framework designed to build fast, optimized websites with minimal JavaScript by default. Astro’s component-based architecture supports multiple frontend frameworks (like React, Svelte, and Vue), offering flexibility and power. It also enables server-side rendering (SSR) and static site generation (SSG), which are crucial for performance and scalability.
2. 🛒Crystallize is an API-first headless commerce platform that provides the backend infrastructure for my online store.
3. 💰Stripe is a leading payment processing platform that handles online transactions securely and efficiently. Ease of integration, robust API, and comprehensive feature set make it the go-to choice for handling payments in e-commerce applications. Together, these technologies form a powerful stack that enables the creation of a feature-rich, performant, and scalable online store tailored specifically for the nerd streetwear market.

0. Bringing Idea to Life

Confession time: I have ZERO designer skills but an eye for good things (as we all do). So, I just let AI take care of the entire design process, from creating logos and icons to elaborating on what and how to wireframe pages and suggest the design's implementation.

Basically, I just talked with AI about what I want and how I want it (it is mind-boggling that this is possible already).

Designing Logos and Icons

The logo is the face of your brand, and it should encapsulate the essence of DisBar—modern, edgy, and tailored to the nerd streetwear audience. Here's how the logo and app icon for DisBar were created using DALL-E:

1. Conceptualizing the Logo. I suggested two things:
   • Typography: The logo should feature strong, sans-serif typography with clean lines. The bold and modern font conveys a sense of strength and simplicity, which resonates with streetwear aesthetics.
   • Iconography: The icon integrates a stylized "D" and "B," representing DisBar's initials. The design is abstract yet recognizable, making it versatile enough to stand alone or complement the text.
2. Using DALL-E for Design:
   • Step 1: Provide DALL-E with a detailed description (the above one) of the desired logo attributes, including the typography style, iconography, and color scheme.
   • Step 2: Generate multiple variations and select the most fitting design.
   • Step 3: Refine the selected design by iterating on specific elements such as the shape or the font’s weight.
   • Step 4: Test the logo on various backgrounds and scales to ensure it works well in different contexts, such as on t-shirts, business cards, and app icons.

What we ended up with after multiple iterations is not that bad, even though the text is screwed😎

Creating T-Shirt Mockups

The t-shirts are the core products of the DisBar brand, and the designs we aim at should reflect the themes of modern front-end development, such as HTML, JavaScript, and Astro.

All we had to start with was a tagline that should act as a design north star for t-shirt mockups:

1. HTML: "The Backbone"
   • Description: A stylized design featuring the iconic HTML5 logo, with elements like brackets and tags artistically integrated into the design.
   • Colors: Primary colors of the HTML5 logo (orange and white) with black accents.
   • Imagery: Abstract code snippets in the background, focusing on structure and backbone.
2. JavaScript: "The Wizardry"
   • Description: A dynamic print showcasing the JavaScript logo with a playful twist, including code snippets and a wizard hat.
   • Colors: Yellow and black, with neon accents to add a modern touch.
   • Imagery: JavaScript code snippets highlight functions and variables, giving a feel of programming magic.
3. Astro: "Beyond the Stars"
   • Description: Featuring the Astro logo set against a cosmic background, with stars and constellations forming the outlines of the logo.
   • Colors: Dark blues and purples for the background, with white and light blue accents.
   • Imagery: Space and galaxy themes, with shooting stars and planets, emphasizing the futuristic aspect of Astro.
4. React: "Reactive Energy"
   • Description: A design emphasizing the React logo, surrounded by elements that signify speed and energy, like lightning bolts and gears.
   • Colors: React's cyan and black, with electric blue highlights.
   • Imagery: Components and hooks are illustrated dynamically, showing the reactive nature of the library.
5. Svelte: "Svelte and Sleek"
   • Description: A sleek design featuring the Svelte logo, with smooth, flowing lines and a minimalist approach.
   • Colors: Svelte's red and white, with subtle grey elements.
   • Imagery: Simplified code snippets and smooth curves reflect Svelte's minimal and efficient nature.

While I aimed at a minimal approach while trying to emphasize the unique strengths and characteristics of the respective technologies, I ended up with these because DALL-E could not escape modern full-t-shirt images. Instead of pursuing the original idea, I just accepted it.

I could have supplied DALL-E with solutions (images) of the t-shirts I like and had it work from those connected to our taglines. Maybe next time.

The work from here on👉 a couple of high-res images of the t-shirts from different angles and, maybe, on a mannequin or something. I am sure the current AI solution can pull much more than this.

Wireframing Pages

Wireframing is an essential step in translating your design ideas into functional layouts. It helps visualize the structure of your website and guides the development process.
Here are the final results.

1. Homepage Wireframe:
   • Hero Section: A full-width banner with a high-quality image of a featured t-shirt, a bold tagline, and a CTA button leading to the shop.
   • Featured Products: A grid layout displaying top products with images, names, prices, and a "View More" button.
   • About Us Section: A brief introduction to DisBar, highlighting the brand's mission and unique selling points.
   • Newsletter Signup: A simple form encouraging visitors to subscribe for updates and promotions.
   • Footer: Includes links to social media profiles, contact information, and additional resources.
2. Product Page Wireframe:
   • Product Images: High-resolution images of the t-shirt from multiple angles, with an image zoom feature.
   • Product Details: Product name, price, available sizes and colors, and a detailed description.
   • Add to Cart: A prominent "Add to Cart" button with options to select quantity.
   • Related Products: A section featuring similar products to encourage cross-selling.
   • Customer Reviews: Display user reviews and ratings for social proof.
3. Creating the Wireframes:
   • Use tools like Figma, Adobe XD, or Sketch to create detailed wireframes. Ensure the layout is clean, intuitive, and optimized for desktop and mobile devices. Examples:

The work from here on👉 writing the product descriptions and promo copy for the whole website.

Implementing the Designs

Once your wireframes are ready, the next step is to translate these designs into actual pages using Astro components.

1. Setting Up the Layouts:
   • Create reusable layout components in Astro, such as Header, Footer, and ProductCard.
   • Define the basic structure of the pages using these components.
2. Building the Home Page:
   • Implement the hero section, featured products, and other elements as per the wireframe.
   • Use Astro's component-based architecture to keep the code organized and maintainable.
3. Creating Product Pages:
   • Use the dynamic routes set up earlier to render product-specific pages.
   • Ensure that the design elements like images, buttons, and text are styled consistently with the overall brand identity.
4. Styling:
   • Apply CSS or a CSS framework like Tailwind CSS to style your pages.
   • Ensure the design is responsive, with appropriate breakpoints for different screen sizes.

The work from here on👉 doing the above.

1. Setting Up the Backend with Crystallize

🛒Crystallize is a headless e-commerce platform designed to help developers easily build and manage modern online stores. Headless at the core, Crystallize offers a highly flexible, API-driven approach that allows you to create custom content models, manage products, and handle orders through a powerful GraphQL API.

Key Features of Crystallize:

• API-First: Crystallize is built with an API-first approach, providing a robust GraphQL API that allows developers to fetch and manipulate data precisely.
• Headless Commerce: Headless means the front end is decoupled from the back end. This allows you to use any frontend technology, such as Astro, to build your storefront while relying on Crystallize for backend operations.
• Flexible Content Modeling: Crystallize offers flexible content modeling, allowing you to define custom shapes and properties for your products and other content types. This makes it ideal for creating unique and complex e-commerce experiences.
• Multichannel: Crystallize supports multichannel commerce, enabling you to deliver content and products across various platforms, including web, mobile, and IoT devices.

With Crystallize, you can design a store that perfectly fits your brand’s needs, whether you sell physical products, digital goods, or subscription services.

Creating a Tenant

The first step in setting up your e-commerce backend with Crystallize is to create a tenant. A tenant in Crystallize represents an independent instance of your store, complete with its products, content, and configurations. Crystallize is a multi-tenant platform (link to a short ▶️YT video about tenants), meaning you can have multiple stores with the same login.

Step-by-Step Guide to Creating a Tenant:

1. Sign Up and Log In:
   • Visit the Crystallize website and sign up for an account if you haven’t already done so.
   • Once you have an account, log in to access the Crystallize dashboard.
2. Create a New Tenant: In the Crystallize dashboard, navigate to the Tenants section.
   • Click on the Create Tenant button.
   • Fill in the details for your new tenant, such as the name (e.g., "DisBar Store") and other relevant information.
   • Choose a subscription plan based on your needs and confirm the creation of your tenant.
3. Configure Basic Settings:
   • Once your tenant is created, you can access its dashboard to find various configuration options.
   • Set up basic settings like the default language, currency, and other general preferences.

Now that your tenant is set up, you can define roles, permissions, and content models.

Defining Roles and Permissions

Managing roles and permissions (link to a short ▶️YT video about roles) ensures your team members access the store’s resources appropriately. You don’t want to have a single login for everyone on the team or have a couple of admins. Crystallize allows you to create custom roles with specific permissions, making it easy to control who can edit content, manage products, or access sensitive data.

How to Set Up Roles and Permissions

1. Navigate to the Roles & Permissions Section:
   • In your tenant’s dashboard, go to the Settings section. Click on "Roles & Permissions" to view the available roles.
2. Create Custom Roles:
   • To create a new role, click on Add Role.
   • Name the role based on the function (e.g., "Developer" or "Content Writer").
   • Assign permissions relevant to the role. For example, Developer Role allows access to schema editing, API management, and product catalog configuration; while Content Writer Role allows access to content creation, product descriptions, and media management but restrict access to the schema and API settings.
3. Assign Roles to Users:
   • Go to the Users section of the dashboard.
   • Invite your team members by entering their email addresses and assigning them the appropriate roles.

By setting up roles and permissions, you ensure that your team can work efficiently while maintaining the security and integrity of your e-commerce platform.

Content Modeling

Content modeling in Crystallize allows you to define the structure of your products, categories, and other content types. For a nerd streetwear store, you’ll need a custom content model that suits the unique attributes of your t-shirts, such as sizes, colors, and design themes.

That’s not all. You can also use Crystallize as a blog, i.e., define article shape and connect it with your product. This way, you can have all your product information and marketing content in one place.

Content Modeling for the eCommerce livestream series is a good starting point to understand it in depth.

How to Create a Content Model for T-Shirt Products and the Home Page

1. Create a Product Shape:
   • In the Crystallize dashboard, go to the Shapes section.
   • Click Add Shape and select Product as the shape type.
   • Name the shape T-Shirt to represent your product model.
2. Define Fields for the T-Shirt Shape:
   • Title: Add a text field for the product name (e.g., "JavaScript Wizardry Tee").
   • Description: Add a rich text field for the product description.
   • Images: Add an image field to upload multiple product images.
   • What about size and color? Both are product attributes that can be defined on a product variant. And SKU? Every product variant has its own SKU field by default; there is no need to define this separately, either. Finally, if you need TAGS, define topic maps in Crystallize.
3. Create a Home Page Shape:
   • Return to the Shapes section and click Add Shape.
   • Choose Document as the shape type and name it Home Page.
4. Define Fields for the Home Page Shape:
   • Hero Section: Add an image field for the banner and a text field for the tagline.
   • Featured Products: Add a reference field to select and display featured products. Based on the layout, this can be a grid or item relations component.
   • About Us: Add a rich text field for the About section.
   • Newsletter Form: You can either have it on the front end or have a SingleLine field to add an embed URL for the form.
   • Footer: Add text and link fields for social media and contact information.

With these shapes in place, you have a robust content model that supports your store’s unique products and page layouts.

Populating Content

Now that your product and home page content models are defined, it’s time to add actual products and set up the home page content.

How to Add Products and Set Up Home Page Content:

1. Add Products
   • Go to the Catalogue section of the dashboard.
   • Click on Add Item and select Product.
   • Choose the T-shirt shape that you created earlier.
   • Fill in the fields with the product details, such as the name, description, images, price, sizes, and colors.
   • Repeat this process to add all your t-shirt products.
2. Create the Home Page:
   • In the Catalogue section, click on Add Item and select Document.
   • Choose the Home Page shape.
   • Populate the hero section with a banner image and tagline.
   • Select featured products using the reference field.
   • Add content to the About Us section and configure the newsletter signup.

With your content added, your Crystallize backend is now ready to power the front end of your online store.

AND we’re at the end of part one of this guide about building a side hustle with Astro, Crystallize, and Stripe for payment. Next, we build the front end with Astro and integrate Stripe.

Next 👉 Building the Frontend with Astro and Integration with Stripe

¯_(ツ)_/¯

If you enjoyed reading this, please support my efforts by recommending and sharing this page to help others find it! Let me know what you think.

Please share your feedback and suggestions in the comment section below.