├── .eslintrc.json
├── .gitignore
├── README.md
├── app
├── addTopic
│ └── page.jsx
├── api
│ └── topics
│ │ ├── [id]
│ │ └── route.js
│ │ └── route.js
├── editTopic
│ └── [id]
│ │ └── page.jsx
├── favicon.ico
├── globals.css
├── layout.js
└── page.jsx
├── components
├── EditTopicForm.jsx
├── Navbar.jsx
├── RemoveBtn.jsx
└── TopicsList.jsx
├── jsconfig.json
├── libs
└── mongodb.js
├── models
└── topic.js
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── next.svg
└── vercel.svg
└── tailwind.config.js
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 | .env
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 |
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 |
17 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
18 |
19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/app/addTopic/page.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState } from "react";
4 | import { useRouter } from "next/navigation";
5 |
6 | export default function AddTopic() {
7 | const [title, setTitle] = useState("");
8 | const [description, setDescription] = useState("");
9 |
10 | const router = useRouter();
11 |
12 | const handleSubmit = async (e) => {
13 | e.preventDefault();
14 |
15 | if (!title || !description) {
16 | alert("Title and description are required.");
17 | return;
18 | }
19 |
20 | try {
21 | const res = await fetch("http://localhost:3000/api/topics", {
22 | method: "POST",
23 | headers: {
24 | "Content-type": "application/json",
25 | },
26 | body: JSON.stringify({ title, description }),
27 | });
28 |
29 | if (res.ok) {
30 | router.push("/");
31 | } else {
32 | throw new Error("Failed to create a topic");
33 | }
34 | } catch (error) {
35 | console.log(error);
36 | }
37 | };
38 |
39 | return (
40 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/app/api/topics/[id]/route.js:
--------------------------------------------------------------------------------
1 | import connectMongoDB from "@/libs/mongodb";
2 | import Topic from "@/models/topic";
3 | import { NextResponse } from "next/server";
4 |
5 | export async function PUT(request, { params }) {
6 | const { id } = params;
7 | const { newTitle: title, newDescription: description } = await request.json();
8 | await connectMongoDB();
9 | await Topic.findByIdAndUpdate(id, { title, description });
10 | return NextResponse.json({ message: "Topic updated" }, { status: 200 });
11 | }
12 |
13 | export async function GET(request, { params }) {
14 | const { id } = params;
15 | await connectMongoDB();
16 | const topic = await Topic.findOne({ _id: id });
17 | return NextResponse.json({ topic }, { status: 200 });
18 | }
19 |
--------------------------------------------------------------------------------
/app/api/topics/route.js:
--------------------------------------------------------------------------------
1 | import connectMongoDB from "@/libs/mongodb";
2 | import Topic from "@/models/topic";
3 | import { NextResponse } from "next/server";
4 |
5 | export async function POST(request) {
6 | const { title, description } = await request.json();
7 | await connectMongoDB();
8 | await Topic.create({ title, description });
9 | return NextResponse.json({ message: "Topic Created" }, { status: 201 });
10 | }
11 |
12 | export async function GET() {
13 | await connectMongoDB();
14 | const topics = await Topic.find();
15 | return NextResponse.json({ topics });
16 | }
17 |
18 | export async function DELETE(request) {
19 | const id = request.nextUrl.searchParams.get("id");
20 | await connectMongoDB();
21 | await Topic.findByIdAndDelete(id);
22 | return NextResponse.json({ message: "Topic deleted" }, { status: 200 });
23 | }
24 |
--------------------------------------------------------------------------------
/app/editTopic/[id]/page.jsx:
--------------------------------------------------------------------------------
1 | import EditTopicForm from "@/components/EditTopicForm";
2 |
3 | const getTopicById = async (id) => {
4 | try {
5 | const res = await fetch(`http://localhost:3000/api/topics/${id}`, {
6 | cache: "no-store",
7 | });
8 |
9 | if (!res.ok) {
10 | throw new Error("Failed to fetch topic");
11 | }
12 |
13 | return res.json();
14 | } catch (error) {
15 | console.log(error);
16 | }
17 | };
18 |
19 | export default async function EditTopic({ params }) {
20 | const { id } = params;
21 | const { topic } = await getTopicById(id);
22 | const { title, description } = topic;
23 |
24 | return ;
25 | }
26 |
--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Godsont/CRUD_MongoDB/d29f800c6903bcaf8c1474a3b5c694cb88fc2b03/app/favicon.ico
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/app/layout.js:
--------------------------------------------------------------------------------
1 | import Navbar from "@/components/Navbar";
2 | import "./globals.css";
3 | import { Inter } from "next/font/google";
4 |
5 | const inter = Inter({ subsets: ["latin"] });
6 |
7 | export const metadata = {
8 | title: "Create Next App",
9 | description: "Generated by create next app",
10 | };
11 |
12 | export default function RootLayout({ children }) {
13 | return (
14 |
15 |
16 |
17 |
18 |
{children}
19 |
31 |
32 |
{t.title}
33 |
{t.description}
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |