search

Prototypr / prototypr-frontend

Open source publishing platform, built with Next.js and Strapi CMS backend. Uses Tiptap / Prose-mirror editor. 💙
https://prototypr.io
134 stars 31 forks source link
blogging design nextjs prosemirror tiptap ux

readme

Open-source Publishing Platform

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

Prototypr homepage screenshot

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

Sponsorships

Blogging

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 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!

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]

ko-fi

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 will update the package.json in the root directory to point to the correct version of the package.

Path aliases: