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.
