Prototypr Frontend is an open-source publishing platform frontend built with Next.js and Strapi, designed for blogs focused on prototyping, UX design, and front-end development.
What is Prototypr Frontend?
Prototypr Frontend is the Next.js frontend app of the Prototypr blogging platform, which covers prototyping, UX design, front-end development, and related topics. The repository contains only the frontend code; the backend is a Strapi headless CMS, and content editing uses a Tiptap/Prosemirror-based editor called Typr Editor. The project is created by Graeme Fulton and has previously received backing from Adobe Fund and Interledger Foundation for Web Monetized Publishing.
Key Features (What makes it stand out?)
Prototypr Frontend bundles a range of community publishing features that have been added while running the live Prototypr site. The core feature set includes:
- User management — Customizable user profiles with profile picture, bio, and personal info; login via magic email or social providers; invite-only signup with a global secret passcode or individual email invites.
- Creator roles — Multiple users can be added as 'creator' of a post, supporting collaborative authorship.
- Sponsorship booking — A booking calendar accepts sponsorship reservations through Lemon Squeezy checkout, automatically places the booked sponsor in the available slot, and supports a default fallback sponsor.
- Rich text editor — Tiptap/Prosemirror-based Typr Editor includes image upload to Strapi or AWS backend, video upload, Tweet embed, and YouTube embed.
- Post permissions — Users can edit only their own posts, and drafts are visible only to the post owner.
- AI content helper (sponsorware) — Experimental features gated behind GitHub sponsorship include an AI news aggregator that summarizes articles for the news feed and an AI editor inside Strapi that creates product listings and galleries from a given URL.
- Tech stack — Built with Next.js using Static Generation, Strapi as the headless CMS data source, and Node v14.17.4 as the runtime.
Who is it for?
Prototypr Frontend suits communities and publishers building a design/development blog with member accounts and sponsored content. Writers and content creators get a rich editor with media embeds and upload support. Developers can study a real-world Next.js + Strapi integration, though the README notes the repo is for reference only until documentation and seed data are published.
What can you do with it? (Use cases)
Prototypr Frontend enables community publishers to run a sponsor-supported blog, manage multi-author content, and curate news with AI assistance. Here are concrete scenarios:
- Run a sponsor-supported blog — Accept sponsorship bookings through a Lemon Squeezy calendar and automatically display the booked sponsor in the designated slot, with a fallback sponsor when no booking exists.
- Publish multi-author content — Assign multiple creators to a post, control draft visibility per owner, and manage invites for new members.
- Curate a news feed with AI — Use the experimental AI news aggregator to summarize articles into a news feed (requires sponsorship access to the sponsorware features).
How does it work?
The frontend connects to a Strapi CMS backend as its data source. To run it locally, clone the repository, run npm install --no-optional (Node v14.17.4), create a .env.local file with your Strapi URL and auth secrets, and start the dev server with npm run dev. The repo is currently offered as a reference; there is no documentation or seed data yet for a full local setup.
FAQ
Is Prototypr Frontend free to use?
The code is open source on GitHub, and the core features are public. Some experimental features, such as the AI content helper, are restricted to GitHub sponsors as sponsorware.
Can I run this project locally?
Not fully yet: the README states the repo is for reference only and lacks the documentation and seed data needed to set up the platform locally. However, the Typr Editor is available separately as the tiptypr NPM package.
What tech stack does Prototypr Frontend use?
It uses Next.js for the frontend with Static Generation, Strapi as a headless CMS backend, and a Tiptap/Prosemirror-based editor called Typr Editor. The required Node version is v14.17.4.
How does the invitation system work?
Signup is invite-only: users can join with a global secret passcode, or they can be invited individually by email. Profiles can also be verified manually by admin approval.
