This project is a full-stack clone-like version of Dev.to, built with Next.js 13 and TypeScript. The application implements user authentication using Auth.js (formerly Next Auth), supports infinite scrolling, bookmarking, tag and reaction systems, and allows posts to be written using Markdown. Server-Side Rendering (SSR) by default to provide excellent Search Engine Optimization (SEO).
- OAuth with Google and Github
- Public username modification
- Ability to create posts with markdown
- Infinite scroll for fetching posts
- Tagging system (e.g., #javascript, #html)
- Toggle between light and themes
- Bookmark system to save posts for future reading
- Comment system
- Users can edit their own posts
- User details can be edited (username, bio, location, and website)
- Users can enter the URL of their cover post image
- Reaction system
- Form validation and toast notifications for errors or other notifications
The following technologies were used in this project:
- Next.js 13 App router + Typescript
- Route handlers (API)
- Prisma ORM
- PostgreSQL + Docker
- TailwindCSS + ShadcnUI
- Zod validation
- Next Auth
- MDX
- Clone this repository
git clone https://github.com/kypexfly/devto-clone.git- Move the folder an install dependencies
cd devto-clone
npm install- Create the
.envfile at root with the following variables:
DATABASE_URL=postgresql://postgres:postgres@localhost:54322/postgres
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_secret_generated_string
GOOGLE_CLIENT_ID=read_https://next-auth.js.org/providers/google
GOOGLE_CLIENT_SECRET=read_https://next-auth.js.org/providers/google
GITHUB_ID=read_https://next-auth.js.org/providers/github
GITHUB_SECRET=read_https://next-auth.js.org/providers/github
- Start PostgreSQL database with Docker Compose.
docker compose up -d- Generate Prisma types and push schemas to DB.
npx prisma generate
npx prisma db push- Run devlopment mode
npm dev