Project12d Bookmarking App

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.