Forem: Nebojsa Radakovic

React Norway 2026: The Schedule Is Live

Nebojsa Radakovic — Thu, 26 Feb 2026 13:13:08 +0000

Security, observability, compilers, AI agents, pair-programming, and fewer lines of code. We designed this year like a well-produced album. No filler tracks - every talk moves the story forward.

Picture this.

You walk into Rockefeller in Oslo on Jun 5th. Guitars on the walls. Coffee in hand. Developers everywhere. It smells like caffeine, code, and ambition.

That’s how we envisioned React Norway 2026 — Rock & React.

And today, we’re finally opening the curtain, delivering the vision with the full talk and program schedule.

Schedule

☕ We start early 08:00

Sign in, coffee, reconnect with your internet friends in real life, and get ready for the welcome talk. Other than it's gonna be quick, sharp, no corporate fluff, we won't disclose much. But... then we hit play.

🔐 09:30 – React with Caution – How to Hack Your React App (And Fix It Too) by Ramona

Ramona Schwering, Developer Advocate at Auth0, kicks us off by doing what most conferences don’t: she hacks a React app live.

You’ll see:

Real XSS and injection scenarios
Where React protects you
Where you are the last line of defense

React is inherently secure, with almost no recent CVEs in its core, but developers must stay vigilant because they remain the final line of defense against vulnerabilities. This session demonstrates real-world attacks like XSS and injection to show where React protects you and where your own security practices matter most.

🤖 10:00 – Rockin' With TanStack Start and AI! by Jack Herrington

TanStack Start meets AI? That's what Jack Herrington, core TanStack maintainer and full-stack powerhouse, is going to talk about.

This talk introduces the new TanStack Start, a client-first full-stack framework, combined with TanStack AI to seamlessly integrate advanced AI capabilities into your applications. Beyond chat, it enables multimedia features like image and video generation, bringing powerful AI experiences directly into modern web apps.

If you care about frameworks evolving beyond CRUD, this is your moment.

☕ 10:30 – Coffee + Networking

Let the talks sink in...and network with peers, speakers, and industry leaders. Maybe even check sponsor booths.

🧠 11:00 – Pair Programming at Ludicrous Speed with Costa Alexoglou

This is a brutally honest breakdown of:

Ultra-low latency challenges
State sync across windows
Desktop caching realities
Video latency hacks
And… WebKit frustrations

Costa Alexoglou's talk (he is a Software Engineer at Grafana Labs) shares hard-earned lessons from building and maintaining a super-low-latency open-source pair-programming app. It covers desktop caching, cross-window state synchronization, video latency hacks, and the unexpected challenges that come with browser quirks like WebKit.

🧪 11:30 – UX Research at Developer Speed with Dora Makszy

Dora Makszy is the Head of Design @ Element Logic. Don't let that sway you off from the talk. This talk shows how automated, self-service UX testing can keep pace with modern product development without sacrificing quality. By building a fully automated framework in Figma Make to capture real user behavior and analyze results at scale, it demonstrates how teams can integrate fast, data-driven research into rapid prototyping cycles and strengthen collaboration across engineering, product, and design.

If you believe React devs should influence product decisions, not just implement tickets — don’t miss this.
P.S. No researchers were harmed in the making of this test suite

🧹 12:00 – Dead Code Shouldn’t Exist: How We Removed 28k Lines of Code by Dominik Dorfmeister

Dominik Dorfmeister is a Frontend engineer at Sentry and TanStack Query maintainer, and he brings a simple talk that goes something like this:

They ran Knip. They found ghosts. They deleted 28,000 lines.

You’ll walk away knowing practical steps, workflow integration tips, and lessons learned so you can safely declutter your own project and reduce technical debt.

🍔 12:30 – Lunch (not your average conference food)

Refuel. Debate. Argue. Enjoy the best food you've ever had at a conference.

📊 13:30 – Observability Isn’t a Backend Thing with Neha Sharma

You just came back from lunch and might be looking for a nap. The thing is, this goes beyond console.log.

Neha Sharma's (Amazon Solution Architect and Founder of JSLovers) talk explores frontend observability beyond basic logging, covering traces, metrics, logs, and correlation IDs within an enterprise strategy. You’ll learn how to design for observability, integrate it into CI/CD, and build a culture that makes React systems measurable, scalable, and resilient.

🎨 14:00 – Designing the In-Between States with Async React by Aurora Scharff

