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.
- The backend app is built with Strapi, and the repo for that is over here.
At the moment, there is no succinct guide or docs to clone and set up the platform locally, but it is possible with some poking around. Therefore, please only use this repo as a reference and for example code - there will be teething problems running it without data.
💓 If you really need this, consider sponsoring me so I can create documentation, seed data, and all things necessary to install and run the project seamlessly.
Prototypr is an evolving community blogging ecosystem. Features have been added based on what has been needed for running the site, so
- ☑️ 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
- ☑️ 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
- ☑️ 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!
Some features are not available publicy because they're experimental – you can sponsor for access 
- 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.
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.
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.
- Clone this repo to your machine
- Run
npm install --no-optionalfrom the project folder (we are using node v14.17.4) - Set up the environmental variables (see nect section)
npm run dev
npm install --no-optional - some @prototypr packages are not public, --no-optional is required to skip installing them.
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]
