Open-source Publishing Platform

Built with Next.js, Strapi.io, and Typr Editor, by graeme

Prototypr is an open-source blogging platform that focuses on prototyping, UX design, front-end development, and beyond, serving as a hub for designers and developers to discover the latest tools, resources, and insights in these fields.

In the past, Prototypr has been backed by Adobe Fund, and Interledger Foundation to build a Web Monetized Publishing platform.

Important: This repo is only the Next.js Frontend app, but the features below describe the whole project.

---

⚠️ Use as reference only

This repo is for reference only - there's currently no documentation or seed data that is required to set up the platform locally - so it's not advised to do it yet. You can install the Prototypr Editor separately though (see below).

💓 If you want to set it up, consider sponsoring me so I can create documentation, seed data, and all things necessary to install and run the project.

Update: Prototypr Editor is here!

[UPDATE: AUG 2024] The Prototypr Editor is now available as a standalone NPM package that you can install separately (I still need to add a license, probably will put MIT).

---

Features Overview

Prototypr is an evolving community blogging ecosystem. Features have been added based on what has been needed for running the site, so ⚠️it may be tricky to duplicate features for a new project. But here is what has been built so far:

User Management

• ☑️ User profiles - customise profile picture, bio and personal info fields
• ☑️ Login - Log in with magic email or social providers
• ☑️ Invite only system - sign up with a global secret passcode, or invite users individually by email
• ☑️ Verified profiles (just a flag that defaults to unverified until manually approved)
• ☑️ User onboarding - basic onboarding steps
• ☑️ Creator Role - Add multiple users as 'creator' of a post

Sponsorships

• ☑️ Booking Calendar: – Accept sponsorship bookings on a calendar through Lemon Squeezy checkout
• ☑️ Auto Sponsor Placement: – When a booking is made, it will show in the available slot automatically
• ☑️ Sponsor fallback: – Add a default sponsor fallback to fill in when there is no booked sponsor

Blogging

• ☑️ Editor: – Tiptap/prosemirror editor with:
  • ☑️ Image upload (to strapi/aws backend)
  • ☑️ Video upload
  • ☑️ Tweet embed
  • ☑️ Youtube Embed
  • More to do
• ☑️ Permissions: – users can edit their own posts only, and drafts are only visible to post owner

That's a quick overview of what's done so far, and is available publicly. There's probably much more to list!

Sponsorware

Some features are not available publicy because they're experimental – you can sponsor for access . These include:

AI Content Helper 🤖

• AI news aggregator – The news section uses AI to summarize articles for the news feed - here's an example
• AI product listing creator for Strapi – An AI editor inside strapi that can create product listings and galleries for a given URL (here's an example listing)

AI really helps speed up content curation on Prototypr. While it's a great starting point, all the content still needs to be checked and edited by humans! Nothing generated by AI goes without editing.

---

Running the project

Here's some notes on how the project was built, and how to run it. These notes are old, so please report any issues!

• This site uses Next.js's Static Generation feature using Strapi as the data source.
• Learn more about how the app was created over here.

Prerequisites

This Next.js app depends on a Strapi CMS backend, which is used as a headless CMS.

You don't need to install the Strapi CMS backend to run the front end - instead, you can connect to the development version we have running in the cloud by adding our hosted Strapi url in your .env file (see 'Set up .env variables' section).

If you do want to run the backend locally though, here is a guide.

How to run

1. Clone this repo to your machine
2. Run npm install --no-optional from the project folder (we are using node v14.17.4)
3. Set up the environmental variables (see nect section)
4. npm run dev

npm install --no-optional - some @prototypr packages are not public, --no-optional is required to skip installing them.

Set up .env variables

Once you've cloned the repo, create a .env.local file, and add the following:

STRAPI_PREVIEW_SECRET=_genrate_key
NEXT_PUBLIC_STRAPI_API_URL=yourstrapiapiurl.com

NEXTAUTH_URL=http://localhost:3000

NEXTAUTH_SECRET=_genrate_key
NEXT_PUBLIC_API_URL=yourstrapiapiurl.com

NEXT_PUBLIC_DATABASE_URL=postgresql://[dbusername]:[dbpassword]@[dburl]:[db-port]/[name]

---

Switch between npm packages and local packages

There is a script in the root of the repo to switch between npm packages and local packages.

• ./switch-mode.sh local to switch to local development mode
• ./switch-mode.sh npm to switch to npm packages mode
• ./switch-mode.sh src to switch to src mode

switch-mode will update the package.json in the root directory to point to the correct version of the package.

Path aliases:

• the ~ in the jsconfig.json is a path alias for the node_modules folder. This is to allow the use of the local packages in the src mode.
• the @ in the jsconfig.json is a path alias for the project root.