{"id":17756932,"url":"https://github.com/hoangsonww/todo-app-nextjs-fullstack","last_synced_at":"2025-10-01T16:31:40.283Z","repository":{"id":259128220,"uuid":"864596515","full_name":"hoangsonww/ToDo-App-NextJS-Fullstack","owner":"hoangsonww","description":"🎯 Discovering the power of Next.js as a full-stack framework with a feature-rich, responsive To-Do app that combines seamless frontend and backend integration with Server-Side Rendering (SSR). Built with Next.js, SQLite3, and TypeScript! Live at: https://to-do-app-next-js-fullstack.vercel.app/.","archived":false,"fork":false,"pushed_at":"2024-10-23T16:39:39.000Z","size":1858,"stargazers_count":12,"open_issues_count":0,"forks_count":10,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-23T23:18:02.547Z","etag":null,"topics":["full-stack","full-stack-web-development","fullstack-development","material-ui","next","next-auth","next-js","nextjs","responsive","rest-api","restful-api","server-side-rendering","sqlite","sqlite3","todo","todo-app","todoapp","todolist","typescript"],"latest_commit_sha":null,"homepage":"https://hoangsonww.github.io/ToDo-App-NextJS-Fullstack/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoangsonww.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-28T16:33:42.000Z","updated_at":"2024-10-16T02:14:09.000Z","dependencies_parsed_at":"2024-10-26T03:20:02.574Z","dependency_job_id":"b6573680-8b18-4c0d-8446-0379f6cfcb13","html_url":"https://github.com/hoangsonww/ToDo-App-NextJS-Fullstack","commit_stats":null,"previous_names":["hoangsonww/todo-app-nextjs-fullstack"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FToDo-App-NextJS-Fullstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FToDo-App-NextJS-Fullstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FToDo-App-NextJS-Fullstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FToDo-App-NextJS-Fullstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoangsonww","download_url":"https://codeload.github.com/hoangsonww/ToDo-App-NextJS-Fullstack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234883315,"owners_count":18901365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["full-stack","full-stack-web-development","fullstack-development","material-ui","next","next-auth","next-js","nextjs","responsive","rest-api","restful-api","server-side-rendering","sqlite","sqlite3","todo","todo-app","todoapp","todolist","typescript"],"created_at":"2024-10-26T16:10:43.366Z","updated_at":"2025-10-01T16:31:39.827Z","avatar_url":"https://github.com/hoangsonww.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ToDo-App-Fullstack-NextJS\n\nWelcome to the **ToDo-App-Fullstack-NextJS**, a full-stack, lightweight, and simple to-do application built using **Next.js** with both backend and frontend integrated seamlessly.\n\nThis project shows the power of **Next.js** and serves as a practical demonstration of using Next.js as a complete full-stack framework, incorporating authentication, dark mode, and local storage for data persistence.\n\n## Table of Contents\n\n- [🌟 **Features**](#-features)\n- [🚀 **Live Deployment**](#-live-deployment)\n- [🖼️ **UI Preview**](#-ui-preview)\n- [📂 **File Structure**](#-file-structure)\n- [📋 **API Endpoints**](#-api-endpoints)\n  - [**1. Prerequisites**](#1-prerequisites)\n  - [**2. Clone the Repository**](#2-clone-the-repository)\n  - [**3. Install Dependencies**](#3-install-dependencies)\n  - [**4. Set Up Environment Variables**](#4-set-up-environment-variables)\n  - [**5. Run the Development Server**](#5-run-the-development-server)\n  - [**6. Build for Production**](#6-build-for-production)\n- [🌐 **Using the App**](#-using-the-app)\n- [📝 **Swagger API Documentation**](#-swagger-api-documentation)\n- [📝 **OpenAPI Specification**](#-openapi-specification)\n  - [Using the `openapi.yaml` File](#using-the-openapiyaml-file)\n- [💡 **Notes**](#-notes)\n- [🧪 **Testing**](#-testing)\n  - [**Running Tests**](#running-tests)\n- [🐳 **Containerization**](#-containerization)\n- [🔧 **Contributing**](#-contributing)\n- [📝 **License**](#-license)\n- [📧 **Contact**](#-contact)\n\n## 🌟 **Features**\n\n- Full-stack application with Next.js for both frontend and backend\n- Full authentication system (Register and Login)\n- Dark and Light mode\n- User-specific to-do lists with different categories\n- CRUD operations for to-do items\n- MongoDB database for data storage\n- WebSockets for real-time updates to To-Do items\n- Responsive design\n- Add, edit, delete, and complete tasks\n- Persistent storage using SQLite and in-memory storage\n- A clean, modern, and responsive UI\n- PWA support with offline capabilities\n- Basic testing for API endpoints and utility functions\n- Easy-to-understand file structure and codebase\n- Customizable with additional features and improvements\n\n## 🚀 **Live Deployment**\n\nThe 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).\n\nThe app features a landing page, authentication (login, register, and forgot password), a to-do list, and a Swagger API documentation page, as well as real-time to-do updates using WebSockets.\n\n## 🖼️ **UI Preview**\n\n### **Landing Page**\n\n#### **Light Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/landing-bright.png\" alt=\"Landing Page\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n#### **Dark Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/landing-dark.png\" alt=\"Landing Page in Dark Mode\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n### **Login Page**\n\n#### **Light Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/login-bright.png\" alt=\"Login Page\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n#### **Dark Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/login-dark.png\" alt=\"Login Page in Dark Mode\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n### **Register Page**\n\n#### **Light Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/register-bright.png\" alt=\"Register Page\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n#### **Dark Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/register-dark.png\" alt=\"Register Page in Dark Mode\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n### **Homepage (To-Do List)**\n\n#### **Light Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/home-bright.png\" alt=\"Homepage\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n#### **Dark Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/home-dark.png\" alt=\"Homepage in Dark Mode\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n### **Forgot Password Page**\n\n#### **Light Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/forgot-password-bright.png\" alt=\"Forgot Password Page\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n#### **Dark Mode**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/forgot-password-dark.png\" alt=\"Forgot Password Page in Dark Mode\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n## 📂 **File Structure**\n\nBelow is the comprehensive file structure for the project:\n\n```\ntodo-app-fullstack-nextjs/\n│\n├── public/\n│   ├── sitemap.xml\n│   ├── robots.txt\n│   ├── manifest.json\n│   ├── favicon.ico\n│   └── images/\n│\n├── src/\n│   ├── app/\n│   │   ├── api/                     # Backend API endpoints\n│   │   │   ├── swagger.ts           # Swagger API documentation\n│   │   │   ├── auth/\n│   │   │   │   ├── login/\n│   │   │   │   │   └── route.ts     # Login route\n│   │   │   │   ├── register/\n│   │   │   │   │   └── route.ts     # Registration route\n│   │   │   │   ├── reset-password/\n│   │   │   │   │   └── route.ts     # Reset password route\n│   │   │   │   └── verify-email/\n│   │   │   │       └── route.ts     # Email verification route\n│   │   │   └── todos/\n│   │   │       └── route.ts         # Full CRUD operations for todos\n│   │   │\n│   │   ├── auth/                    # Authentication pages\n│   │   │   ├── reset-password/\n│   │   │   │   └── page.tsx         # Reset password page\n│   │   │   ├── login/\n│   │   │   │   └── page.tsx         # Login page\n│   │   │   └── register/\n│   │   │       └── page.tsx         # Registration page\n│   │   │\n│   │   ├── landing/\n│   │   │   └── page.tsx             # Landing page\n│   │   │\n│   │   ├── swagger/\n│   │   │   └── page.tsx             # Swagger API documentation page\n│   │   │\n│   │   ├── layout.tsx               # Layout for the entire app\n│   │   ├── page.tsx                 # Homepage with conditional redirect logic\n│   │   ├── page.css                 # Homepage styles\n│   │   ├── page.module.css          # Homepage module styles\n│   │   └── globals.css              # Global CSS styles\n│   │\n│   ├── fonts/                       # Custom fonts\n│   │\n│   └── types/                       # TypeScript types\n│       └── swagger-ui-react.d.ts    # Swagger UI types\n│\n├── nginx/                           # Nginx configuration\n│   ├── default.conf                 # Default Nginx configuration\n│   └── nginx.conf                   # Nginx configuration\n│\n├── kubernetes/                      # Kubernetes configuration\n│   ├── frontend-deployment.yaml     # Frontend deployment configuration\n│   ├── frontend-service.yaml        # Frontend service configuration\n│   ├── backend-deployment.yaml      # Backend deployment configuration\n│   ├── backend-service.yaml         # Backend service configuration\n│   └── configmap.yaml               # ConfigMap for environment variables\n│\n├── .env.local                       # Environment variables (if using)\n├── next.config.js                   # Next.js configuration\n├── Dockerfile                       # Docker configuration\n├── next.config.js                   # Next.js configuration\n├── package-lock.json                # Locked versions of dependencies\n├── package.json                     # Project dependencies and scripts\n├── tsconfig.json                    # TypeScript configuration\n├── Jenkinsfile                      # Jenkins CI/CD pipeline\n├── .gitignore                       # Files and directories to ignore\n├── .eslintrc.json                   # ESLint configuration\n├── manage_app.sh                    # Script to manage the app\n├── openapi.yaml                     # OpenAPI Specification\n├── LICENSE                          # Project license\n└── README.md                        # This README file\n```\n\n## 📋 **API Endpoints**\n\nHere's a table listing all the API endpoints provided by this application:\n\n| HTTP Method | Endpoint                   | Description                       |\n|-------------|----------------------------|-----------------------------------|\n| `POST`      | `/api/auth/login`          | Log in with username and password |\n| `POST`      | `/api/auth/register`       | Register a new user               |\n| `GET`       | `/api/todos`               | Fetch all todos for a user        |\n| `POST`      | `/api/todos`               | Create a new to-do item           |\n| `PUT`       | `/api/todos`               | Update a to-do item               |\n| `DELETE`    | `/api/todos`               | Delete a to-do item               |\n| `PATCH`     | `/api/todos`               | Mark a to-do item as completed    |\n| `POST`      | `/api/auth/reset-password` | Reset user password               |\n| `POST`      | `/api/auth/verify-email`   | Verify user email                 |\n\n## 🛠️ **Getting Started**\n\nFollow this step-by-step guide to set up the project locally.\n\n### **1. Prerequisites**\n\nEnsure you have the following installed:\n\n- [Node.js](https://nodejs.org/en/download/) (v14 or later)\n- [npm](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/)\n\n### **2. Clone the Repository**\n\n```bash\ngit clone https://github.com/hoangsonww/ToDo-App-NextJS-Fullstack.git\ncd ToDo-App-NextJS-Fullstack\n```\n\n### **3. Install Dependencies**\n\nIf you're using npm:\n\n```bash\nnpm install\n```\n\nOr, if you're using Yarn:\n\n```bash\nyarn install\n```\n\n### **4. Set Up Environment Variables**\n\nCreate a `.env.local` file in the root directory if any environment variables are required. (Currently, the project doesn't use any external services that require environment variables).\n\n### **5. Run the Development Server**\n\nStart the development server:\n\n```bash\nnpm run dev\n```\n\nOr, if using Yarn:\n\n```bash\nyarn dev\n```\n\nThe application should now be running at `http://localhost:3000`.\n\n### **6. Build for Production**\n\nTo build the project for production, run:\n\n```bash\nnpm run build\n```\n\nOr, if using Yarn:\n\n```bash\nyarn build\n```\n\nTo start the production server:\n\n```bash\nnpm run start\n```\n\nOr:\n\n```bash\nyarn start\n```\n\nThe production build will be served at `http://localhost:3000`.\n\n## 🌐 **Using the App**\n\n1. **Visit the Landing Page** (`/landing`): Introduces the app with the option to log in or register.\n2. **Authentication**:\n\n- Register: Create a new account via the `/auth/register` page.\n- Login: Access your account through the `/auth/login` page.\n\n3. **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.\n\nAlternatively, you can directly access the deployed application at [https://todo-app-nextjs-stack.vercel.app/](https://todo-app-nextjs-stack.vercel.app/).\n\n## 📝 **Swagger API Documentation**\n\nThe application includes a Swagger API documentation page that lists all the available API endpoints and their descriptions. You can access the Swagger documentation at `/swagger`.\n\nHere is what it looks like:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/swagger.png\" alt=\"Swagger API Documentation\" width=\"100%\" style=\"border-radius: 10px\"/\u003e\n\u003c/p\u003e\n\n## 📝 **OpenAPI Specification**\n\n### Using the `openapi.yaml` File\n\n1. **View the API Documentation**\n\n- Open [Swagger Editor](https://editor.swagger.io/).\n- Upload the `openapi.yaml` file or paste its content.\n- Visualize and interact with the API documentation.\n\n2. **Test the API**\n\n- Import `openapi.yaml` into [Postman](https://www.postman.com/):\n  - Open Postman → Import → Select `openapi.yaml`.\n  - Test the API endpoints directly from Postman.\n- Or use [Swagger UI](https://swagger.io/tools/swagger-ui/):\n  - Provide the file URL or upload it to view and test endpoints.\n\n3. **Generate Client Libraries**\n\n- Install OpenAPI Generator:\n  ```bash\n  npm install @openapitools/openapi-generator-cli -g\n  ```\n- Generate a client library:\n  ```bash\n  openapi-generator-cli generate -i openapi.yaml -g \u003clanguage\u003e -o ./client\n  ```\n- Replace `\u003clanguage\u003e` with the desired programming language.\n\n4. **Generate Server Stubs**\n\n- Generate a server stub:\n  ```bash\n  openapi-generator-cli generate -i openapi.yaml -g \u003cframework\u003e -o ./server\n  ```\n- Replace `\u003cframework\u003e` with the desired framework.\n\n5. **Run a Mock Server**\n\n- Install Prism:\n  ```bash\n  npm install -g @stoplight/prism-cli\n  ```\n- Start the mock server:\n  ```bash\n  prism mock openapi.yaml\n  ```\n\n6. **Validate the OpenAPI File**\n\n- Use [Swagger Validator](https://validator.swagger.io/):\n  - Upload `openapi.yaml` or paste its content to check for errors.\n\nThis guide enables you to view, test, and utilize the API. You can also generate client libraries, server stubs, and run a mock server using the OpenAPI Specification.\n\n## 💡 **Notes**\n\n- 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).\n- The dark mode toggle is handled with React state and applied to various components via Material-UI's `ThemeProvider`.\n\n## 🧪 **Testing**\n\n### **Running Tests**\n\nThis project includes a few basic tests for the API endpoints and utility functions. To run the tests, use the following command:\n\n```bash\nnpm run test\n```\n\nOr, if using Yarn:\n\n```bash\nyarn test\n```\n\nThe tests will run and display the results in the terminal.\n\n## 🐳 **Containerization**\n\nThis project includes a `Dockerfile` for containerization. To build the Docker image, run:\n\n```bash\ndocker compose up --build\n```\n\nThis command will build the Docker image and start the container. The application will be accessible at `http://localhost:3000`.\n\n## 🔧 **Contributing**\n\nContributions are welcome! If you'd like to contribute, please fork the repository, make your changes, and create a pull request.\n\n## 📝 **License**\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.\n\n## 📧 **Contact**\n\nFor any inquiries or feedback, feel free to reach out to the author at `hoangson091104@gmail.com`.\n\nEnjoy using the **ToDo-App-Fullstack-NextJS**! 🎉\n\n---\n\nHappy coding! 🚀\n\n[Back to Top ↑](#todo-app-fullstack-nextjs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Ftodo-app-nextjs-fullstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoangsonww%2Ftodo-app-nextjs-fullstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Ftodo-app-nextjs-fullstack/lists"}