Skip to content

Commit 04a61b4

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

File tree

4 files changed

+164
-66
lines changed

4 files changed

+164
-66
lines changed

‎Dockerfile

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Stage 1: Build Stage
2+
FROM node:18-alpine AS builder
3+
4+
# Set the working directory
5+
WORKDIR /app
6+
7+
# Copy the package.json and package-lock.json/yarn.lock files
8+
COPY package*.json yarn.lock ./
9+
10+
# Install dependencies
11+
RUN yarn install --frozen-lockfile
12+
13+
# Copy the rest of the application code
14+
COPY . .
15+
16+
# Build the Next.js app
17+
RUN yarn build
18+
19+
# Stage 2: Production Stage
20+
FROM node:18-alpine AS runner
21+
22+
# Set the working directory
23+
WORKDIR /app
24+
25+
# Copy package.json and yarn.lock files for production
26+
COPY package*.json yarn.lock ./
27+
28+
# Install only production dependencies
29+
RUN yarn install --production --frozen-lockfile
30+
31+
# Copy built files from the build stage
32+
COPY --from=builder /app/.next ./.next
33+
COPY --from=builder /app/public ./public
34+
COPY --from=builder /app/node_modules ./node_modules
35+
COPY --from=builder /app/next.config.js ./
36+
COPY --from=builder /app/package.json ./
37+
38+
# Expose port 3000
39+
EXPOSE 3000
40+
41+
# Set environment variable
42+
ENV NODE_ENV=production
43+
44+
# Start the Next.js app
45+
CMD ["yarn", "start"]

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Son Nguyen
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+82-66
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,19 @@ This project shows the power of Next.js and serves as a practical demonstration
77
## Table of Contents
88

