Virtual Lolly

Virtual Lolly is a JAMstack demo site that generates shareable virtual lollipops to pep people up, demonstrating a static-first architecture with serverless API fallbacks.

What is Virtual Lolly?

Virtual Lolly is a proof-of-concept project that lets users create a virtual lollipop (lolly) with a message and send it to someone via a unique URL. The site accepts user input through a form, saves it to Fauna DB using a Netlify serverless function, and gives back a shareable link. It runs on Netlify with Eleventy (11ty) as the static site generator, and is also documented in a CSS-Tricks article that explains how it works.

Key Features

• Static-first generation with Eleventy — All lolly pages are pre-rendered as static HTML during the build, so existing links load without server round-trips.
• Serverless function for new content — When a user creates a lolly, the data is written to Fauna DB via a serverless function, allowing dynamic submissions on a static site.
• Custom 404 routing as fallback — Netlify's custom 404 rules redirect requests for not-yet-built lollies to a client-side fetch that pulls the content from Fauna DB and renders it in the browser.
• Fauna DB for storage — User-generated lolly messages are stored in a serverless database and served through the content API.
• Deployed on Netlify — The project is hosted on Netlify with the deploy status visible in the README, and the repo is set up for continuous deployment.
• Learning resource — A CSS-Tricks article describes the architecture in detail, making the repo a working example of a static-first, prerendered JAMstack site with serverless rendering as a fallback.

Who is it for?

• JAMstack developers who want to see a complete example of combining static pre-rendering with serverless dynamic content.
• Eleventy users looking for a real-world project that uses the static site generator alongside a serverless function and a content API.
• Netlify users interested in using custom 404 routing as a way to serve dynamic content before a static build catches up.

What can you do with Virtual Lolly?

• Create a shareable virtual lolly: submit a message through the form, and the site returns a link to a lolly page that displays it.
• Study the static-first pattern: the repository demonstrates how new user-generated content is served from a content API while a static version is simultaneously built for future visits.
• Use it as a reference for your own projects: the code shows how to integrate Eleventy, FaunaDB, and Netlify serverless functions in one deployable app.

How does it work?

When a user creates a lolly, the form data is sent to a Netlify serverless function that writes it to Fauna DB. The generated URL points to a path that isn't statically built yet. On the first request, Netlify's custom 404 handling serves a page that fetches the lolly data client-side from Fauna and renders it. The site then runs a build to generate a permanent static page for that URL.