https://github.com/kartikk-26/dockerized-to-do-app
A To-Do List app featuring a Node.js backend and React frontend. Docker is used to containerize both services, allowing for easy deployment and management via Docker Compose.
https://github.com/kartikk-26/dockerized-to-do-app
docker docker-compose docker-container dockerfile
Last synced: 3 months ago
JSON representation
A To-Do List app featuring a Node.js backend and React frontend. Docker is used to containerize both services, allowing for easy deployment and management via Docker Compose.
- Host: GitHub
- URL: https://github.com/kartikk-26/dockerized-to-do-app
- Owner: Kartikk-26
- Created: 2025-01-10T10:47:41.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-10T11:02:29.000Z (9 months ago)
- Last Synced: 2025-03-04T15:48:14.679Z (7 months ago)
- Topics: docker, docker-compose, docker-container, dockerfile
- Language: JavaScript
- Homepage:
- Size: 463 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# đ To-Do App (Dockerized) đ
This is a simple **To-Do List Application** with a **frontend** built using **React.js** and a **backend** using **Node.js**. The application is **Dockerized** using **Docker Compose** to manage the containers for both frontend and backend.
## ⨠**Features**
- Add, edit, and delete tasks.
- Persistent task data stored in the backend (without MongoDB, using a simple in-memory store).
- Fully dockerized application with frontend served using React and backend using Node.js.
---
## đ ī¸ **Technologies Used**
### Frontend:
- **React.js** for building the user interface.
- **Material-UI** for UI components and styling.
- **Axios** for making API calls to the backend.
### Backend:
- **Node.js** as the runtime for backend development.
- **Express.js** for building the RESTful API.
- **CORS** for handling cross-origin requests.
### Docker:
- **Docker Compose** for managing both frontend and backend containers.
---
## đ **Folder Structure**
```
To-Do-App/
â
âââ Assets/ # New folder for images
â âââ DockerHub.png # DockerHub image
â âââ To-Do-List-APP.png # To-Do List App image
â
âââ backend/ # Backend directory (Node.js API)
â âââ .gitignore # Git ignore file for backend
â âââ Dockerfile # Dockerfile for the backend
â âââ index.js # Backend Node.js server
â âââ package.json # Backend dependencies
â âââ package-lock.json # Backend lock file
â âââ server.js # Backend server
â âââ todos.json # Todo data file (JSON)
â
âââ frontend/ # Frontend directory (React app)
â âââ .gitignore # Git ignore file for frontend
â âââ Dockerfile # Dockerfile for the frontend
â âââ README.md # Frontend readme file
â âââ package-lock.json # Frontend lock file
â âââ package.json # Frontend dependencies
â âââ public/ # Public folder (React)
â â âââ favicon.ico # React app favicon
â â âââ index.html # Main HTML file
â â âââ logo192.png # Logo image for React
â â âââ logo512.png # Logo image for React
â â âââ manifest.json # App manifest
â â âââ robots.txt # Robots.txt file
â âââ src/ # Source folder (React components)
â âââ App.css # App CSS
â âââ App.js # App component
â âââ App.test.js # App tests
â âââ components/ # React components
â â âââ TodoList.js # Todo List component
â âââ index.css # Main CSS for the React app
â âââ index.js # Entry point for React
â âââ logo.svg # React logo
â âââ reportWebVitals.js # Web vitals for performance metrics
â âââ setupTests.js # Test setup
â
âââ docker-compose.yml # Docker Compose file for backend & frontend
âââ package-lock.json # Lock file for the entire project
âââ package.json # Dependencies for the entire project (if applicable)
âââ README.md # Project documentation (root-level)
```
---
## đĄ **Setting Up the Project Locally**
To run this project locally, follow these steps:
### đĨ **Step 1 : Clone the Repository**
Clone the repository to your local machine:
```bash
git clone : https://github.com/Kartikk-26/Dockerized-To-Do-App-.git
cd To-Do-App
```
### đ **Step 2: Install Docker**
If you haven't installed **Docker** on your machine yet, you can download it from [here](https://www.docker.com/products/docker-desktop).
### đī¸ **Step 3: Build the Docker Containers**
Run the following command to build the frontend and backend Docker containers:
```bash
docker-compose build
```
### âļī¸ **Step 4: Run the Application**
After building the containers, start the application by running:
```bash
docker-compose up
```
This will start both the frontend and backend services.
- The frontend will be available at `http://localhost:3000`.
- The backend will be available at `http://localhost:5000`.
---
## âšī¸ **Stop the Application**
To stop the containers, run:
```bash
docker-compose down
```
---
## đ ī¸ **Dockerized Services**
- **Backend**: The backend service is built using **Node.js** and **Express**. It handles task CRUD operations and serves the API at `http://localhost:5000`.
- **Frontend**: The frontend service is built using **React.js**. It interacts with the backend API to display and manage tasks. It is served at `http://localhost:3000`.
---
## đ **Ports Mapping**
- **Frontend** is mapped to `localhost:3000`.
- **Backend** is mapped to `localhost:5000`.
---
## đ **To-Do App Functionality**
1. **Add a Task**: Type the task in the input field and click "Add Task" to save it.
2. **Delete a Task**: Click on the trash icon next to any task to remove it from the list.
3. **Edit a Task**: Update an existing task and hit "Save".
---
## âī¸ **Customization**
You can modify the `docker-compose.yml` file to use different ports or customize other services as needed.
---
### Example Screenshot đ¸:
-> Docker-Hub-Record
-> To-Do-List-Application
---
## đĄ Connect with Me
Stay connected on [LinkedIn](https://www.linkedin.com/in/-kartikjain/) to see more projects and improvements as I continue my learning journey.
Let's collaborate and create impactful web applications!
---