99
- [🌟 **Features**](#-features)
10+
- [🖼️ **UI Preview**](#-ui-preview)
11+
- [**Landing Page**](#landing-page)
12+
- [**Light Mode**](#light-mode)
13+
- [**Dark Mode**](#dark-mode)
14+
- [**Login Page**](#login-page)
15+
- [**Light Mode**](#light-mode-1)
16+
- [**Dark Mode**](#dark-mode-1)
17+
- [**Register Page**](#register-page)
18+
- [**Light Mode**](#light-mode-2)
19+
- [**Dark Mode**](#dark-mode-2)
20+
- [**Homepage (To-Do List)**](#homepage-to-do-list)
21+
- [**Light Mode**](#light-mode-3)
22+
- [**Dark Mode**](#dark-mode-3)
1023
- [📂 **File Structure**](#-file-structure)
1124
- [📋 **API Endpoints**](#-api-endpoints)
1225
- [**1. Prerequisites**](#1-prerequisites)
@@ -16,15 +29,10 @@ This project shows the power of Next.js and serves as a practical demonstration
1629
- [**5. Run the Development Server**](#5-run-the-development-server)
1730
- [**6. Build for Production**](#6-build-for-production)
1831
- [🌐 **Using the App**](#-using-the-app)
19-
- [🖼️ **UI Preview**](#-ui-preview)
20-
- [**Landing Page**](#landing-page)
21-
- [**Login Page**](#login-page)
22-
- [**Register Page**](#register-page)
23-
- [**Homepage (To-Do List)**](#homepage-to-do-list)
24-
- [**Dark Mode**](#dark-mode)
2532
- [💡 **Notes**](#-notes)
2633
- [🧪 **Testing**](#-testing)
2734
- [**Running Tests**](#running-tests)
35+
- [🐳 Containerization](#-containerization)
2836
- [🔧 **Contributing**](#-contributing)
2937
- [📝 **License**](#-license)
3038
- [📧 **Contact**](#-contact)
@@ -44,6 +52,64 @@ This project shows the power of Next.js and serves as a practical demonstration
4452
- Easy-to-understand file structure and codebase
4553
- Customizable with additional features and improvements
4654

55+
## 🖼️ **UI Preview**
56+
57+
### **Landing Page**
58+
59+
#### **Light Mode**
60+
61+
<p align="center">
62+
<img src="images/landing-bright.png" alt="Landing Page" width="100%" style="border-radius: 10px"/>
63+
</p>
64+
65+
#### **Dark Mode**
66+
67+
<p align="center">
68+
<img src="images/landing-dark.png" alt="Landing Page in Dark Mode" width="100%" style="border-radius: 10px"/>
69+
</p>
70+
71+
### **Login Page**
72+
73+
#### **Light Mode**
74+
75+
<p align="center">
76+
<img src="images/login-bright.png" alt="Login Page" width="100%" style="border-radius: 10px"/>
77+
</p>
78+
79+
#### **Dark Mode**
80+
81+
<p align="center">
82+
<img src="images/login-dark.png" alt="Login Page in Dark Mode" width="100%" style="border-radius: 10px"/>
83+
</p>
84+
85+
### **Register Page**
86+
87+
#### **Light Mode**
88+
89+
<p align="center">
90+
<img src="images/register-bright.png" alt="Register Page" width="100%" style="border-radius: 10px"/>
91+
</p>
92+
93+
#### **Dark Mode**
94+
95+
<p align="center">
96+
<img src="images/register-dark.png" alt="Register Page in Dark Mode" width="100%" style="border-radius: 10px"/>
97+
</p>
98+
99+
### **Homepage (To-Do List)**
100+
101+
#### **Light Mode**
102+
103+
<p align="center">
104+
<img src="images/home-bright.png" alt="Homepage" width="100%" style="border-radius: 10px"/>
105+
</p>
106+
107+
#### **Dark Mode**
108+
109+
<p align="center">
110+
<img src="images/home-dark.png" alt="Homepage in Dark Mode" width="100%" style="border-radius: 10px"/>
111+
</p>
112+
47113
## 📂 **File Structure**
48114

49115
Below is the comprehensive file structure for the project:
@@ -191,66 +257,6 @@ The production build will be served at `http://localhost:3000`.
191257
- Login: Access your account through the `/auth/login` page.
192258
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.
193259

194-
## 🖼️ **UI Preview**
195-
196-
### **Landing Page**
197-
198-
#### **Light Mode**
199-
200-
<p align="center">
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"/>
208-
</p>
209-
210-
### **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-
220-
<p align="center">
221-
<img src="images/login-dark.png" alt="Login Page in Dark Mode" width="100%" style="border-radius: 10px"/>
222-
</p>
223-
224-
### **Register Page**
225-
226-
#### **Light Mode**
227-
228-
<p align="center">
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"/>
236-
</p>
237-
238-
### **Homepage (To-Do List)**
239-
240-
#### **Light Mode**
241-
242-
<p align="center">
243-
<img src="images/home-bright.png" alt="Homepage" width="100%" style="border-radius: 10px"/>
244-
</p>
245-
246-
#### **Dark Mode**
247-
248-
<p align="center">
249-
<img src="images/home-dark.png" alt="Homepage in Dark Mode" width="100%" style="border-radius: 10px"/>
250-
</p>
251-
252-
---
253-
254260
## 💡 **Notes**
255261

256262
- This application uses local storage to manage user data and to-do items. For a more robust application, consider integrating a real database (e.g., MongoDB, PostgreSQL).
@@ -274,6 +280,16 @@ yarn test
274280

275281
The tests will run and display the results in the terminal.
276282

283+
## 🐳 **Containerization**
284+
285+
This project includes a `Dockerfile` for containerization. To build the Docker image, run:
286+
287+
```bash
288+
docker compose up --build
289+
```
290+
291+
This command will build the Docker image and start the container. The application will be accessible at `http://localhost:3000`.
292+
277293
## 🔧 **Contributing**
278294

279295
Contributions are welcome! If you'd like to contribute, please fork the repository, make your changes, and create a pull request.

‎docker-compose.yml

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
version: '3.8'
2+
3+
services:
4+
app:
5+
build:
6+
context: .
7+
dockerfile: Dockerfile
8+
container_name: nextjs-todo-app
9+
ports:
10+
- "3000:3000"
11+
environment:
12+
- NODE_ENV=production
13+
volumes:
14+
- ./:/app
15+
- /app/node_modules
16+
restart: unless-stopped

0 commit comments

Comments
 (0)