Skip to content

Commit 6e8b823

Browse files
hoangsonwwhoangsonww
committed
Added Next.js BE & FE
1 parent 7ee6024 commit 6e8b823

9 files changed

+82
-13
lines changed

‎README.md

+45-6
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,19 @@ This project shows the power of Next.js and serves as a practical demonstration
3030
- [📧 **Contact**](#-contact)
3131

3232
## 🌟 **Features**
33+
3334
- Full authentication system (Register and Login)
3435
- Dark and Light mode
36+
- User-specific to-do lists with different categories
37+
- CRUD operations for to-do items
38+
- Responsive design
3539
- Add, edit, delete, and complete tasks
3640
- Persistent storage using SQLite and in-memory storage
3741
- A clean, modern, and responsive UI
42+
- PWA support with offline capabilities
43+
- Basic testing for API endpoints and utility functions
44+
- Easy-to-understand file structure and codebase
45+
- Customizable with additional features and improvements
3846

3947
## 📂 **File Structure**
4048

@@ -186,28 +194,59 @@ The production build will be served at `http://localhost:3000`.
186194
## 🖼️ **UI Preview**
187195

188196
### **Landing Page**
197+
198+
#### **Light Mode**
199+
189200
<p align="center">
190-
<img src="public/images/landing-page.png" alt="Landing Page" width="600"/>
201+
<img src="images/landing-bright.png" alt="Landing Page" width="100%" style="border-radius: 10px"/>
202+
</p>
203+
204+
#### **Dark Mode**
205+
206+
<p align="center">
207+
<img src="images/landing-dark.png" alt="Landing Page in Dark Mode" width="100%" style="border-radius: 10px"/>
191208
</p>
192209

193210
### **Login Page**
211+
212+
#### **Light Mode**
213+
214+
<p align="center">
215+
<img src="images/login-bright.png" alt="Login Page" width="100%" style="border-radius: 10px"/>
216+
</p>
217+
218+
#### **Dark Mode**
219+
194220
<p align="center">
195-
<img src="public/images/login-page.png" alt="Login Page" width="600"/>
221+
<img src="images/login-dark.png" alt="Login Page in Dark Mode" width="100%" style="border-radius: 10px"/>
196222
</p>
197223

198224
### **Register Page**
225+
226+
#### **Light Mode**
227+
199228
<p align="center">
200-
<img src="public/images/register-page.png" alt="Register Page" width="600"/>
229+
<img src="images/register-bright.png" alt="Register Page" width="100%" style="border-radius: 10px"/>
230+
</p>
231+
232+
#### **Dark Mode**
233+
234+
<p align="center">
235+
<img src="images/register-dark.png" alt="Register Page in Dark Mode" width="100%" style="border-radius: 10px"/>
201236
</p>
202237

203238
### **Homepage (To-Do List)**
239+
240+
#### **Light Mode**
241+
204242
<p align="center">
205-
<img src="public/images/homepage.png" alt="Homepage with To-Do List" width="600"/>
243+
<img src="images/home-bright.png" alt="Homepage" width="100%" style="border-radius: 10px"/>
206244
</p>
207245

208-
### **Dark Mode**
246+
#### **Dark Mode**
247+
209248
<p align="center">
210-
<img src="public/images/dark-mode.png" alt="App in Dark Mode" width="600"/>
249+
<img src="images/home-dark.png" alt="Homepage in Dark Mode" width="100%" style="border-radius: 10px"/>
211250
</p>
212251

213252
---

‎src/app/android-chrome-192x192.png ‎public/android-chrome-192x192.png

File renamed without changes.

‎src/app/android-chrome-512x512.png ‎public/android-chrome-512x512.png

File renamed without changes.

‎src/app/apple-touch-icon.png ‎public/apple-touch-icon.png

File renamed without changes.

‎src/app/favicon-16x16.png ‎public/favicon-16x16.png

File renamed without changes.

‎src/app/favicon-32x32.png ‎public/favicon-32x32.png

File renamed without changes.

‎src/app/favicon.ico ‎public/favicon.ico

File renamed without changes.

‎public/manifest.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"short_name": "ToDo App",
3+
"name": "ToDo App - Fullstack Next.js",
4+
"icons": [
5+
{
6+
"src": "/android-chrome-192x192.png",
7+
"type": "image/png",
8+
"sizes": "192x192"
9+
},
10+
{
11+
"src": "/android-chrome-512x512.png",
12+
"type": "image/png",
13+
"sizes": "512x512"
14+
}
15+
],
16+
"start_url": "/",
17+
"background_color": "#ffffff",
18+
"display": "standalone",
19+
"scope": "/",
20+
"theme_color": "#006400",
21+
"description": "A fullstack ToDo app built with Next.js"
22+
}

‎src/app/layout.tsx

+15-7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// src/app/layout.tsx
12
import type { Metadata } from "next";
23
import localFont from "next/font/local";
34
import "./globals.css";
@@ -14,20 +15,27 @@ const geistMono = localFont({
1415
});
1516

1617
export const metadata: Metadata = {
17-
title: "Create Next App",
18-
description: "Generated by create next app",
18+
title: "The Next.js ToDo App",
19+
description: "A simple todo app built with Next.js",
1920
};
2021

2122
export default function RootLayout({
22-
children,
23-
}: Readonly<{
23+
children,
24+
}: Readonly<{
2425
children: React.ReactNode;
2526
}>) {
2627
return (
2728
<html lang="en">
28-
<body className={`${geistSans.variable} ${geistMono.variable}`}>
29-
{children}
30-
</body>
29+
<head>
30+
{/* Favicon Links */}
31+
<link rel="icon" href="/favicon.ico" />
32+
<link rel="apple-touch-icon" href="/android-chrome-192x192.png" />
33+
<link rel="manifest" href="/manifest.json" />
34+
<meta name="theme-color" content="#006400" />
35+
</head>
36+
<body className={`${geistSans.variable} ${geistMono.variable}`}>
37+
{children}
38+
</body>
3139
</html>
3240
);
3341
}

0 commit comments

Comments
 (0)