Project12d Bookmarking App is a serverless JAMstack bookmarking application template built with Gatsby, FaunaDB, GraphQL, Netlify Functions, and TypeScript, providing a complete dashboard for managing bookmarks with full CRUD operations.
What is Project12d Bookmarking App?
Project12d is a ready-to-deploy bookmarking app bootstrapped with GatsbyJS and hosted on Netlify. It uses FaunaDB as its database, exposed through a GraphQL API that runs inside a Netlify Function. The entire codebase is typed with TypeScript, including configuration files like gatsby-config, gatsby-node, gatsby-browser, and gatsby-ssr. The frontend is built with React and styled with Material-UI components, delivering a responsive and interactive user interface.
The app demonstrates a full serverless JAMstack architecture: a static Gatsby site that talks to a GraphQL API via Netlify Functions, which in turn interacts with FaunaDB. State management is handled by Apollo Client's InMemoryCache and React's Context API, and the project includes CI/CD via Netlify's built-in deployment pipeline. A live version of the deployed web app is available at https://bookmarking-app-p12d.netlify.app/.
Key Features
- Dashboard for bookmark management — Users get a dedicated dashboard to manage all of their bookmarks in one place.
- Full CRUD operations — Create new bookmarks, update existing ones, delete individual bookmarks, and perform batch deletes.
- GraphQL API on Netlify Functions — A GraphQL API is hosted inside a Netlify Function to provide a typed interface to the data layer.
- FaunaDB integration — Bookmark data is fetched from and written to FaunaDB using GraphQL queries and mutations.
- TypeScript throughout — The project is completely typed with TypeScript, including Gatsby's special configuration files.
- Material-UI responsive design — The UI is built with Material-UI components, making it fully interactive and responsive.
- Netlify deployment and CI/CD — The site is hosted on Netlify with continuous integration and deployment set up out of the box.
Who is it for?
- Gatsby developers looking for a reference implementation of a full-stack JAMstack application with serverless functions and a real database.
- Developers learning FaunaDB and GraphQL — this project shows how to perform CRUD operations against FaunaDB through a GraphQL API.
- Hobbyists and makers who want a personal bookmarking app they can deploy quickly and customize to their needs.
What can you do with it?
- Deploy a personal bookmark manager: Use the dashboard to save, edit, and remove bookmarks from any device.
- Study a serverless architecture: Explore how Gatsby static generation, Netlify Functions, and FaunaDB work together in a single project.
- Extend the app: Add new fields to bookmarks, integrate with other services, or restyle the Material-UI components to match your brand.
