Added Next.js BE & FE

Author: hoangsonww

.github/CODE_OF_CONDUCT.md

@@ -43,5 +43,5 @@ Project maintainers who do not follow or enforce the Code of Conduct in good fai
 This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version].
 
 [homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
----
+
+## [version]: http://contributor-covenant.org/version/1/4/

README.md

@@ -162,7 +162,7 @@ todo-app-fullstack-nextjs/
 Here's a table listing all the API endpoints provided by this application:
 
 | HTTP Method | Endpoint             | Description                       |
-|-------------|----------------------|-----------------------------------|
+| ----------- | -------------------- | --------------------------------- |
 | `POST`      | `/api/auth/login`    | Log in with username and password |
 | `POST`      | `/api/auth/register` | Register a new user               |
 | `GET`       | `/api/todos`         | Fetch all todos for a user        |
@@ -254,8 +254,10 @@ The production build will be served at `http://localhost:3000`.
 
 1. **Visit the Landing Page** (`/landing`): Introduces the app with the option to log in or register.
 2. **Authentication**:
-  - Register: Create a new account via the `/auth/register` page.
-  - Login: Access your account through the `/auth/login` page.
+
+- Register: Create a new account via the `/auth/register` page.
+- Login: Access your account through the `/auth/login` page.
+
 3. **Manage To-Dos**: Access the main to-do list page (`/`) where you can add, edit, and delete to-dos, as well as toggle dark mode.
 
 ## 💡 **Notes**
@@ -283,7 +285,7 @@ The tests will run and display the results in the terminal.
 
 ## 🚀 **Live Deployment**
 
-The application is deployed live on **Vercel**. You can access it at [https://to-do-app-next-js-fullstack.vercel.app/](https://to-do-app-next-js-fullstack.vercel.app/).
+The application is deployed live on **Vercel**. You can access it at [https://todo-app-nextjs-stack.vercel.app/](https://todo-app-nextjs-stack.vercel.app/landing).
 
 ## 🐳 **Containerization**
 

package-lock.json

@@ -9,7 +9,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write \"**/*.{js,ts,tsx,json,css,html,md}\""
   },
   "dependencies": {
     "@emotion/react": "^11.13.3",
@@ -22,6 +23,7 @@
     "better-sqlite3": "^11.3.0",
     "jsonwebtoken": "^9.0.2",
     "next": "14.2.13",
+    "prettier": "^3.3.3",
     "react": "^18",
     "react-dom": "^18",
     "react-transition-group": "^4.4.5"

package.json

@@ -1,29 +1,38 @@
 // src/app/api/auth/login/route.ts
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
 interface User {
-    id: number;
-    username: string;
-    password: string;
+  id: number;
+  username: string;
+  password: string;
 }
 
 const users: User[] = []; // In-memory user storage shared across requests
 
 export async function POST(request: Request) {
-    const { username, password } = await request.json();
+  const { username, password } = await request.json();
 
-    // Validate input
-    if (!username || !password) {
-        return NextResponse.json({ error: 'Username and password are required' }, { status: 400 });
-    }
+  // Validate input
+  if (!username || !password) {
+    return NextResponse.json(
+      { error: "Username and password are required" },
+      { status: 400 },
+    );
+  }
 
-    // Find the user
-    const user = users.find(user => user.username === username);
+  // Find the user
+  const user = users.find((user) => user.username === username);
 
-    // Validate user credentials
-    if (!user || user.password !== password) {
-        return NextResponse.json({ error: 'Invalid username or password' }, { status: 401 });
-    }
+  // Validate user credentials
+  if (!user || user.password !== password) {
+    return NextResponse.json(
+      { error: "Invalid username or password" },
+      { status: 401 },
+    );
+  }
 
-    return NextResponse.json({ message: 'Login successful', user: { id: user.id, username } }, { status: 200 });
+  return NextResponse.json(
+    { message: "Login successful", user: { id: user.id, username } },
+    { status: 200 },
+  );
 }

src/app/api/auth/login/route.ts

@@ -1,31 +1,40 @@
 // src/app/api/auth/register/route.ts
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
 interface User {
-    id: number;
-    username: string;
-    password: string;
+  id: number;
+  username: string;
+  password: string;
 }
 
 const users: User[] = []; // In-memory user storage
 let userIdCounter = 1;
 
 export async function POST(request: Request) {
-    const { username, password } = await request.json();
+  const { username, password } = await request.json();
 
-    // Validate input
-    if (!username || !password) {
-        return NextResponse.json({ error: 'Username and password are required' }, { status: 400 });
-    }
+  // Validate input
+  if (!username || !password) {
+    return NextResponse.json(
+      { error: "Username and password are required" },
+      { status: 400 },
+    );
+  }
 
-    // Check if user already exists
-    if (users.find(user => user.username === username)) {
-        return NextResponse.json({ error: 'User already exists' }, { status: 400 });
-    }
+  // Check if user already exists
+  if (users.find((user) => user.username === username)) {
+    return NextResponse.json({ error: "User already exists" }, { status: 400 });
+  }
 
-    // Create new user without encryption
-    const newUser: User = { id: userIdCounter++, username, password };
-    users.push(newUser);
+  // Create new user without encryption
+  const newUser: User = { id: userIdCounter++, username, password };
+  users.push(newUser);
 
-    return NextResponse.json({ message: 'User registered successfully', user: { id: newUser.id, username } }, { status: 201 });
+  return NextResponse.json(
+    {
+      message: "User registered successfully",
+      user: { id: newUser.id, username },
+    },
+    { status: 201 },
+  );
 }

src/app/api/auth/register/route.ts

@@ -1,55 +1,73 @@
 // src/app/api/todos/route.ts
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
 interface Todo {
-    id: number;
-    userId: number;
-    task: string;
-    category: string;
-    completed: boolean;
+  id: number;
+  userId: number;
+  task: string;
+  category: string;
+  completed: boolean;
 }
 
 let todos: Todo[] = [];
 let currentTodoId = 1;
 
 export async function GET(request: Request) {
-    const userId = request.headers.get('user-id');
-    if (!userId) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const userId = request.headers.get("user-id");
+  if (!userId)
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-    const userTodos = todos.filter(todo => todo.userId === parseInt(userId));
-    return NextResponse.json(userTodos);
+  const userTodos = todos.filter((todo) => todo.userId === parseInt(userId));
+  return NextResponse.json(userTodos);
 }
 
 export async function POST(request: Request) {
-    const { task, category } = await request.json();
-    const userId = request.headers.get('user-id');
+  const { task, category } = await request.json();
+  const userId = request.headers.get("user-id");
 
-    if (!userId || !task || !category) {
-        return NextResponse.json({ error: 'Unauthorized or invalid data' }, { status: 400 });
-    }
+  if (!userId || !task || !category) {
+    return NextResponse.json(
+      { error: "Unauthorized or invalid data" },
+      { status: 400 },
+    );
+  }
 
-    const newTodo: Todo = { id: currentTodoId++, userId: parseInt(userId), task, category, completed: false };
-    todos.push(newTodo);
+  const newTodo: Todo = {
+    id: currentTodoId++,
+    userId: parseInt(userId),
+    task,
+    category,
+    completed: false,
+  };
+  todos.push(newTodo);
 
-    return NextResponse.json(newTodo, { status: 201 });
+  return NextResponse.json(newTodo, { status: 201 });
 }
 
 export async function PUT(request: Request) {
-    const { id, completed } = await request.json();
-    const userId = request.headers.get('user-id');
+  const { id, completed } = await request.json();
+  const userId = request.headers.get("user-id");
 
-    if (!userId) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  if (!userId)
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-    todos = todos.map(todo => (todo.id === id && todo.userId === parseInt(userId) ? { ...todo, completed } : todo));
-    return NextResponse.json({ message: 'Task updated successfully' });
+  todos = todos.map((todo) =>
+    todo.id === id && todo.userId === parseInt(userId)
+      ? { ...todo, completed }
+      : todo,
+  );
+  return NextResponse.json({ message: "Task updated successfully" });
 }
 
 export async function DELETE(request: Request) {
-    const { id } = await request.json();
-    const userId = request.headers.get('user-id');
+  const { id } = await request.json();
+  const userId = request.headers.get("user-id");
 
-    if (!userId) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  if (!userId)
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
-    todos = todos.filter(todo => !(todo.id === id && todo.userId === parseInt(userId)));
-    return NextResponse.json({ message: 'Task deleted successfully' });
+  todos = todos.filter(
+    (todo) => !(todo.id === id && todo.userId === parseInt(userId)),
+  );
+  return NextResponse.json({ message: "Task deleted successfully" });
 }