# Prisma Crud Full
### Example 1
{% file src="" %}
package.json
```json
{
"name": "prisma",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "nodemon src/index.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs",
"description": "",
"dependencies": {
"@prisma/client": "^6.6.0",
"@types/cors": "^2.8.17",
"@types/express": "^5.0.1",
"@types/express-graphql": "^0.8.2",
"@types/graphql": "^14.2.3",
"@types/lodash": "^4.17.16",
"cors": "^2.8.5",
"dotenv": "^16.5.0",
"express": "^5.1.0",
"express-graphql": "^0.12.0",
"fs": "^0.0.1-security",
"graphql": "^15.10.1",
"graphql-yoga": "^5.13.4",
"lodash": "^4.17.21",
"nodemon": "^3.1.10",
"path": "^0.12.7"
},
"devDependencies": {
"@types/node": "^22.15.2",
"prisma": "^6.6.0"
},
"prisma": {
"seed": "ts-node prisma/seed"
}
}
```
.env
```properties
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
# DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
DATABASE_URL="mysql://root@localhost:3306/prisma"
```
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: {
published: true
},
include: {
author: true
}
})
res.json(posts)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
prisma\seed.ts
```typescript
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient();
const userData = [
{
name: 'Lionel 1',
email: 'lionel1@prisma.io',
posts: {
create: [
{
title: 'Post Lionel 1',
content: 'https://slack.prisma.io',
published: true,
},
],
},
},
{
name: 'Lionel 2',
email: 'lionel2@prisma.io',
posts: {
create: [
{
title: 'Post Lionel 2.1',
content: 'https://slack.prisma.io',
published: true,
},
{
title: 'Post LIonel 2.2',
content: 'https://pris.ly/youtube',
},
],
},
},
];
async function main() {
console.log(`Start seeding ...`);
for (const u of userData) {
const user = await prisma.user.create({
data: u,
})
console.log(`Created user with id: ${user.id}`)
}
console.log(`Seeding finished.`)
}
main()
.catch((e) => {
console.error(e)
process.exit(1)
})
.finally(async () => {
await prisma.$disconnect()
})
```
Hoặc
prisma\seed.ts
```typescript
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient();
const userData = [
{
name: 'Alice Johnson',
email: 'alice@example.com',
posts: {
create: [
{
title: 'Getting Started with Prisma',
content: 'A comprehensive guide to using Prisma in your projects',
published: true,
viewCount: 150,
},
{
title: 'TypeScript Best Practices',
content: 'Learn how to write better TypeScript code',
published: true,
viewCount: 89,
},
],
},
},
{
name: 'Bob Smith',
email: 'bob@example.com',
posts: {
create: [
{
title: 'Database Optimization Tips',
content: 'How to optimize your database queries for better performance',
published: true,
viewCount: 210,
},
{
title: 'Draft: Advanced SQL Techniques',
content: 'Coming soon: Advanced SQL techniques for developers',
published: false,
viewCount: 0,
},
],
},
},
{
name: 'Carol Williams',
email: 'carol@example.com',
posts: {
create: [
{
title: 'Building REST APIs with Node.js',
content: 'A step-by-step guide to creating RESTful APIs',
published: true,
viewCount: 175,
},
],
},
},
];
async function main() {
console.log(`Start seeding ...`);
// Create users with their posts
for (const u of userData) {
const user = await prisma.user.create({
data: u,
});
console.log(`Created user with id: ${user.id}`);
}
// Create some orphaned posts (without authors)
await prisma.post.createMany({
data: [
{
title: 'Anonymous Post 1',
content: 'This post has no author',
published: true,
viewCount: 45,
},
{
title: 'Anonymous Post 2',
content: 'Another post without an author',
published: false,
viewCount: 0,
},
],
});
console.log(`Seeding finished.`);
}
main()
.catch((e) => {
console.error(e);
process.exit(1);
})
.finally(async () => {
await prisma.$disconnect();
});
```
prisma\schema.prisma
```prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
viewCount Int @default(0)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
```
### Example 2
src\index.js
```javascript
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
async function main() {
const device = await prisma.device.create({
data: {
name: "Alice 2",
data: { key: "value 2" },
},
});
console.log(device);
}
main()
.catch(async (e) => {
console.error(e);
process.exit(1);
})
.finally(async () => {
await prisma.$disconnect();
});
```
.env
```properties
DATABASE_URL="mysql://root@localhost:3306/prisma"
```
package.json
```json
{
"name": "graph",
"version": "1.0.0",
"main": "src/index.js",
"type": "module",
"scripts": {
"dev": "nodemon src/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"@prisma/client": "^6.2.1",
"dotenv": "^16.4.7",
"express": "^4.21.2",
"express-graphql": "^0.12.0",
"fs": "^0.0.1-security",
"graphql": "^16.10.0",
"graphql-yoga": "^5.10.9",
"lodash": "^4.17.21",
"nodemon": "^3.1.9",
"path": "^0.12.7"
}
}
```
prisma\schema.prisma
```prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
model Device {
id Int @id @default(autoincrement())
name String
data Json
}
```
### Example 2 Full back-end
### Part 1. Create database example
package.json
```json
{
"dependencies": {
"@prisma/client": "^6.2.1",
"cors": "^2.8.5",
"express": "^4.21.2"
},
"devDependencies": {
"@types/cors": "^2.8.17",
"@types/express": "^5.0.0",
"@types/node": "^22.10.5",
"@types/typescript": "^2.0.0",
"prisma": "^6.2.1",
"ts-node": "^10.9.2",
"typescript": "^5.7.3"
},
"prisma": {
"seed": "ts-node prisma/seed.ts"
}
}
```
### — npx tsc --init read file typescript
```
npx tsc --init
```
### — npx prisma
```
npx prisma
```
### — npx prisma init
```
npx prisma init
```
### — prisma db push
```
prisma db push
```
prisma\seed.ts
```typescript
import { PrismaClient, Prisma } from '@prisma/client'
const prisma = new PrismaClient();
const userData: Prisma.UserCreateInput[] = [
{
name: 'Lionel 1',
email: 'lionel1@prisma.io',
posts: {
create: [
{
title: 'Post Lionel 1',
content: 'https://slack.prisma.io',
published: true,
},
],
},
},
{
name: 'Lionel 2',
email: 'lionel2@prisma.io',
posts: {
create: [
{
title: 'Post Lionel 2.1',
content: 'https://slack.prisma.io',
published: true,
},
{
title: 'Post LIonel 2.2',
content: 'https://pris.ly/youtube',
},
],
},
},
];
async function main() {
console.log(`Start seeding ...`);
for (const u of userData) {
const user = await prisma.user.create({
data: u,
})
console.log(`Created user with id: ${user.id}`)
}
console.log(`Seeding finished.`)
}
main()
.catch((e) => {
console.error(e)
process.exit(1)
})
.finally(async () => {
await prisma.$disconnect()
})
```
### — yarn prisma db seed
```
yarn prisma db seed
```
### Part 2 Back-end
### — package.json add scripts
```
"scripts": {
"dev": "ts-node src/index.ts"
},
```
### — npx prisma db push --force-reset
Khi muốn reset lại dữ liệu
cáºp nháºt lại prisma\schema.prisma trong quá trình phát triển
```
npx prisma db push --force-reset
```
```typescript
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "sqlite"
url = "file:./dev.sqlite"
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
Post Post[]
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
viewCount Int @default(0)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
```
### — Read database
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
### — Create Post
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
});
app.get('/drafts', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: false },
include: { author: true }
})
res.json(posts)
});
// Part 3
app.post(`/post`, async (req, res) => {
const { title, content, authorEmail } = req.body
const result = await prisma.post.create({
data: {
title,
content,
published: false,
author: { connect: { email: authorEmail } },
},
})
res.json(result)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
### — Get Post
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
});
app.get('/drafts', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: false },
include: { author: true }
})
res.json(posts)
});
app.get(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.findUnique({
where: {
id: Number(id),
},
include: { author: true }
})
res.json(post)
})
// Part 3
app.post(`/post`, async (req, res) => {
const { title, content, authorEmail } = req.body
const result = await prisma.post.create({
data: {
title,
content,
published: true,
author: { connect: { email: authorEmail } },
},
})
res.json(result)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
### — Delete Post
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
});
app.get('/drafts', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: false },
include: { author: true }
})
res.json(posts)
});
app.get(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.findUnique({
where: {
id: Number(id),
},
include: { author: true }
})
res.json(post)
})
app.delete(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.delete({
where: {
id: Number(id),
},
})
res.json(post)
})
// Part 3
app.post(`/post`, async (req, res) => {
const { title, content, authorEmail } = req.body
const result = await prisma.post.create({
data: {
title,
content,
published: true,
author: { connect: { email: authorEmail } },
},
})
res.json(result)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
### — Update Post
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
});
app.get('/drafts', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: false },
include: { author: true }
})
res.json(posts)
});
app.get(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.findUnique({
where: {
id: Number(id),
},
include: { author: true }
})
res.json(post)
});
app.delete(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.delete({
where: {
id: Number(id),
},
})
res.json(post)
});
app.put('/post/:id', async (req, res) => {
const { id } = req.params;
const { title, content, viewCount } = req.body;
const post = await prisma.post.update({
where: { id: Number(id) },
data: {
title,
content,
viewCount,
published: true
},
})
res.json(post)
});
// Part 3
app.post(`/post`, async (req, res) => {
const { title, content, authorEmail } = req.body
const result = await prisma.post.create({
data: {
title,
content,
published: true,
author: { connect: { email: authorEmail } },
},
})
res.json(result)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
— Update Status Post
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
});
app.get('/drafts', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: false },
include: { author: true }
})
res.json(posts)
});
app.get(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.findUnique({
where: {
id: Number(id),
},
include: { author: true }
})
res.json(post)
});
app.delete(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.delete({
where: {
id: Number(id),
},
})
res.json(post)
});
app.put('/post/:id', async (req, res) => {
const { id } = req.params;
const { title, content, viewCount } = req.body;
const post = await prisma.post.update({
where: { id: Number(id) },
data: {
title,
content,
viewCount,
published: true
},
})
res.json(post)
});
app.put('/publish/:id', async (req, res) => {
const { id } = req.params
const post = await prisma.post.update({
where: { id: Number(id) },
data: { published: true },
})
res.json(post)
});
// Part 3
app.post(`/post`, async (req, res) => {
const { title, content, authorEmail } = req.body
const result = await prisma.post.create({
data: {
title,
content,
published: true,
author: { connect: { email: authorEmail } },
},
})
res.json(result)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
### — Create User
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
});
app.get('/drafts', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: false },
include: { author: true }
})
res.json(posts)
});
app.get(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.findUnique({
where: {
id: Number(id),
},
include: { author: true }
})
res.json(post)
});
app.delete(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.delete({
where: {
id: Number(id),
},
})
res.json(post)
});
app.put('/post/:id', async (req, res) => {
const { id } = req.params;
const { title, content, viewCount } = req.body;
const post = await prisma.post.update({
where: { id: Number(id) },
data: {
title,
content,
viewCount,
published: true
},
})
res.json(post)
});
app.put('/publish/:id', async (req, res) => {
const { id } = req.params
const post = await prisma.post.update({
where: { id: Number(id) },
data: { published: true },
})
res.json(post)
});
// Part 3
app.post(`/post`, async (req, res) => {
const { title, content, authorEmail } = req.body
const result = await prisma.post.create({
data: {
title,
content,
published: true,
author: { connect: { email: authorEmail } },
},
})
res.json(result)
});
// Part 4
app.post(`/user`, async (req, res) => {
const result = await prisma.user.create({
data: {
...req.body,
},
})
res.json(result)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
### — Get Users
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
});
app.get('/drafts', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: false },
include: { author: true }
})
res.json(posts)
});
app.get(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.findUnique({
where: {
id: Number(id),
},
include: { author: true }
})
res.json(post)
});
app.delete(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.delete({
where: {
id: Number(id),
},
})
res.json(post)
});
app.put('/post/:id', async (req, res) => {
const { id } = req.params;
const { title, content, viewCount } = req.body;
const post = await prisma.post.update({
where: { id: Number(id) },
data: {
title,
content,
viewCount,
published: true
},
})
res.json(post)
});
app.put('/publish/:id', async (req, res) => {
const { id } = req.params
const post = await prisma.post.update({
where: { id: Number(id) },
data: { published: true },
})
res.json(post)
});
// Part 3
app.post(`/post`, async (req, res) => {
const { title, content, authorEmail } = req.body
const result = await prisma.post.create({
data: {
title,
content,
published: true,
author: { connect: { email: authorEmail } },
},
})
res.json(result)
});
// Part 4
app.post(`/user`, async (req, res) => {
const result = await prisma.user.create({
data: {
...req.body,
},
})
res.json(result)
});
app.get(`/users`, async (req, res) => {
const result = await prisma.user.findMany()
res.json(result)
});
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
### — filterPosts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
});
app.get('/drafts', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: false },
include: { author: true }
})
res.json(posts)
});
app.get(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.findUnique({
where: {
id: Number(id),
},
include: { author: true }
})
res.json(post)
});
app.delete(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.delete({
where: {
id: Number(id),
},
})
res.json(post)
});
app.put('/post/:id', async (req, res) => {
const { id } = req.params;
const { title, content, viewCount } = req.body;
const post = await prisma.post.update({
where: { id: Number(id) },
data: {
title,
content,
viewCount,
published: true
},
})
res.json(post)
});
app.put('/publish/:id', async (req, res) => {
const { id } = req.params
const post = await prisma.post.update({
where: { id: Number(id) },
data: { published: true },
})
res.json(post)
});
// Part 3
app.post(`/post`, async (req, res) => {
const { title, content, authorEmail } = req.body
const result = await prisma.post.create({
data: {
title,
content,
published: true,
author: { connect: { email: authorEmail } },
},
})
res.json(result)
});
// Part 4
app.post(`/user`, async (req, res) => {
const result = await prisma.user.create({
data: {
...req.body,
},
})
res.json(result)
});
// Part 5
app.get('/filterPosts', async (req, res) => {
const { title } = req.body;
const filteredPosts = await prisma.post.findMany({
where: {
OR: [
{
title: {
contains: title,
},
}
],
},
})
res.json(filteredPosts)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
#### Or
src\index.ts
```typescript
// Part 1
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
import cors from 'cors';
import express from 'express';
const app = express();
app.use(express.json())
app.use(cors());
// Part 2
app.get('/feed', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: true },
include: { author: true }
})
res.json(posts)
});
app.get('/drafts', async (req, res) => {
const posts = await prisma.post.findMany({
where: { published: false },
include: { author: true }
})
res.json(posts)
});
app.get(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.findUnique({
where: {
id: Number(id),
},
include: { author: true }
})
res.json(post)
});
app.delete(`/post/:id`, async (req, res) => {
const { id } = req.params
const post = await prisma.post.delete({
where: {
id: Number(id),
},
})
res.json(post)
});
app.put('/post/:id', async (req, res) => {
const { id } = req.params;
const { title, content, viewCount } = req.body;
const post = await prisma.post.update({
where: { id: Number(id) },
data: {
title,
content,
viewCount,
published: true
},
})
res.json(post)
});
app.put('/publish/:id', async (req, res) => {
const { id } = req.params
const post = await prisma.post.update({
where: { id: Number(id) },
data: { published: true },
})
res.json(post)
});
// Part 3
app.post(`/post`, async (req, res) => {
const { title, content, authorEmail } = req.body
const result = await prisma.post.create({
data: {
title,
content,
published: true,
author: { connect: { email: authorEmail } },
},
})
res.json(result)
});
// Part 4
app.post(`/user`, async (req, res) => {
const result = await prisma.user.create({
data: {
...req.body,
},
})
res.json(result)
});
// Part 5
app.get('/filterPosts', async (req, res) => {
const { title: searchTitle, content: searchContent } = req.body;
const filteredPosts = await prisma.post.findMany({
where: {
OR: [
{
title: {
contains: searchTitle,
},
},
{
content: {
contains: searchContent
},
}
],
},
})
res.json(filteredPosts)
})
const server = app.listen(3001, () =>
console.log(
'🚀 Server ready at: http://localhost:3001',
),
);
```
### Part 3 Front-end
package.json
```json
{
"name": "crudfront",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "15.1.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-markdown": "^9.0.3"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
```
pages/\_app.tsx
```typescript
import "@/styles/globals.css";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return ;
}
```
pages/\_document.tsx
```typescript
import { Html, Head, Main, NextScript } from "next/document";
import Header from '@/components/Header';
export default function Document() {
return (
);
}
```
pages\create.tsx
```typescript
import React, { useState } from 'react'
import Router from 'next/router'
const Draft: React.FC = () => {
const [title, setTitle] = useState('')
const [content, setContent] = useState('')
const [authorEmail, setAuthorEmail] = useState('')
const submitData = async (e: React.SyntheticEvent) => {
e.preventDefault()
try {
const body = { title, content, authorEmail }
await fetch(`http://localhost:3001/post`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
})
await Router.push('/drafts')
} catch (error) {
console.error(error)
}
}
return (
Create Draft