Project12e Virtual Lolly App

The Project12e Virtual Lolly App is a serverless JAMstack boilerplate for a virtual lollipop gifting website, built with GatsbyJS, TypeScript, FaunaDB, GraphQL, and Netlify Functions.

What is the Project12e Virtual Lolly App?

This boilerplate demonstrates a complete serverless JAMstack architecture: a GatsbyJS front end, a GraphQL API deployed as a Netlify function, and FaunaDB as the data store. Users can create a virtual lolly via a form on the "/create-new" route, and each lolly gets its own static page generated at build time. The project is fully typed with TypeScript, developed with Storybook using the Component Driven Development (CDD) approach, and deployed to Netlify.

Key Features

• Form creation — A form on "/create-new" built with Formik and Yup for validation, letting users pick colors, a recipient name, and a message.
• FaunaDB storage — All lollipop information is stored in FaunaDB, with CRUD operations demonstrated through the GraphQL API.
• GraphQL API — A GraphQL API deployed as a Netlify function on the path "/new" to interact with FaunaDB.
• Static page generation — All lollies are fetched at build time and static pages are built for each one, improving performance and SEO.
• SSR fallback — A Netlify function (showLolly) serves lollies that don't have a static page, acting as a server-side rendering fallback so any lolly remains accessible.
• Storybook CDD — Built with Component Driven Development using Storybook; the Storybook is also built and deployed separately.
• TypeScript support — Fully typed with TypeScript, including gatsby-config, gatsby-node, gatsby-browser, and gatsby-ssr files.
• Deployment & CI/CD — Site hosted on Netlify with CI/CD handled by Netlify; Storybook CI/CD is handled with GitHub Actions.
• Responsive design — Completely interactive and responsive design using vanilla CSS, with no additional CSS framework.

Who should use the Project12e Virtual Lolly App?

• Gatsby developers — who want a ready-made serverless JAMstack example integrating Gatsby with FaunaDB, GraphQL, and Netlify Functions.
• Frontend developers learning JAMstack — can study how static generation, serverless functions, and GraphQL combine in one project.
• Developers adopting Storybook — see a working setup where components are built in isolation and the Storybook is deployed via GitHub Actions.
• Teams building gifting or interactive apps — can reuse the virtual lolly concept for similar personalized, shareable URL experiences.

What can you do with the Project12e Virtual Lolly App?

• Create a virtual lolly — Users fill out the form to choose lolly colors, recipient, and message; the data is saved to FaunaDB and a page is generated for it.
• Share lollies — Each lolly gets a static page at build time; if a page isn't built, the showLolly function handles it dynamically, so every lolly is accessible.
• Learn CRUD with GraphQL — The project demonstrates CRUD operations on FaunaDB through a GraphQL API backed by Netlify Functions.
• Kickstart a Storybook setup — Use the project as a starter that already has Storybook configured, with components developed via CDD and deployed automatically.

How does the Project12e Virtual Lolly App work?

The app is bootstrapped with GatsbyJS. A user submits the lolly form, which uses Formik and Yup for validation; the data goes to a GraphQL API deployed as a Netlify function at "/new", which writes to FaunaDB. At build time, Gatsby fetches all lollies and generates static pages for each; for lollies without a static page, a Netlify function (showLolly) provides a dynamic fallback. The entire codebase is typed with TypeScript, and components are developed in isolation with Storybook.

FAQ

Where is the app deployed?

The web app is deployed to Netlify and can be accessed at https://virtual-lolly-p12e.netlify.app/. The Storybook of the components is also deployed at https://virtual-lolly-storybook-p12e.netlify.app/.

What database does this use?

The project uses FaunaDB to store information about all lollipops. It interacts with the database through a GraphQL API deployed as a Netlify function, demonstrating CRUD operations using GraphQL.

Does this app support TypeScript?

Yes, the project is completely typed with TypeScript. TypeScript support is included for Gatsby configuration files, Node API files, browser files, and SSR files, as well as for all components and logic.

What is the SSR fallback?

The app generates static pages for all lollies at build time. For lollies that do not have a static page, a Netlify function named "showLolly" acts as a server-side rendering fallback, so any lolly created can still be accessed.

How is Storybook integrated?

The project is built using the Component Driven Development (CDD) approach with Storybook. The Storybook is also built and deployed, with CI/CD handled by GitHub Actions, allowing components to be developed and tested in isolation before being integrated into the Gatsby app.