Aurora Scharff, a Software Engineer from Norway (we say it with pride, explores how the “in-between” states—loading, errors, and pending UI—shape the perceived quality and performance of React applications. The session takes a practical approach using Async React and Next.js 16, sharing reusable patterns and architectural decisions that help teams design smoother, more intentional user experiences.

🧠 14:30 – AI Agents, Running in the Browser with Nico Martin

Machine Learning Engineer at Hugging Face, Nico Martin, will demonstrate how to build multimodal AI agents that process voice, images, and short-term memory entirely in the browser, without servers or cloud APIs. Using WebGPU and WebAssembly, it showcases real-time, privacy-preserving AI powered purely by modern web technologies.

This isn’t theory. It’s the future of client-side AI.

☕ 15:00 – Coffee Break

You’ll need a second brain after Nico.

🧬 15:30 – Robert Balicki brings you A Compiler for Your UI

Staff Engineer at Pinterest. Former Meta Relay contributor. Former rock band member.

Robert Balicki will introduce Isograph, a compiler-driven framework that eliminates boilerplate and ensures your UI fetches exactly the data it needs—no more, no less. By scanning your codebase and generating optimized queries automatically, it enables stable, performant apps through simple annotations instead of manual data orchestration.

Compiler-driven UI architecture is coming. This is your preview.

🕵️ 16:00 – Sébastien Morel (Secret Talk)

You know Sébastien Morel, CTO at Crystallize, from the React Norway stage — just not that role this time. After serving as MC for two years in a row, he’s switching sides of the mic and joining the speaker lineup to share lessons from building real-world systems with the community he’s helped shape.

Let’s just say… if you care about performance, architecture, and developer experience — you’ll want to be in the room.

🎸 18:00 – Rock n Roll

And then when you think it is over, get ready to crank up the volume with DATAROCK, Iversen, and God Bedring.

Why This Talk/Lineup Matters

Look at the flow:
Security → AI frameworks → Real-time collaboration → UX automation → Code minimalism → Observability → Async UX → Browser AI → Compiler-driven UI → Secret architecture insights.

This is modern React engineering. Not just hooks. Not just state management debates.

It’s how React fits into:

AI-native apps
Enterprise systems
Real-time collaboration
Performance-first architecture
Developer experience evolution

If you’re building serious products in 2026, this is your room.

Who Should Be There?

Senior React engineers
Frontend architects
Tech leads
Full-stack developers
AI-curious builders
People who are tired of shallow conference talks

If that’s you, don’t “maybe” this.

Tickets Are Live

Rock & React 2026 is not just another conference. It’s a gathering of people who care about building well.

Seats are limited at Rockefeller. And once they’re gone, they’re gone.

Join us in Oslo. Reserve your seat here.
Bring your curiosity.
Leave with sharper instincts.

See you in the pit. ⚛️🎸

⚡ SEO for Astro: How to Make the Fastest Framework Also the Smartest

Nebojsa Radakovic — Thu, 16 Oct 2025 13:54:49 +0000

Because speed is useless if search engines can’t find you.

TL;DR

Astro’s “content-first, JavaScript-last” philosophy gives you a massive SEO advantage right out of the box.
But to turn that raw performance into actual organic visibility, you need to wire structured data, routing, metadata, and caching correctly.
This playbook shows how to make Astro not just the fastest framework—but the smartest one too.

1. Why SEO Still Matters (Even for Lightning-Fast Sites)

Speed doesn’t guarantee visibility. Search engines don’t just reward performance; they reward clarity—clean HTML, accurate metadata, and structured relationships between pages.

Astro’s island architecture makes pages feel instant, but if your meta tags or sitemaps are off, Google still has to guess what’s inside.

That’s why technical SEO is just as important in Astro as in any JavaScript framework; only here, you’re working from a stronger base.

2. Rendering Models: The Astro Advantage

Astro flips the rendering problem on its head: it ships zero JavaScript by default and hydrates components only where needed.

That means Googlebot receives full, clean HTML—no hydration delay, no broken metadata, no client-side rendering headaches.

Model	SEO Impact	Typical Use Case
Static (SSG)	Best crawlability and performance.	Blogs, docs, landing pages
Hybrid (SSR)	Still SEO-friendly, as Astro serverside-renders full HTML.	Dynamic catalogs, search results
Islands (Partial Hydration)	Small interactive areas without hurting indexability.	Product cards, carts, forms

Rule of thumb: Let Astro handle static HTML by default, and hydrate only what’s truly interactive. Every unused <script> is one less millisecond in your LCP.

Explore web rendering options and solutions.

3. Core Web Vitals: Performance Is the Starting Line

Astro sites often crush Lighthouse scores straight out of npm create astro@latest, but it’s worth locking down a few habits:

LCP under 2.5s: preload hero images and fonts.
INP under 200ms: keep client components tiny.
CLS below 0.1: define image sizes and avoid late-loading elements.

Example:

<img src={Astro.resolve('../assets/hero.webp')} width="1200" height="600" alt="Hero image" loading="eager" />

Use Astro’s built-in image service:

---
import { Image } from 'astro:assets'
---
<Image src={hero} alt="Hero image" width={1200} height={600} format="webp" />

Combine that with compression (vite-plugin-compression), HTTP/2, and caching headers. Your SEO foundation becomes almost bulletproof.

4. Crawlability & Indexation

Astro makes serving static HTML trivial, but don’t forget the navigation signals crawlers rely on:

robots.txt

npm install astro-robots-txt

import robotsTxt from 'astro-robots-txt';

export default {
  integrations: [robotsTxt({
    policy: [{ userAgent: '*', allow: '/' }],
    sitemap: 'https://yourdomain.com/sitemap-index.xml'
  })]
};

Sitemaps

npm install @astrojs/sitemap

import sitemap from '@astrojs/sitemap';
export default {
  site: 'https://yourdomain.com',
  integrations: [sitemap()],
};

Both update automatically on build, meaning your content and product URLs stay discoverable—no manual updates required.

5. Metadata & Structured Data

Every page in Astro can export metadata directly in its frontmatter:

import { getProduct } from '../lib/api';
const product = await getProduct(Astro.params.slug);

export const prerender = true;
export const seo = {
  title: `${product.name} | My Store`,
  description: product.shortDescription,
};

Then inject metadata inside <head>:

<head>
  <title>{seo.title}</title>
  <meta name="description" content={seo.description} />
  <link rel="canonical" href={`https://yourdomain.com${Astro.url.pathname}`} />
</head>

For structured data:

<script type="application/ld+json">
  {JSON.stringify({
    "@context": "https://schema.org",
    "@type": "Product",
    "name": product.name,
    "image": product.image,
    "offers": {
      "@type": "Offer",
      "price": product.price,
      "priceCurrency": "EUR"
    }
  })}
</script>

Rich results often come down to clean, consistent markup like this. If you’re using a headless commerce like Crystallize or CMS like Contentful, you can inject data via Astro’s server-side GraphQL calls.

6. URL Structure and Routing Hygiene

Astro’s routing is file-based and static—great news for SEO.

✅ Use human-readable slugs:

/blog/how-astro-handles-hydration/
/shop/coffee-beans/ethiopian-blend/

✅ Configure canonical URLs globally:

// src/components/Canonical.astro
<link rel="canonical" href={`https://yourdomain.com${Astro.url.pathname}`} />

Avoid:

Query parameters for canonical pages
Duplicate /index.html or / variations
Trailing slash inconsistencies (astro.config.mjs → trailingSlash: 'always' or 'never')

Predictable paths = better crawl budget.

7. Image Optimization & Lazy Loading

Images often make or break both UX and rankings. Astro’s image service converts, resizes, and optimizes assets automatically:

<Image
  src={product.image}
  widths={[320, 640, 1280]}
  formats={['avif', 'webp']}
  alt={product.name}
/>

Tips:

Always set alt attributes (semantic relevance matters).
Don’t lazy-load above-the-fold media.
Cache assets at the CDN edge (Netlify, Vercel, or Cloudflare Pages).

8. Dynamic Content & Revalidation

Static generation is perfect for blogs—but what about stores, catalogs, or fast-changing data?

Astro supports SSR with caching and revalidation, keeping both performance and freshness in play.

Example:

export const prerender = false;

export async function get({ params }) {
  const product = await getProduct(params.slug);
  return {
    body: JSON.stringify(product),
    headers: { 'Cache-Control': 'public, max-age=3600' }
  };
}

This ensures crawlers always see up-to-date HTML without waiting for rebuilds.

9. Analytics & Script Strategy

Astro discourages unnecessary JavaScript—and that’s good SEO hygiene. When you do need tracking, load it responsibly. Say you use Plausible as your analytics tool:

<script is:inline async src="https://plausible.io/js/script.js" data-domain="yourdomain.com"></script>

If you must, or rather if you are packed with 3rd party scripts, to keep websites loading fast, use Google Tag Manager.

Example:

<Script type="text/partytown">
  {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXX');`}
</Script>

Alternatively, consider Partytown to offload heavy third-party scripts to web workers and preserve performance.

10. Debugging & QA

Finally, before going live, run a few sanity checks:

Crawl simulation – Use Screaming Frog or Sitebulb with JavaScript rendering off.
Rich result testing – Validate JSON-LD markup.
Core Web Vitals – Test on mobile using PageSpeed Insights.
Sitemap inspection – Confirm that newly added pages appear in your sitemap.
Cache headers – Check Cache-Control responses to avoid stale content. Remember: a build that’s “green” locally can still fail SEO audits if you forget canonical consistency or structured data validation.

11. FAQs

Do Astro sites rank better automatically?
They often do, but only if metadata and routing are handled correctly. Performance alone doesn’t guarantee SEO.

Is Astro good for eCommerce?
Yes. Combine static builds for categories with SSR for product availability, and you get the best of both worlds. Check out a Crystallize + Astro demo store built for speed and structure as an example.

What about multilingual or region-based sites?
Use hreflang tags and folder-based routes. Static output makes localization simple and SEO-safe.

Want to learn more SEO?
Continue with my original and complete eCommerce SEO Guide: How To Drive Organic Traffic In 2025?

Astro solved the performance problem. The rest—metadata, structured content, and crawl clarity—is up to you.

When you combine its speed with intelligent information architecture, your site stops just being fast… it becomes findable.

Tag manager for eCommerce decision checklist (developer + marketer friendly)

Nebojsa Radakovic — Wed, 08 Oct 2025 08:31:17 +0000

While working this week on a project to evaluate alternatives to Google Tag Manager (GTM), I dug into what both marketers like me and developers truly need when choosing a tag manager for eCommerce.

What follows is a decision checklist I put together (with a little help from my dev friends), based on real trade-offs I uncovered in my research, to help teams pick what’s best for them — balancing performance, privacy, governance, integration, cost, and vendor reliability.
What follows is a clear decision framework to help you choose the right tag manager before things get complicated.

Performance

Do we audit tags quarterly and delay non-critical ones? (Y/N)
Do we have a plan for server-side/edge where it helps? (Y/N)

Privacy & Compliance

Do we need EU data residency/self-hosting? (Matomo/Tealium)
Do we have consent capture integrated with our TMS workflows? (Y/N)

Governance

Do we need fine-grained RBAC, approvals, audit logs across multiple teams/brands? (Adobe/Tealium/Ensighten)

Integrations & Data

Do we prefer a CDP-first approach (Segment) to reduce pixels and unify schema? (Y/N)
Number of downstream tools we must support (now/12 months)?

Cost / TCO

Is a free client TMS enough (GTM), or do we need enterprise support & SLAs (Tealium/Adobe/Ensighten)?
If we need EU hosting or self-host, do we have infra budget/skills (Matomo)?

Vendor outlook

Any org-level preference/commitment to Adobe/Google/Twilio ecosystems? (If yes, bias selection accordingly.)

My Recommended Path Forward

Audit current tag setup. Measure how many tags you have, what third-party scripts they pull, tag firing order, and whether they affect key performance metrics (LCP, FID, etc.).
Define non-negotiables up front. Privacy & compliance (data location, consent), performance SLAs, governance (who deploys, reviews), cost ceiling.
Pilot one alternative. If you suspect GTM will become limiting, pick one alternative (say, Matomo for privacy, or Tealium / Adobe for enterprise) and run as a pilot for a subset of properties. Compare overhead, performance, and team effort.
Plan migration & training. If moving from GTM, migration will involve reconfiguring tags/triggers, retraining marketers/analysts/devs, and ensuring monitoring and rollback tools are in place.
Continuously monitor. Even with alternatives, monitoring tag performance, compliance, data fidelity, and costs over time is essential. Technology, regulation, and tool performance evolve.

References & Data Sources

Here are the main sources I used / that support claims above. You can check further details there.

"All about Googlr Tag Manager" - Tag Managers don’t have to be page-load killers.
“Tag Management Systems: A Comparative Insight on Google Tag Manager, Tealium, Matomo, and More” — pros & cons, overview of TMS options. Lounge Lizard
"GTM Test Environments Done Right" - Testing is a crucial part of managing and deploying tag.
“Choosing a Tag Management System: A Comparative Analysis” — useful on what to evaluate, how GTM, Tealium differ especially for privacy, integrations. Trackingplan.
“70-point comparison of 7 tag managers” including Matomo, GTM etc.; especially strong on privacy and hosting options. Piwik PRO
"What Are Google Tag Manager Security Risks?" - Google Tag Manager (GTM) is powerful precisely because it can inject and orchestrate third-party JavaScript at scale. That power is the attack surface.

The main thing is to figure out what you absolutely can't live without. Next, try out a few different options to see what clicks.

There are a bunch of "yes/no" questions for each category to help you nail down your decision. Use the resources shared here and good luck!

Tech SEO with Headless

Nebojsa Radakovic — Mon, 21 Jul 2025 12:26:56 +0000

A headless architecture empowers eCommerce businesses to deliver lightning‑fast, highly interactive storefronts without sacrificing search engine visibility. By decoupling content and presentation layers, you gain full control over crawlable sitemaps, semantic URLs, and metadata management—all critical for ranking in today’s AI‑driven search landscape.

So, what (and how) can you control via a framework or platform of your choice in a headless setup for SEO? Fortunately, as a headless commerce platform, Crystallize offers a rather unique perspective.

(Everything else ecommerce SEO can be found in the linked article)

Implementing Sitemaps & robots.txt & LLM.txt in Your Headless Frontend

Next.js

robots.txt: Simply create a robots.txt file in your project’s /public directory.
sitemap.xml: Either hand‑craft a static sitemap.xml under /public or generate it at runtime via getServerSideProps, returning XML with your product and category URL.

Astro

Use the astro-sitemap integration to crawl static routes and output sitemap.xml.
Leverage astro-robots-txt to auto‑generate robots.txt based on your published page.

SvelteKit

Define a +server.js endpoint that returns XML for your sitemap.xml, mapping over your route manifest.
Create a separate +server.js or static asset for robots.txt, listing disallowed paths (e.g., /admin/*, /search/*).

While robots.txt guides crawlers on URL access, llms.txt, an experimental best practice, helps LLMs prioritize, fetch, and order content. It should not be considered a guaranteed method for driving traffic or indexing. Implementation-wise, you can upload it to your project’s public directory.

Alternatively, you can rely on a platform you are using (like Crystallize) to define LLM text per page that would be included in the file at build time. Basically, you’d model out the fields you need from scratch.

Custom 4XX Error Pages

Delivering branded, helpful error pages improves UX and ensures crawlers don’t get stuck on dead ends.

Next.js: Drop a pages/404.js file—Next will statically generate it at build time.
Astro: Add 404.astro (or 404.md) in /src/pages; Astro will serve it for any missing route.
SvelteKit: Use a Svelte component at +error.svelte to customize both 404 and other 4XX responses.

For complete control, you can also configure your hosting platform’s error‐page behavior (e.g., Netlify’s _redirects file or a Vercel error edge function).

Managing 301 Redirects

Permanent redirects preserve link equity when URLs change. In headless setups, you can choose framework‑level or hosting‑level redirects.
Next.js: Define a redirects array in next.config.js:

module.exports = {
  async redirects() {
    return [
      { source: '/old-path', destination: '/new-path', permanent: true },
    ];
  },
};

Astro: In astro.config.mjs, add:

export default {
  redirects: [
    { from: '/old-url', to: '/new-url', status: 301 },
  ],
};

SvelteKit: Use the redirect helper in your +server.js:

import { redirect } from '@sveltejs/kit';
export function GET() {
  throw redirect(301, '/new-location');
}

Hosting‑Level (Netlify/Vercel/Cloudflare):
Netlify: _redirects file in publish folder:

/old-path  /new-path  301

Vercel: vercel.json with a redirects array.
Cloudflare Pages: Plain‑text _redirects in your output directory.

Rendering Canonicals in a Decoupled Frontend

To prevent duplicate‑content issues, emit a self‑referencing or preferred canonical URL tag in your headless pages.
Next.js: Use <Head> (or next-seo) in your page component:

import Head from 'next/head';
// ...
<Head>
  <link rel="canonical" href={`https://example.com${router.asPath}`} />
</Head>

Astro: Build the canonical using Astro.url in your

---
const canonical = Astro.url.pathname;
<link rel="canonical" href={`https://example.com${canonical}`} />

SvelteKit: In your +layout.svelte or page component:

<svelte:head>
  <link rel="canonical" href="https://example.com{$page.url.pathname}" />
</svelte:head>

Embedding these tags at build or render time ensures crawlers always see the correct URL.

3rd Party Scripts

Astro components support interactive elements through standard HTML <script> tags. For Next.js, next/script enhances the HTML <script> element to optimize the fetching and execution of additional scripts.

Structured Data

In a Next.js project, you can manage structured data (JSON‑LD) just as you would any other page head content—by injecting a <script type="application/ld+json"> block via the built‑in

component or a helper library.

Here are a couple of ways you can do it:

Assemble your schema object. In your page’s data‑fetching function (e.g. getStaticProps or getServerSideProps), build the JSON‑LD payload.

// pages/products/[slug].js
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.slug);
  const schema = {
    "@context": "https://schema.org/",
    "@type": "Product",
    name: product.name,
    image: product.images,
    description: product.description,
    sku: product.sku,
    brand: { "@type": "Brand", name: product.brand },
    offers: {
      "@type": "Offer",
      priceCurrency: "USD",
      price: product.price,
      availability: "https://schema.org/InStock",
    },
  };
  return { props: { product, schema } };
}

Inject via <Head>. In your page component, serialize and insert the JSON‑LD inside the <Head> tag so it’s rendered on the client and server.

import Head from 'next/head';
export default function ProductPage({ product, schema }) {
  return (
    <>
      <Head>
        <title>{product.name} -- My Shop</title>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
        />
      </Head>
      {/* ...rest of your page... */}
    </>
  );
}

