Next.js Blog

A basic blog app has built with Next.js framework. The app allows users to log in in order to write comments under any posts.

Features

Allow user to register, log in and log out
Only logged in users have rights to write comments
Only users with admin rights can create a new post
User with admin rights can remove/update posts and comments
User without admin rigths can remove/update comments which have written by himself/herself
Posts and comments update date has shown
Next.js used for CSR and SSR
MongoDB used to store users, posts and comments informations
Prisma ORM is used
Bcrypt.js used to hash the user password
Zod used for validation
Render-as-you-fetch approach is used for Loading screen
Hosted on Vercel
Responsive design

Clone the repository
Run npm install command in your terminal
Set up MongoDB database Create .env file and add enviromental variables: open ssl key should generate to NEXTAUTH_SECRET
Create .env file and add enviromental variables: open ssl key should generate to NEXTAUTH_SECRET
DATABASE_URL="your-mongodb-connection-link"
NEXTAUTH_SECRET="open-ssl-generated-key"
CODE="3.1415"
Run npx prisma generate
Run npm run dev command in your terminal
Server running at http://localhost:3000/

Open SSL key generation:
- You can use the following link to create open ssl key: https://www.cryptool.org/en/cto/openssl or you can install open ssl and generate key from terminal. To generate code you should run: openssl rand -base64 32
Tailwind prose and typography handling are needed for markdowns:
- Stackoverflow
- TailwindCSS official plugin
Markdown editor needed to run in use client mode and need to be imported in dynamic to avoid navigator is not defined error:
- Stackoverflow
- GitHub
SimpleMDE usage, options:
- Usage: GitHub
- Options: Github
React Hook Form usage with UI component needs to has ref={null} property to avoid ref warning:
- Stackoverflow
- GitHub
Loading screen approaches (Fetch-than-render, Render-as-you-fetch, Suspense, ):
- Medium.com
- Linkedin.com