https://github.com/amirfakhrullah/bloqdown
Simple Markdown Forum/Blog site using Next.js, Next-Auth, TypeScript, tRPC, Prisma and PlanetScale
https://github.com/amirfakhrullah/bloqdown
daisyui next-auth nextjs planetscale prisma react-markdown tailwindcss trpc typescript upstash-redis
Last synced: about 1 year ago
JSON representation
Simple Markdown Forum/Blog site using Next.js, Next-Auth, TypeScript, tRPC, Prisma and PlanetScale
- Host: GitHub
- URL: https://github.com/amirfakhrullah/bloqdown
- Owner: amirfakhrullah
- License: bsd-3-clause
- Created: 2022-06-03T10:35:51.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-31T07:19:55.000Z (over 3 years ago)
- Last Synced: 2023-04-07T06:57:56.135Z (about 3 years ago)
- Topics: daisyui, next-auth, nextjs, planetscale, prisma, react-markdown, tailwindcss, trpc, typescript, upstash-redis
- Language: TypeScript
- Homepage: https://bloqdown.amrf.me
- Size: 1.13 MB
- Stars: 15
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Releases •
License •
Contributing •
Code 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.
## Quick Links
Website •
Roadmap •
Issues •
Pull Requests •
Discussions
## 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
- [Next.js](https://nextjs.org/)
- [TailwindCSS](https://tailwindcss.com/)
- [DaisyUI](https://daisyui.com/)
- [TailwindCSS-Typography](https://tailwindcss.com/docs/typography-plugin)
- [React-Markdown](https://github.com/remarkjs/react-markdown)
- [Next-Auth](https://next-auth.js.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [tRPC](https://trpc.io/)
- [Prisma](https://www.prisma.io/)
- [PlanetScale](https://planetscale.com/)
- [Vercel](https://vercel.com/)
## 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
```bash
DATABASE_URL="mysql://localhost:InsertPortHere/InsertDbNameHere"
```
For setting up `Next Auth` Github provider, insert Github Id and secrets in `.env.local`
```bash
GITHUB_ID=
GITHUB_SECRET=
GITHUB_ACCESS_TOKEN=
NEXTAUTH_SECRET=
```
Then, proceed with installing:
```bash
npm install
```
### Run locally
Run the development server:
```bash
pscale connect `InsertDbNameHere` #for connecting planetscale db
npm run dev
```
## License
License under the [BSD-3-Clause](./LICENSE)