Use a helper library (optional). For larger sites, next-seo simplifies SEO—including structured data—by letting you define your schema in a centralized config.

After deployment, test each page in Google’s Rich Results Test or Schema Validator to ensure your JSON‑LD is correct and being picked up by crawlers.

If you have repeated schema across many pages (e.g., sitewide Organization or Breadcrumb data), consider adding a custom _document.js or a top‑level layout component that injects those elements globally.

As for Astro, you treat structured data much the same way you would in any static‐site setup, including the above one with Next.js.

Your CMS or e-commerce platform defines structured data. Crystallize, for example, utilizes content modeling to describe all the necessary product information for your product page (including structured data, LLM summary, etc.). Your chosen frontend can then request and display this information via the API, including in Schema.org format.

Images Handling

Optimizing images can be achieved through various methods. Many frontend frameworks offer built-in solutions:

Next.js: The <Image/> component handles rendering and optimizes images for different viewports by incorporating lazy loading, responsiveness, resizing, and optimized file size and format by default.
Svelte: Vite's built-in image handling is often the most effective approach.
Astro: The <Image /> Astro component optimizes both local and configured remote images. Alternatively, consider using a third-party service, such as Cloudflare Image Optimization.

Finally, some CMS and e-commerce platforms like Crystallize provide image optimization as part of their service. For instance, Crystallize automatically compresses and converts uploaded images to AVIF and WebP formats, resizing them into multiple resolutions (e.g., 100px, 300px, up to the original image's maximum width). The @crystallize/react-image npm package then assists with rendering responsive and fast images.

Conclusion

By surfacing robots.txt, sitemap.xml, custom error pages, 301 redirects, and canonical tags directly in your headless frontend or hosting layer, you maintain tight control over SEO without sacrificing the flexibility of modern frameworks.

Continue with the original and complete version of the guide at the Crystallize blog 👉eCommerce SEO Guide: How To Drive Organic Traffic In 2025?

React Norway 2025: Reboot Your Dev Game in Oslo

Nebojsa Radakovic — Wed, 14 May 2025 09:47:03 +0000

Attention React aficionados! React Norway conference is now just a month away, and excitement is building. React Norway isn't just another tech conference; it's a unique opportunity to witness web tech's transformative power firsthand and connect with a passionate and welcoming community.

It's been a place where abstract concepts become tangible solutions and where individual developers coalesce into a supportive network of peers. So, whether you're a seasoned React or frontend veteran or just beginning your journey, React Norway is an unforgettable event.

🗓️ Mark Your Calendar: June 13, 2025
On June 13, 2025, the Scandic Holmenkollen Park Hotel in Oslo transforms into a haven for frontend developers. With only 350 seats available, this is an exclusive opportunity to immerse yourself in a day filled with cutting-edge talks, hands-on workshops, and networking that feels more like a reunion than a conference.

🎤 What’s on the Agenda?

Single track. 11 talks total and enough time to network and discuss with speakers and React like-minded folks. Quick intro to the talks.
Welcoming Talk: How do we React?
Our MC, Pedro Miranda, a backend developer at Crystallize, kicks off the day with a lighthearted yet insightful look at React's evolution. Expect a blend of humor, history, and a touch of Norwegian charm.

Real-time React Applications with WebSocket and Event Sourcing
Johannes Brodwall, Principal Software Engineer at Sopra Steria, delves into building real-time applications using WebSockets and event sourcing. Learn how to create seamless, live user experiences that go beyond traditional polling methods.

Ten Reasons Your Application Isn't Accessible and What You Can Do About It
Elise Kristiansen, Frontend Developer at Variant, addresses common accessibility pitfalls and offers practical solutions to make your applications more inclusive. A must-attend for developers aiming to build universally accessible web experiences.

Tanstack Start: Fresh Air for React
Atila Fassina, Senior Fullstack Engineer at Neon, introduces Tanstack Start—a client-side-first framework that leverages the best of the React ecosystem. Discover how this meta-framework can streamline your development process.

Privacy-First Architecture: Local-First and Alternatives to GDPR Popups
Explore privacy-conscious development practices with Radoslav Stankov, CTO at Angry Building. Learn how to design applications that prioritize user privacy without the annoyance of intrusive popups.

Check the full agenda at the React Norway website.

🎉 The React Norway Experience

Beyond the talks, React Norway is renowned for its vibrant community spirit. Last year, attendees enjoyed legendary meals and an afterparty that kept the energy high.

🔮 Looking Back to Look Forward

Reflecting on 2024, the conference was a resounding success. From engaging talks to unforgettable networking moments, it set a high bar. But as always, React Norway is about growth and evolution.

In 2025, we're scaling up—old-school, pixel art style—while maintaining the intimate, community-driven atmosphere that makes this event unique.

🎟️ Secure Your Spot

Tickets are limited, and with the event just around the corner, now's the time to act. Don't miss out on this opportunity to level up your React skills, connect with like-minded developers, and be part of a conference that feels more like a celebration of the React community.

👉 Get your ticket now!

See you in Oslo!

React Conferences – More Than Just Hype in 2025

Nebojsa Radakovic — Mon, 10 Feb 2025 13:55:18 +0000

Over the years, React conferences have evolved from niche meetups and technical deep dives to full-blown festivals of innovation, collaboration, and even a bit of showmanship.

As someone involved in event organization, I can attest that today’s conferences blend serious learning with unexpected, playful moments that remind us why we love community events. Just last year at React Norway, we had one of the most entertaining talks ever (proper entertainment). And it already feels like this year will be particularly pivotal as hybrid formats and global participation push the boundaries of accessibility and innovation, ensuring that every React enthusiast—from beginners to veterans—finds immense value and inspiration.

The React Landscape in 2025

The React ecosystem in 2025 is already buzzing with innovation, driven by advancements reshaping how we build and think about web applications. Cutting-edge features like server components, concurrent rendering, and the ever-evolving hooks system are not just buzzwords—they’re practical tools that enhance performance and developer experience daily.

Alongside these improvements, emerging frameworks and tools challenge the status quo, pushing for more streamlined workflows and better integration with serverless and cloud-native environments.

Meanwhile, the community is more vibrant and collaborative than ever, with a healthy mix of open-source contributions, cross-framework experiments, and plenty of spirited debates on best practices that continue driving React’s evolution.

And it's growing. Right now, there are more than 50 conferences/events for developers you can check in 2025. Same as every year, the following stand out to me for various reasons, with how close the location is being the most important one.

Conference Rundown: The Must-Attend Events

React Paris – Scheduled for March 20–21, 2025, in the City of Lights, React Paris promises an immersive experience combining technical deep dives with inspiring keynotes. Attendees can expect sessions covering the latest React patterns and innovations and plenty of opportunities to network with European thought leaders.

Who's talking? 2 days, 18 speakers including Tejas Kumar, Dominika Zając, Kent C. Dodds, Aurora Scharff, David Khourshid, Elian Van Cutsem and many more.

CITY JS LONDON 2025 from 23-25 April, 2025, is the culmination of boundless energy and success of a thriving community in London. Emerging from the collaborating efforts of four meetup groups in London, JS Monthly, Halfstack London Node User group and London JS Community in 2018. 3-day event, featuring 25+ speakers. Hurry up.

JavaScript fwdays’25 – Taking place in Kyiv on May 24, 2025, this conference brings together a vibrant mix of front-end experts. While primarily a JavaScript festival, its dedicated React tracks and workshops focus on cutting-edge developments and real-world use cases that push the boundaries of web development.

Featured speakers include Illya Klymov and Yuri Artiukh for now.

Future Frontend – May 27–28, 2025 at Dipoli in Espoo, Finland, Future Frontend is a celebration of what’s next in front-end development. With an emphasis on progressive frameworks, interactive demos, and live coding sessions, it’s the perfect venue for developers eager to see future trends in action.

For 2025, main themes are within the intersection of artificial intelligence (AI), web design, and web development.

17 speakers and 6 workshops have been announced for now.

🤘React Norway – Set for June 13, 2025 in Oslo, React Norway offers a cozy yet dynamic setting where community-driven talks mix with hands-on workshops. Bigger venue, same core: React, Reload, Repeat. We are known for candid, down-to-earth sessions that tackle both fundamental concepts and the latest React advancements, the best conference food ever (including Brunost), and networking even bigger event envy.

Who's talking? For now, we have:

The call for speakers is still open. Whether you're a seasoned pro or a rising star speaker, we want to hear from you!

React Summit – From June 13 to 17, 2025 in Amsterdam, React Summit is one of the marquee events on the React calendar. With 60 60-speaker lineup across 3 days and a focus on both technical mastery and industry insights, it’s a must for anyone serious about React.

WeAreDevelopers World Congress – Taking place in Berlin from July 9–11, 2025, this global congress isn’t solely focused on React but offers a comprehensive view of the developer ecosystem. Github, Microsoft, Stacjoverflow, Vercel, and others have their teams and speakers there. Expect cutting-edge sessions, inspiring keynotes, and a holistic approach to the future of software development.

REACT UNIVERSE CONF – Hosted in Wrocław, Poland, from September 2–4, 2025, this conference dives deep into the React universe. It blends technical sessions with creative storytelling, giving developers both the hard skills and the big-picture perspective necessary to innovate. 25 speakers, 4 workshops in 3 days. Call for papers open.

Shift Conference – Held in Zadar, Croatia from September 14–16, 2025, Shift Conference offers a refreshing twist with a focus on composable architecture and modern web paradigms. Its mix of technical talks, interactive panels, and relaxed networking sessions makes it a standout event in the region.

reactjsday 2025 – Set for October 16, 2025 in Verona, Italy, reactjsday is the Italian React Conference that combines tradition with modernity. Expect intimate sessions led by passionate speakers, plenty of collaborative workshops, and a distinctly Mediterranean vibe that makes learning fun. Call for papers open.

REACT INDIA 2025 – Taking place from October 31 to November 1, 2025 in Goa, India, this conference is a vibrant mix of technical rigor and cultural flair. With a strong focus on community building and real-world applications, REACT INDIA is perfect for developers looking to expand their horizons in a dynamic, emerging market.

As I said, my favorites. Still... each of these events brings its own unique flavor and focus, ensuring that whether you’re looking to sharpen your technical skills, expand your network, or get inspired, there’s a React conference in 2025 tailored just for you.

Honestly, I'm still planning which ones to attend besides React Norway OFC. May and September look like there are holes in my work schedule.

Any favorites of yours in this list? Or what are your favorites that I did not include here?

Final Testing, Going Live, and Summary (Nerd Streetwear Online Store) Part IV

Nebojsa Radakovic — Wed, 18 Sep 2024 08:05:31 +0000

From ideation to examples to step-by-step setup, the side hustle nerd t-shirt store built with Astro, Crystallize, and Stripe for payment by ChatGPT and proofread for accuracy.

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

Almost done. Final testing and going live plan.

7. Final Testing

Before going live, it’s critical to thoroughly test your site to ensure that everything works as expected. Even on such a small project, i.e., just a few products. Here’s a checklist to help you through this process with purpose and tooling explained.

Cross-Browser Testing:
- Purpose: Ensure your site looks and functions correctly across browsers (e.g., Chrome, Firefox, Safari, Edge).
- Tools: Use tools like BrowserStack or LambdaTest to automate cross-browser testing.
Mobile Responsiveness:
- Purpose: Verify that your site is fully responsive and provides a good user experience on mobile devices.
- Tools: Use your browser's developer tools to simulate different device viewports or test on actual mobile devices.
Functionality Testing:
- Checkout Process: Test the entire checkout flow, from adding items to the cart to completing a purchase with Stripe.
- Product Filtering and Wishlist: Ensure product filtering works as expected and the wishlist feature correctly adds/removes products.
- Dynamic Routing: Verify that dynamic product pages load correctly for different products.
Performance Testing:
- Purpose: Check your site’s performance, focusing on load times, interactivity, and overall user experience. You can find more information on performance KPIs and measuring here.
- Tools: Use Lighthouse (integrated into Chrome DevTools) or WebPageTest to analyze your site’s performance. Monitor metrics like First Contentful Paint (FCP) and Time to Interactive (TTI).
SEO Testing:
- Purpose: Ensure that your site is optimized for search engines.
- Tools: Use the Lighthouse SEO audit to check for best practices, including meta tags, structured data, and mobile-friendliness. Track your progress with this eCommerce SEO checklist.
Security Testing:
- Purpose: Verify that your site is secure, particularly with regard to payment processing and user data.
- Tools: Conduct a security audit using tools like OWASP ZAP to identify vulnerabilities.
Accessibility Testing:
- Purpose: Ensure your site is accessible to users with disabilities.
- Tools: Use accessibility testing tools like Axe or Lighthouse to identify issues and ensure compliance with WCAG standards.
Final Content Check:
- Purpose: Review all content on your site for accuracy, consistency, and clarity.
- Steps: Ensure product descriptions, pricing, images, and other content are properly displayed.

8. Going Live

Once your site has passed all the necessary tests, it’s time to go live:

Final Deployment:
- Ensure that your final build is deployed using your CI/CD pipeline. Verify that all environment variables and configurations are set correctly.
Domain Configuration:
- If you are using a custom domain, configure DNS settings to point to your hosting platform (e.g., Vercel or Netlify).
- Ensure that SSL is enabled for secure HTTPS access.
Monitoring and Analytics:
- Set up monitoring tools like Google Analytics or Mixpanel to track user behavior and site performance after launch.
- Configure error-tracking tools like Sentry to catch and report any user issues.
Launch Announcement:
- Announce the launch of DisBar store through your marketing channels, including social media, newsletters, and any relevant online communities.
Post-Launch Monitoring:
- After the site goes live, monitor performance, user feedback, and any issues. Be prepared to iterate and improve based on real-world usage.

9. Next Steps

While the DisBar store is now fully functional, there are always opportunities for further enhancements and additional features. Here are some suggestions for the next steps:

User Authentication:
- Implement user authentication using services like Auth0 or Firebase to allow customers to create accounts, track orders, and manage wishlists.
Advanced Search Functionality:
- Integrate an advanced search feature using Algolia or Elasticsearch to improve product discoverability and user navigation.
Personalization:
- Implement personalized product recommendations based on user behavior, previous purchases, and browsing history.
Content Management with CMS:
- The best thing about Crystallize is that you can use it for product management and as a CMS to manage additional content such as blogs, news updates, or promotional banners. Back to content modeling for those types.
Marketing Automation:
- Set up marketing automation tools to engage customers with personalized emails, abandoned cart notifications, and targeted promotions.
Enhanced Analytics and Reporting:
- Integrate more robust analytics and reporting tools to gain deeper insights into customer behavior, sales trends, and site performance.
Expand Payment Options:
- To cater to a broader audience, offer additional payment methods, such as PayPal, Apple Pay, or regional payment providers.
Mobile App Development:
- Consider developing a mobile app for the DisBar store to provide a more seamless shopping experience on smartphones and tablets.

Summary: Instead of Conclusion

The last time I did one of these, I was still using WordPress and moving to the Gatsby + DatoCMS stack on a side hustle🤪

It has been four years since then, and a lot has changed. For a marketing guy like me, building the nerd streetwear Online Store DisBar has been a challenging journey.

But it was not impossible. Thanks to the amazing tools in the space and, quite frankly, ChatGPT. I did all of this for $20$ per month and invested some time in training the assistant😎

Sure, I need feedback and code checking (whatever you do with AI needs to be vetted); sure, I could/should have done a better job at writing more precise prompts; sure, the name is terrible😁 (I hope to compensate for that with the hype), but you can't say you are not impressed with what is possible today.

I know I am.

Here’s a recap of the significant steps throughout this process:

Introduction and Project Overview: We started by defining the project’s scope, targeting the niche market of nerd streetwear. The project leveraged 🚀Astro for the front end, 🛒Crystallize for the back end, and 💰Stripe for payment processing.
Setting Up the Backend with Crystallize: We created a tenant in Crystallize, defined roles and permissions, and set up content models tailored to the nerd streetwear products. We populated the catalog with products and configured the home page, laying the groundwork for a structured and scalable e-commerce platform.
Building the Frontend with Astro: The front end was built using Astro, which allowed for the creation of a fast, optimized, and SEO-friendly static site. We connected the Astro frontend to the Crystallize backend using GraphQL, enabling dynamic routing and content fetching for product pages.
Designing the UI/UX: The design phase included creating logos, app icons, and t-shirt mockups using tools like DALL-E, ensuring the brand identity was consistent and visually striking. We also wireframed the site's main pages, focusing on usability and user experience, before translating those designs into actual code.
Integrating with Stripe: Stripe was integrated to handle secure payment processing, providing customers with a smooth and reliable checkout experience.
Advanced Features: We implemented product filtering, wishlist functionality, and internationalization (i18n) to enhance the user experience. SEO and performance optimizations were applied, ensuring the site was fast, accessible, and easily discoverable by search engines.
Deploying the Project on Netlify: The project was deployed on Netlify, leveraging its features for continuous deployment, global CDN, and custom domain management.

What now? Well, now that you’ve seen how to build a fully functional, modern e-commerce site using Astro, Crystallize, and Stripe, it’s time to apply these skills to your projects.

Whether you’re a marketer, developer, designer, or entrepreneur, the tools and techniques covered can help you create a unique online store that stands out in any niche market.

¯(ツ)/¯

As always, if you enjoyed reading this, please support my efforts by recommending and sharing this post to help others find it!

Let me know what you think. Please share your feedback and suggestions in the comment section below.

Advance Features and Deploying the Project (Nerd Streetwear Online Store) Part III

Nebojsa Radakovic — Tue, 17 Sep 2024 13:29:18 +0000

From ideation to examples to step-by-step setup, the side hustle nerd t-shirt store built with Astro, Crystallize, and Stripe for payment by ChatGPT and proofread for accuracy.

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

The backend and frontend are done. Let’s examine any advanced features I may need and where to deploy the project.

4. Advanced Features

To enhance the functionality and user experience of my DisBar online store, consider implementing the following advanced features.

Product Filtering

Product filtering allows users to narrow the product catalog based on specific criteria, such as size, color, or price.

Setting Up Filters:
- Define the filtering options based on your product attributes (e.g., size, color).
- Create a FilterComponent that allows users to select their preferences.
Implementing Filter Logic:
- Use Crystallize Discovery or Search API to update the product list dynamically based on the selected filters via GraphQL queries.
Integrating Filters on the Frontend:
- Display the filter options prominently on the product listing page.
- Ensure that the filtering is intuitive and provides real-time feedback.

Wishlist Functionality

Adding a wishlist feature allows users to save products they are interested in and return to them later.

Creating a Wishlist Context:
- Use React Context or another state management solution to handle the wishlist logic.
- Allow users to add and remove products from the wishlist.
Storing Wishlist Data:
- Store the wishlist data in local storage or sync it with the user’s account if authentication is implemented.
Displaying the Wishlist:
- Create a wishlist page that displays all the saved products.
- Provide options to move items from the wishlist to the shopping cart.

Internationalization (i18next)

To reach a global audience, implement multi-language support using a library like i18next.

Setting Up i18next:
- Install i18next and configure it with your available languages.
- Define translation files for each language, or use the Crystallize translation app to do the work for you.
Integrating i18n in Astro:
- Wrap your components with translation functions to serve content in the selected language.
- Provide a language switcher on the frontend to allow users to select their preferred language.
Handling Dynamic Content:
- Ensure that product descriptions, reviews, and other dynamic content are translated appropriately. In Crystallize, components are multilingual, so you can fetch your content based on the user's chosen language.

SEO and Performance Optimizations

Optimizing your site for search engines and performance is crucial for visibility and user experience.

SEO Best Practices:
- Use semantic HTML and appropriate meta tags for all pages.
- Generate a sitemap and robots.txt file for better crawlability.
Structured Data:
- Implement JSON-LD structured data to enhance search engine understanding of your content.
- Add structured data for products, reviews, and breadcrumbs.
Lazy Loading Images:
- Use the loading="lazy" attribute on images to defer the loading of off-screen images until the user scrolls to them.
- This improves initial page load times and overall performance.
Minimizing JavaScript:
- Ensure that your Astro project delivers minimal JavaScript to the client by default.
- Use Astro’s built-in optimizations to split and defer non-essential scripts.

By following these steps, or the steps I mentioned in the SEO checklist, you’ll create a highly functional, visually appealing, and performant e-commerce site that meets the needs of your target audience while showcasing your expertise in modern web development technologies.

5. Deploying the Project

Once my DisBar online store is built and tested, the next step is to deploy it so users can access it. This involves choosing a hosting platform for your eCommerce frontend, configuring continuous integration and deployment (CI/CD), and performing final testing before going live.

Choosing a Hosting Platform

Several hosting platforms are well-suited for deploying an Astro project. Here are some of the top options:

Vercel:
- Strengths: Vercel is optimized for static site generation and serverless functions, making it an excellent choice for deploying Astro projects. It offers fast build times, automatic SSL certificates, and a global content delivery network (CDN) for fast load times.
- Integration: Vercel integrates seamlessly with GitHub, GitLab, and Bitbucket, allowing automatic deployments from your repository.
- Ease of Use: The deployment process is straightforward—simply connect your Git repository, and Vercel will automatically detect and build your Astro project.
🗄️🌐☁🖥️Netlify:
- Strengths: Netlify is another powerful platform for deploying static sites and serverless functions. It provides automatic deployments, continuous deployment, and instant rollbacks. Netlify also has built-in forms, identity management, and analytics.
- Integration: Like Vercel, Netlify integrates with Git platforms for automatic deployments and offers a simple, user-friendly interface.
- Additional Features: Netlify’s Build Plugins and integrations can help automate tasks like image optimization, SEO checks, and more.
AWS Amplify:
- Strengths: AWS Amplify is a robust platform for deploying full-stack applications. It’s backed by AWS infrastructure and offers scalability and a wide range of services, including hosting, authentication, and real-time data.
- Integration: Amplify integrates with popular Git services and offers a CI/CD pipeline that supports automatic deployments.

Choosing the Right Platform:

Small to Medium Projects: Vercel and Netlify are excellent choices, offering ease of use, powerful features, and automatic deployments.

Large or Complex Projects: AWS Amplify might be more suitable if you need more control over the infrastructure and plan to integrate additional AWS services.

Simple Static Sites: GitHub Pages can be a good option if your project is straightforward and doesn’t require advanced features.

There is a fantastic post to dig deeper into the subject here > Where To Host Your eCommerce Frontend?

6. Deploying DisBar online store project on Netlify

I’ve decided to deploy DisBar online store project on 🗄️🌐☁🖥️ Netlify. A couple of reasons for that. I like them from day one. They support Astro, and the process is straightforward, thanks to Netlify's powerful tools for hosting, continuous deployment, and serverless functions.

Below is a detailed guide on deploying your Astro-based project integrated with Crystallize and Stripe on Netlify.

Step 1: Set Up Your Project for Deployment

Before deploying to Netlify, ensure that your project is properly set up for production:

Build Your Project: Ensure your Astro project builds correctly. You can do this by running:

npm run build

This command will generate a dist/ folder containing Astro's generated static files, which will be deployed to Netlify.
Install Necessary Plugins: For optimal deployment on Netlify, you might want to use the Netlify adapter for Astro, which configures your project specifically for deployment on Netlify:

npm install @astrojs/netlify --save

In your astro.config.mjs file, configure Astro to use the Netlify adapter:

import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';

export default defineConfig({
  output: 'server',
  adapter: netlify(),
});

Step 2: Set Up a Netlify Account

If you haven’t already, sign up for a Netlify account:

Sign Up: Go to Netlify and sign up using your GitHub, GitLab, or Bitbucket account. This will allow Netlify to link directly to your project repository.
Create a New Site: Once logged in, click "New site from Git" on your Netlify dashboard.

Step 3: Connect Your Repository

Choose Your Git Provider: Select the Git provider where your project repository is hosted (GitHub, GitLab, Bitbucket).
Authorize Netlify: Authorize Netlify to access your repositories.
Select Your Repository: Choose the repository that contains your DisBar project. Netlify will display a list of your repositories; simply click on the correct one.

Step 4: Configure the Deployment Settings

Set the Build Command: In the "Build command" field, enter:

npm run build

This tells Netlify to run the build process for your Astro project.

Set the Publish Directory: In the "Publish directory" field, specify:

dist

This is the directory where Astro outputs the final build files.

Environment Variables: If your project relies on environment variables (e.g., for Crystallize API keys or Stripe keys), add them under "Environment" settings. For example:

CRYSTALLIZE_TENANT_IDENTIFIER=your-tenant-identifier
STRIPE_SECRET_KEY=your-stripe-secret-key
ASTRO_ENV=production

Ensure that sensitive information is stored as environment variables rather than hard-coded in your project.

Deploy Preview Settings (Optional): You can configure settings for deploy previews, which allow you to preview changes before they go live. This is especially useful for collaborative projects.

Step 5: Deploy the Site

Deploy Your Site: After configuring your settings, click "Deploy site." Netlify will start the deployment process, which includes pulling the code from your repository, installing dependencies, building the project, and deploying the static files.
Monitor the Deployment: You can monitor the deployment process in real-time through the Netlify dashboard. If there are any issues, Netlify will provide error messages to help you troubleshoot.

Step 6: Configure DNS and Domain Settings

If you want to use a custom domain:

Add a Custom Domain: In the Netlify dashboard, go to your site's "Domain settings." Click "Add a custom domain" and enter your domain name.
Update DNS Settings: You’ll need to update the DNS settings for your domain registrar to point to Netlify’s servers. Netlify provides the necessary DNS records. If you’ve purchased the domain through a provider like Namecheap or GoDaddy, follow their instructions to update the DNS settings.
Enable HTTPS: Netlify provides free SSL certificates via Let’s Encrypt. For secure access, ensure that HTTPS is enabled in your domain settings. Step 7: Set Up Continuous Deployment
Automatic Deployments: With Netlify connected to your Git repository, every time you push a commit to your main branch (or any branch you’ve specified), Netlify will automatically rebuild and deploy your site. This continuous deployment setup ensures that your live site is always up-to-date with the latest changes.
Branch Previews: Netlify allows you to deploy previews for pull requests and branches. This helps test changes before merging them into the main branch.

Step 8: Post-Deployment Checks

Test Your Live Site: After deployment, thoroughly test your live site to ensure everything functions correctly. This includes testing payment processing with Stripe, browsing product pages, using filters, and checking device responsiveness.
Set Up Analytics and Monitoring: Integrate Google Analytics or another analytics tool to track user behavior on your site. Enable Netlify’s built-in analytics for server-side metrics like page views, traffic sources, and performance data.
Configure Redirects and Headers (Optional): You can create a _redirects file to handle URL redirects or a _headers file to manage HTTP headers (e.g., for security purposes).

Step 9: Monitor and Optimize

Monitor Performance: Use Netlify’s performance monitoring tools or external tools like Lighthouse to ensure your site loads quickly and efficiently. Regularly check for any new errors or issues that arise post-launch.
Ongoing Improvements: Optimize and improve your site’s performance, design, and functionality based on analytics and user feedback.

By following these steps, you can successfully deploy any online store on Netlify, ensuring a smooth, reliable, and secure online shopping experience for your customers.

AND we’re at the end of part three of this guide about building a side hustle using Astro, Crystallize, and Stripe for payment. Next, final testing and wrap-up.

Next 👉 Final Testing, Going Live, and Summary

¯_(ツ)_/¯

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.

Building the Frontend with Astro and Integration with Stripe (Nerd Streetwear Online Store) Part II

Nebojsa Radakovic — Mon, 16 Sep 2024 16:30:00 +0000

From ideation to examples to step-by-step setup, the side hustle nerd t-shirt store built with Astro, Crystallize, and Stripe for payment by ChatGPT and proofread for accuracy.

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

The backend is set, and the products are made. Let’s take care of the frontend and the payment.

2. Building the Frontend with Astro

🚀Astro is a modern framework that allows developers to create fast, optimized websites by leveraging the best parts of various frontend frameworks. Astro’s unique approach to building sites focuses on delivering minimal JavaScript to the client, translating to faster load times and better performance.

Key Features of Astro

Component-Based Architecture: Astro allows you to build pages using components from popular frameworks like React, Vue, Svelte, and others, all within the same project.
Zero JavaScript by Default: Astro delivers zero JavaScript to the client by default, but you can opt-in to use JavaScript where needed, ensuring only essential code is sent to the browser.
Static Site Generation (SSG): Astro is designed for static site generation, making it perfect for building fast and SEO-friendly e-commerce sites.
Server-Side Rendering (SSR): Astro also supports SSR, which can be useful for dynamic content or personalized user experiences.

Astro’s flexibility and performance make it an excellent choice for building the frontend of my nerd streetwear online store.

Setting Up an Astro Project

Setting up an Astro project is straightforward. Here’s how to get started:

Install Node.js: Make sure you have Node.js installed on your machine. You can download it from Node.js.
Create a New Astro Project: Open your terminal and run the following command to create a new Astro project:

npm create astro@latest

Navigate to Your Project Directory: Follow the prompts to set up your project. You can name the project something like "disbar-store." After the project is created, navigate to the project directory:

cd disbar-store

Install Dependencies: Install all the necessary dependencies for your project:

npm install

With your Astro project set up, you’re ready to start building the front end of your store.

Connecting Astro to Crystallize

To build a dynamic e-commerce store, we need to connect our Astro frontend to the Crystallize backend. This connection lets us fetch product data, display content, and manage orders directly within our Astro site using Crystallize's powerful GraphQL API. Check out the example on Astro's website.

Step-by-Step Guide to Integrating Crystallize with Astro

Install Crystallize SDK: Start by installing the Crystallize JavaScript SDK, which will help you interact with the Crystallize API. In your Astro project directory, run the following command:

npm install @crystallize/js-api-client

Create a Crystallize Client: To interact with your Crystallize tenant, create a client instance in your Astro project. Create a new file src/lib/crystallize.js and add the following code:

import { createClient } from '@crystallize/js-api-client';

export const client = createClient({
  tenantIdentifier: 'your-tenant-identifier', // replace with your Crystallize tenant identifier
});

Replace your-tenant-identifier with the actual identifier of your Crystallize tenant.
Fetch Data from Crystallize: With the Crystallize client setup, you can fetch data from your backend.
For example, to fetch all t-shirt products, create a new file src/pages/products.astro and add the following code:

---
import { client } from '../lib/crystallize';

const products = await client.catalogueAPI(
    #graphql`
      query ($language: String!, $path: String!, $version: VersionLabel) {
        catalogue(path: $path, language: $language, version: $version) {
          children {
            id
            name
            path
          }
        }
      }
    `,
     {
       Language: “en”,
       path: “/t-shirts”,
       version: version === 'draft' ? 'draft' : 'published',
     }
).catalogue;
---

<HTML>
  <head>
    <title>Products</title>
  </head>
  <body>
    <h1>Products</h1>
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <h2>{product.name}</h2>
          <a href={product.path}>View product</a>
        </li>
      ))}
    </ul>
  </body>
</html>

This code fetches all products that match the "t-shirt" shape from your Crystallize catalog and displays them in a simple list.

Use Astro Components for Rendering: Astro’s strength lies in its ability to use components from various frameworks. For example, if you want to use React for parts of your page, create a React component in src/components/ProductList.jsx:

import React from 'react';

const ProductList = ({ products }) => {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <h2>{product.name}</h2>
          <a href={product.path}>View product</a>
        </li>
      ))}
    </ul>
  );
};

export default ProductList;

Then, import and use this component in your Astro page:

---
import { client } from '../lib/crystallize';
import ProductList from '../components/ProductList';

const products = await client.catalogueAPI(
    #graphql`
      query ($language: String!, $path: String!, $version: VersionLabel) {
        catalogue(path: $path, language: $language, version: $version) {
          children {
            id
            name
            path
          }
        }
      }
    `,
     {
       Language: “en”,
       path: “/t-shirts”,
       version: version === 'draft' ? 'draft' : 'published',
     }
).catalogue;
---

<html>
  <head>
    <title>Products</title>
  </head>
  <body>
    <h1>Products</h1>
    <ProductList products={products} />
  </body>
</html>

This integration allows you to display product data dynamically fetched from Crystallize within your Astro frontend, providing a seamless connection between the backend and the user interface.

Creating Dynamic Routes

Dynamic routing is essential for an e-commerce site. It allows you to generate product pages on the fly based on data from your Crystallize backend. In Astro, dynamic routes are created using parameterized filenames.

How to Create Dynamic Product Pages in Astro

Create a Dynamic Route: To create dynamic routes in Astro, use square brackets in your filenames to denote a dynamic segment. For example, create a new folder src/pages/products/ and create a file named [slug].astro inside it:

---
import { client } from '../../lib/crystallize';

const { slug } = Astro.params;

const product = await client.catalogueAPI(
    #graphql`
      query ($language: String!, $path: String!, $version: VersionLabel) {
        catalogue(path: $path, language: $language, version: $version) {
          #your query based on shape
          name
          component(id: “description”){
            …on richTextContent {
               plantText
            }
          }
          …on Product {
             defaultVariant {
                price
                firstImage {
                   variants {
                     url
                   }
                }
             }
          }
        }
      }
    `,
     {
       Language: “en”,
       path: `/products/${slug}`,
       version: version === 'draft' ? 'draft' : 'published',
     }
).catalogue;

const { name, component, defaultVariant} = product.data;
---

<html>
  <head>
    <title>{name}</title>
  </head>
  <body>
    <h1>{name}</h1>
    <img src={defaultVariant.firstImage[0].url} alt={name} />
    <p>{component.description.plainText}</p>
    <p>{defaultVariant.price} USD</p>
  </body>
</html>

This file will generate a dynamic page for each product based on its slug (a unique identifier in the URL). Here is an example of fetching a product by its path from the Crystallize Dounut Astro boilerplate.
Link to Dynamic Pages:
Update your product list page to link to the dynamic product pages. Modify src/pages/products.astro to include links to the individual product pages:

---
import { client } from '../lib/crystallize';

const products = await client.catalogueAPI(
    #graphql`
      query ($language: String!, $path: String!, $version: VersionLabel) {
        catalogue(path: $path, language: $language, version: $version) {
          children {
            id
            name
            path
          }
        }
      }
    `,
     {
       Language: “en”,
       path: “/t-shirts”,
       version: version === 'draft' ? 'draft' : 'published',
     }
).catalogue;
---

<html>
  <head>
    <title>Products</title>
  </head>
  <body>
    <h1>Products</h1>
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <a href={`/products/${product.path}`}>
            <h2>{product.name}</h2>
            <img src={product.image.url} alt={product.name} />
            <p>{product.price} USD</p>
          </a>
        </li>
      ))}
    </ul>
  </body>
</html>

Test Dynamic Routes: Run your Astro project locally (npm run dev) and navigate to the products page. Click on a product link to ensure that it takes you to the dynamically generated product page.

Following these steps, you’ll have a fully functional e-commerce frontend powered by Astro, with dynamic routing and content fetched from your Crystallize backend. This setup allows you to manage your online store efficiently, ensuring it is scalable and easy to maintain.

3. Integrating with Stripe

💰Stripe is a leading online payment processing platform that provides businesses with the tools they need to accept payments over the Internet. It supports various payment methods, including credit cards, debit cards, digital wallets like Apple Pay and Google Pay, and even local payment methods.

Key Features of Stripe

Ease of Integration: Stripe offers well-documented SDKs and APIs that make integrating with various web applications straightforward.
Security: Stripe handles sensitive payment data securely, complying with PCI-DSS standards, which reduces the burden on developers to meet these stringent requirements.
Global Reach: Stripe supports over 135 currencies and a variety of payment methods, allowing you to cater to a global customer base.
Comprehensive Dashboard: Stripe provides a powerful dashboard where you can manage payments, view analytics, and handle disputes and refunds.

Given its powerful capabilities and ease of use, Stripe is an excellent choice for handling payments in your DisBar nerd streetwear online store.

Integrating Stripe

To accept payments on your e-commerce site, you must integrate Stripe with your Astro frontend and, optionally, with Crystallize for order management (BTW, since Crystallize is headless, you can go with whatever payment gateway you want).

There are a couple of ways to do it. One of the best guides I’ve found is Collecting Payments with Stripe while using Astro guide. Alternatively, AI suggested a more generic React way that follows:

Set Up a Stripe Account: Go to the Stripe website and sign up for a free account. Once your account is created, navigate to the Stripe Dashboard to obtain your API keys (Publishable Key and Secret Key) from the Developers section.
Install Stripe SDK: In your Astro project, install the Stripe SDK to handle payment processing:

npm install @stripe/stripe-js

Create a Payment Form: In your Astro project, create a simple payment form where users can enter their payment details. This can be done using Stripe Elements, which are pre-built UI components for collecting payment information. Create a new file src/components/PaymentForm.jsx:

import React, { useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { Elements, CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe('your-publishable-key'); // Replace with your Stripe publishable key

const PaymentForm = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!stripe || !elements) {
      return;
    }

    const cardElement = elements.getElement(CardElement);
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
    });

    if (error) {
      setError(error.message);
    } else {
      setError(null);
      setSuccess(true);
      // Send paymentMethod.id to your server to create a charge
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button type="submit" disabled={!stripe}>Pay</button>
      {error && <div>{error}</div>}
      {success && <div>Payment Successful!</div>}
    </form>
  );
};

const PaymentPage = () => (
  <Elements stripe={stripePromise}>
    <PaymentForm />
  </Elements>
);

export default PaymentPage;

Handling Payment on the Server: You must create a server-side endpoint to handle and confirm the payment intent. If you are using Node.js, create an endpoint in your backend (which could be part of a serverless function on platforms like Vercel or Netlify):

const express = require('express');
const Stripe = require('stripe');
const app = express();
const stripe = Stripe('your-secret-key'); // Replace with your Stripe secret key

app.post('/create-payment-intent', async (req, res) => {
  const { amount } = req.body; // Amount should be in the smallest currency unit (e.g., cents)

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount,
      currency: 'usd',
    });

    res.status(200).send({
      clientSecret: paymentIntent.client_secret,
    });
  } catch (error) {
    res.status(400).send({ error: error.message });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

The first line above, you don't need an express server because Astro takes care of it.

Integrating Stripe with Crystallize (Optional): After a successful transaction, you can send the payment confirmation to Crystallize to link Stripe payments with the company's order management. Use Crystallize’s API to create an order and associate it with the payment details (keep in mind that to access the Order API, you would need access tokens):

const { client } = require('@crystallize/js-api-client');

const crystallizeClient = client({
  tenantIdentifier: 'your-tenant-identifier',
  accessTokenId: ‘xXx’,
  accessTokenSecret: ‘xXx’
});

const createOrder = async (orderDetails) => {
  const order = await apiClient.orderApi(
        `#graphql
      mutation($input: CreateOrderInput!) {
        orders {
          create(input: $input) {
            id
          }
        }
      }
    `,
        {
            input: orderInput,
        }
    );


  return order;
};

By following these steps, you can securely process payments on your DisBar online store using Stripe, providing a smooth checkout experience for your customers.

AND we’re at the end of part two of this guide about building a side hustle with Astro, Crystallize, and Stripe for payment. Next, look at advanced features and ways to deploy the project.

Next 👉 Advance Features and Deploying the Project

¯_(ツ)_/¯

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.

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

Nebojsa Radakovic — Mon, 16 Sep 2024 11:57:59 +0000

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.

🚀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.
🛒Crystallize is an API-first headless commerce platform that provides the backend infrastructure for my online store.
💰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:

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.
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:

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.
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.
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.
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.
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.

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.
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.
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.

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.
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.
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.
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:

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.
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.
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

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.
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.
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

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.
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.
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.
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:

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.
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.

React (conferences) In 2024🤘

Nebojsa Radakovic — Thu, 08 Feb 2024 13:33:14 +0000

As React continues to dominate the web development landscape, the year 2024 is set to bring an exciting lineup of React and React Native conferences with an exciting lineup of speakers as well.

With a focus on the latest trends, techniques, and best practices in React development, these conferences are essential for developers looking to stay at the forefront of this ever-evolving technology. Many promise to offer unparalleled opportunities for learning, networking, and collaboration within the React community. But which ones are set to deliver this year?

That sounded harsh. Most do deliver. But with so many to choose from and, let’s be real, limited budgets we all have, a bit of planning is required to get the most for your buck.

Between working, planning my time, and my teammates (dev appearance) and (again) organizing React Norway, I wanted to check what our partners in React offer this year.

Join me as I explore the top React conferences of 2024, where innovation meets expertise in web development.

(that sounded marketing cool-ish, right?)

JSWorld 2024 [ February 28 - March 1st, 2024, Amsterdam ] - A 3-day JavaScript Celebration with 2500 JavaScript Developers flying in from 50+ countries. It looks like they have a lot of Vue and Frontend tech topics this year. Still, the list of speakers is truly awesome. And you should not limit yourself to just React.
Tickets from: 1-day Ticket (valid 1 March) at RAI Amsterdam - €349 (ex VAT).

🔥React Paris [ March 22nd, 2024, Paris ] - Expect talks about React Server Components, AI, Accessibility, Design, Suspense, Performance, State, Remix, Typescript, and more! A great lineup with Tejas Kumar, Atila Fassina, Aleksandra Sikora, Shaundai Person, and others promises a lot. Believe me, a few of them have been speaking at React Norway, a few are to speak this year, and a few I'd love to see in the near future at RN.
Tickets from: Regular Bird Ticket €449.

Epic Web Conference 2024 [ April 10-11, 2024, Park City, Utah ] - The Full Stack Web Development Conference of Epic proportions. The mere presence of Remix guys is good enough for me. Workshops are a big plus. For me, a potential problem for US conferences is the cost of traveling. But I’m hopeful.
Tickets from: Early bird $300.

🔥React Miami [ April 19-20, 2024, Miami, Florida ] - A React community-centered celebration created by developers for developers and easily one of the best React conferences on the other side of the Atlantic Ocean :-) Vercel, Mux, Wix, Stately (2022 Reatc Norway sponsors) people alongside Theo Browne the YouTuber, Swyx, Wes Bos, Kent C. Dodds, Angie Jones, Brian Douglas, and others.
Tickets from: Early Bird All Access Ticket $399.

React Conf 2024 [ May 15-16, 2024, The Westin Lake Las Vegas Resort & Spa, Henderson, Nevada ] - Join Meta, Callstack, and the React team for the 7th React Conf. Hear from the React team.
Tickets from: Ticket Lottery (limited availability).

CityJS Athens 2024 [ June 6-8, 2024, Athens Grece ] - Two days of warm-up Workshops and Meet-ups, followed by a One-day Javascript Conference. 25 speakers and six workshops.
Ticket from: Early bird €108

React Summit [ June 14 - 18, 2024, Amsterdam ] - Every year, they pull impressive numbers, and there's no difference this year as well. 60+
Speakers sharing latest insights, 10K+ Devs from all over the globe. Really cool lineup building up as well. However, I'm scheduled for a better one on June 14th 😕
Tickets from: Regular in-person Jun 14th and remote June 18th, €560.

🔥React Norway [ June 14th, 2024, Farris Bad Hotel in Larvik, Norway ] - RN is an exclusive (250 attendees only) annual React and frontend tech conference. The 2024 conference will be our 4th one, and with all the talks, brunost, and bikes flying around last year, it’s gonna be challenging to top last year’s event. Thankfully, we already have Aleksandra Sikora, Vinicius Dallacqua, Elian Van Cutsem, and Sébastien Morel (as Conference MC) in our speakers lineup and are planning something a bit different.
Tickets from: Early Bird €399 / then €499.

Honorable mentions / more to consider:
JSDays.de [ March 18-21, 2024, München, Germany ]
Web Day 2024 [ March 27th, 2024, Milano, Italy ]
JSHeros [ May 23-24th 2024, Cluj-Napoca, Romania ]
Render Alt 2024 [June 12 – 14, 2024, Atlanta, Georgia ]
React Next [ June 24th, 2024, Tel-Aviv, Israel ]

Why did I stop in June? Vacation. Rest, recupe, and then start all over again in August. Look for the follow-up to this, then.

The Best Practices for Tech Writing

Nebojsa Radakovic — Tue, 20 Dec 2022 11:32:55 +0000

👊NOTE: Last week, Crystallize had a team gathering in Portugal, and I was tasked to talk with our devs about tech writing, docs, and blog. What you see here is the gist of that talk turned into a blog post.

Devs, why don’t you write more? What’s stopping you? Language? Topics? Lack of interest. Impostor syndrome? You don’t have it in you? I can go on...but... I hope it is a combination of you've never thought about writing before, and you just need a little more motivation.

Whatever the case may be, there are a couple of good reasons why you should start writing:

Writing helps you grow as a person and developer. You see, by outlining your ideas on a topic of interest, you actually delve further into the issue at hand and have a greater understanding of what you learned, what you could have improved upon, or what needs to be changed right away.
Writing helps you document your experience. Since brain memory implants are not yet the standard for humans, writing down your experiences will help you in the long run. For example, when you need to address a similar issue on a new project, it’s easier to have it written down already than trying to remember the solution. Or, if you write for the public, sharing your experience might help you get feedback from the audience and learn a thing or two.
Writing is networking for introverts. I generalize here, but I’ve found most devs to be introverts (hell, even I am an introvert, but I fake the extrovert part of me). Seriously, by sharing your writing, you grow your network of internet friends across channels ie writing makes your networking that much easier.
Recognition of your work and your expertise. I’ll talk about it a bit later.

You can write for yourself, which is fine, and you should do it, but I am not really interested in your diary (unless you have nice pics to share with it). Or you can write just like Franz Kafka did for the better part of his life. But waiting for someone else to release your writing after your death won’t help us as a company (unless royalties go to us). So, I’m not interested in that either.

However, I am interested in you writing docs and for our blog and in you covering dev topics for our growing dev audience.

That sounds great, but how do I start writing?

There are a couple of things you should be aware of right from the start. Don’t be put off by them. I promise you the rewards you get (besides a beer from me) are spectacular. So...

Finding the time

It takes a while to do proper research and write a post. It also takes knowing what you want to write about, your intended audience, and what problems you are solving for your audience with your writing.

Now, there are three types of posts you guys can be involved with in company and plenty more at free options like Dev.to, Hashnode, Medium, etc. But let’s stick to our company blog. I’m open to talking about others. You can DM me. So...our topics:

Labor of love, i.e., topics you care about and you have an insight you’d like to share
Topic/keyword posts, i.e., topics we as a company are interested in and would like to appear/rank for
Case studies, i.e., posts/articles on things we do for our product and our clients
Writing each one of these requires a bit of a different approach. But they also have a couple of common things you need to be aware of or tackle before starting writing.

Story and audience

Whatever you want to write about, you need a story as to why you are writing about it in the first place. What solution/value would be reading the post bring to your audience? What problems have you faced, and how did you overcome them? What did you learn?

I like to say that the best way to learn is from the experience of others and personal mistakes. That really seems to be the case when it comes to content and the internet, and the B2B approach. People read more and relate more to posts that are written from experience. That seems to be more and more true for Google results as well, being that it is getting better at understanding the intent behind the searched keyword.

So you’ll need to convey a story that would lure your audience and give them what they want, the way they want it.

We'd all be writers if there is a recipe for the above. There is none. But some tips can help you get better at writing. And that might help you nail the above.

Writing steps

Set goals. Know exactly how much time you have to finish writing.
Set a timer. i.e., I'll start now.
Find your external sources before you write. This is part of the research phase.
Create an outline. Structure before writing.
Force yourself to write straight through to the end. Don't self-edit as you go!
Write the body of the article and THEN write the intro.

Writing tips

Do proper research on the topic you are covering. Go beyond the first ten spots in Google search for a couple of keywords. Read a couple of those annoying Readers also enjoyed links. Reddit for answers. Follow the rabbit hole just as you would while watching YouTube or TikTok videos.

Make sure you are reading credible sources. Don’t look for sources that would only back up your claim. Look for sources that have merit to their word and would prove your claim is right. Or wrong.

Keep your content organized. That means you should have the beginning, the middle, and the end to your story. That also means you should organize your content by the HTML hierarchy. The elements are there for a reason, and the most obvious one is to keep your writing in an organized structure so the readers (and search engines), if they want, can skim the content.

For those interested in the black arts. Use the inverted pyramid style of content writing used by true journalists. The top of the inverted pyramid summarizes the most important elements of a story in order to draw the reader in and get their full attention. The parts that follow go into detail.

Make the TITLE and the first paragraph that stands out. You can write the best essay ever, but it would mean nothing if you fail to spark interest in your audience. In today’s world of TITLE skimming, having a catch TITLE and a first paragraph is all you have to spark an interest. The simple reason behind this, really. In today’s oversaturated digital world, the average human attention span is 8 seconds. Even goldfish (9 seconds) are better than humans.

Images and links draw attention. One way to tackle the attention problem is with images/videos. They re-spark attention. Walls of words are dull, however interesting a topic might be. Words and images are powerful when making a point or allowing a break for your audience (btw you don’t have to use gifs all the time). Links to resources that inspired you or helped you understand something or back up your claim proves you’ve done proper research.

Video content offers a more immediate experience with much more information served in a short time than a simple blog post. It triggers an emotional response much faster than simple blog posts, on which ENGAGEMENT can be, well, exploited. Engaged viewers are more likely to share the video with others. They spend more time on your website, thus allowing you to exploit them to gain exposure, increase your traffic, brand your product, or earn additional revenue with your video ads.

What about style/voice, grammar, and all that?

Well, no one can tell you how to write. Your voice/style develops and changes over time, just like you do. People don’t say practice makes perfect for nothing. I think your style is somewhere between the way you talk, dry tech documentation, the topic you are covering, and your target audience.

As far as grammar is concerned, even native English speakers get it wrong sometimes. The best we can do is play it by ear (like I do), use what you’ve learned so far (like I do), learn more by reading in English (like I do), and cheat with Grammarly or some other tool (like I do).

Why should you write?

You’ll make my job that much easier for one.

Word of mouth is the most successful way of promoting a brand or a product. Modern-day businesses have that option online, mostly thanks to social media. I’m not talking about shares, likes, reviews, and comments. I’m talking about the employer and employee branding.

Quickly, the overview of both.

What is employer branding?

Employer branding is a term associated with what a brand does to promote itself as a fantastic workplace. Today it is not nearly enough just to offer a good paycheck and the right conditions for a job opening. To get the best talent, companies need to stand out with their company culture and code of conduct that resonates with their candidates. And other perks (like annual retreats or beer money).

What is employee branding?

On the other hand, employee branding is usually associated with how to shape employees’ behavior so that they project the brand identity through their everyday work behavior. Employee branding is about getting your employees on board with who you are, what you do, and what you as a company stand for. Then, through social sharing and word of mouth, convey those brand messages in the best possible light.

Sounds fun, right?

For companies, there are huge benefits to practicing both of these. But here, I'd like to talk about employee branding from a different perspective, i.e., not what you can do for your brand but what your brand can do for you.

Benefits of employee branding

Promotion and building of your personal brand. The stronger the brand you work for is, the stronger your personal brand is. Think of it this way, when you see someone is working for Google, Facebook or Crystallize, you immediately assume he/she's got the knowledge. For startups, brand strength is built with product quality, marketing efforts, and employee branding (think Netlify, think their dev advocates, and how they, with their name, give strength to the company just as the company gives strength to their names.).

Credibility. By telling/sharing brand stories, you add credibility to the brand, the story itself, and your part in it. For example, Ahrefs CMO frequently shares its internal scheduling and hiring processes. By being transparent about what they do and how they do it, they influence how the community of their interest, SEOs, perceive them.

Authoritativeness. Being a part of an authoritative source/brand pours some of that authority on you as well (remember what I mentioned for people that work for Google, well...that’s it).

These three influence how people perceive you and your abilities. Are you someone that is in the know-how? Are you easy to work with? What are your main interests in a job? And by telling a story about your work, your company, and how you are telling it, you directly influence the brand you work for.

And YES, writing is one thing that works amazingly well for both us as a company and you as a PERSONAL BRAND.

Side note

Candidates who want to know more information about working for a certain company prefer talking to the employees of the company as opposed to talking to the employer. On the other side of the spectrum, HRs who want to know more about candidates prefer talking to previous employers.

Like it or not, we live in the age of social media, and to some extent, if it does not appear on soc. media it did not happen. I've learned it the hard way because I never actually wanted to participate in any kind of employee branding. TBH at one time, this diminished my prospects of finding new ventures because I did not have actual proof of work.

I opted out for a different approach i.e., provide value upfront when applying for work, which in my case worked, but I think it would have been so much easier for me if I had soc.media proof.

Then again, I would not become such a sweet talker :-)

To wrap things up...

Get active, get creative, and get going! Don’t be afraid of failure. You don’t think of it while coding, so why would you burden yourself with it when writing?