๐ฏ 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/.
MIT License
Welcome to the ToDo-App-Fullstack-NextJS, a full-stack and simple to-do application built using Next.js with both backend and frontend integrated seamlessly.
This 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.
Below is the comprehensive file structure for the project:
todo-app-fullstack-nextjs/
โ
โโโ public/
โ โโโ favicon.ico
โ โโโ images/ # Placeholder for UI images
โ
โโโ src/
โ โโโ app/
โ โ โโโ api/ # Backend API endpoints
โ โ โ โโโ todos/
โ โ โ โโโ route.ts # Full CRUD operations for todos
โ โ โ
โ โ โโโ auth/ # Authentication pages
โ โ โ โโโ login/
โ โ โ โ โโโ page.tsx # Login page
โ โ โ โโโ register/
โ โ โ โโโ page.tsx # Registration page
โ โ โ
โ โ โโโ landing/
โ โ โ โโโ page.tsx # Landing page
โ โ โ
โ โ โโโ layout.tsx # Layout for the entire app
โ โ โโโ page.tsx # Homepage with conditional redirect logic
โ โ โโโ globals.css # Global CSS styles
โ โ
โ โโโ components/ # Reusable components
โ โ โโโ Navbar.tsx # Navbar component
โ โ โโโ Footer.tsx # Footer component
โ โ
โ โโโ styles/ # Additional styles if needed
โ โ โโโ page.css
โ โ
โ โโโ utils/ # Utility functions (e.g., authentication helpers)
โ โโโ auth.ts
โ
โโโ .env.local # Environment variables (if using)
โโโ next.config.js # Next.js configuration
โโโ package.json # Project dependencies and scripts
โโโ README.md # This README file
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 |
POST |
/api/todos |
Create a new to-do item |
PUT |
/api/todos |
Update a to-do item |
DELETE |
/api/todos |
Delete a to-do item |
Follow this step-by-step guide to set up the project locally.
Ensure you have the following installed:
git clone https://github.com/hoangsonww/ToDo-App-NextJS-Fullstack.git
cd ToDo-App-NextJS-Fullstack
If you're using npm:
npm install
Or, if you're using Yarn:
yarn install
Create 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).
Start the development server:
npm run dev
Or, if using Yarn:
yarn dev
The application should now be running at http://localhost:3000
.
To build the project for production, run:
npm run build
Or, if using Yarn:
yarn build
To start the production server:
npm run start
Or:
yarn start
The production build will be served at http://localhost:3000
.
/landing
): Introduces the app with the option to log in or register./auth/register
page./auth/login
page./
) where you can add, edit, and delete to-dos, as well as toggle dark mode.ThemeProvider
.This project includes a few basic tests for the API endpoints and utility functions. To run the tests, use the following command:
npm run test
Or, if using Yarn:
yarn test
The tests will run and display the results in the terminal.
The application is deployed live on Vercel. You can access it at https://to-do-app-next-js-fullstack.vercel.app/.
This project includes a Dockerfile
for containerization. To build the Docker image, run:
docker compose up --build
This command will build the Docker image and start the container. The application will be accessible at http://localhost:3000
.
Contributions are welcome! If you'd like to contribute, please fork the repository, make your changes, and create a pull request.
This project is licensed under the MIT License. See the LICENSE file for more information.
For any inquiries or feedback, feel free to reach out to the author at [email protected]
.
Enjoy using the ToDo-App-Fullstack-NextJS! ๐
Happy coding! ๐