Skip to content

Markdown Forum/Blog site using Next.js, Next-Auth, TypeScript, tRPC, Prisma and PlanetScale

License

Notifications You must be signed in to change notification settings

amirfakhrullah/bloqdown

BloqDown

ReleasesLicenseContributingCode of Conduct

Description

Simple Markdown Forum/Blog site using Next.js, NextAuth, TypeScript, tRPC, Prisma and PlanetScale. The aim here is to learn how to properly use these techstacks.

bloqdown

Quick Links

WebsiteRoadmapIssuesPull RequestsDiscussions

Goals For This Project

The goals for this project are:

  • Creating fully typesafe APIs using tRPC
  • Using Prisma as TypeScript ORM
  • Setting up PlanetScale as MySQL db for the site
  • Set cookie for anonymous users thru Next.js middleware
  • Auth using NextAuth (Github Provider)
  • Render markdown content using react-markdown and @tailwindcss/typography
  • Display repository data using GitHub API

Project Features

  • Users - Can perform any activity anonymously or can login as GitHub user (via NextAuth)
  • Homepage - Users can find posts sorted by popularity or latest. They can also find posts via tags and search bar
  • Base features of posts - Creating, updating and deleting posts
  • Liking - Users can like any posts they want
  • Comments - Users can comments to any posts, the users and the post owners can delete comments
  • Tags - Users can add category tags to the posts, so that users can find the posts via tags in the homepage
  • Views - Total views of the post (not unique)
  • Live Repository Stats - Live repository data of this project fetched using GitHub API

Techstacks

Getting Started

Prerequisite

  • MySQL local database or Planetscale connection using PScale CLI
  • npm

Installations

After cloning the repo, set up .env file with db url

DATABASE_URL="mysql://localhost:InsertPortHere/InsertDbNameHere"

For setting up Next Auth Github provider, insert Github Id and secrets in .env.local

GITHUB_ID=
GITHUB_SECRET=
GITHUB_ACCESS_TOKEN=
NEXTAUTH_SECRET=

Then, proceed with installing:

npm install

Run locally

Run the development server:

pscale connect `InsertDbNameHere` #for connecting planetscale db
npm run dev

License

License under the BSD-3-Clause