Flask Visitor Counter with Docker

A complete step-by-step project showing how to build a simple Flask + Redis visitor counter web application using Docker and Docker Compose.

---

Architecture

---

Project Structure

flask-visitor-counter-docker/ │ ├── README.md ├── LICENSE ├── architecture.png ├── codes/ │ ├── python-code.py │ ├── requirements.txt │ ├── Dockerfile │ └── docker-compose.yml └── screenshots/ ├── 01-python-code.png ├── 02-requirements.png ├── 03-Dockerfile.png ├── 04-docker-compose.png ├── 05-project-dir.png ├── 06-docker-compose-build.png ├── 07-browser-test1.png ├── 08-browser-test2.png ├── 09-browser-test3.png ├── 10-change-python-code.png ├── 11-browser-no-change.png ├── 14-browser-after-first-change.png ├── 17-docker-compose-change.png ├── 18-browser1-after-second-change.png ├── 21-browser1-after-third-change.png └── 26-browser-after-change-port.png

---

How It Works

• Flask handles HTTP requests and displays the visitor count.
• Redis stores the count value persistently.
• Docker containerizes the Flask and Redis services.
• Docker Compose manages running both services together.

---

Step-by-Step Screenshots

1. Python Code

Shows the Python Flask code that connects to Redis and counts visits.

2. Requirements

Shows the Python dependencies (flask and redis) listed in requirements.txt.

3. Dockerfile

The Dockerfile used to containerize the Flask app.

4. Docker Compose Configuration

Initial docker-compose.yml file defining Flask and Redis services.

5. Project Directory

Displays project files: Python script, Dockerfile, Docker Compose file, and requirements.txt.

6. Building the Containers

Output of building containers with Docker Compose.

7. First Browser Visit

Shows the app on first visit (count starts at 1).

8. Second Browser Visit

Shows the counter incrementing on second visit.

9. Third Browser Visit

Another visit showing continuous incrementing.

10. First Python Code Change

Updated the Python code to change the displayed message.

11. No Change in Browser

Shows that changes did not appear because the container was not linked to the code directory.

12. After Restarting Docker Compose

After running docker-compose down and docker-compose up, the code change appears in the browser.

13. Adding Volume to Docker Compose

Shows the modified docker-compose.yml with a volume linking the container to the local code directory.

14. Browser After Second Change

Code changes now reflect instantly, and counter continues from previous count.

15. Browser After Third Change

Third code change appears without resetting the counter.

16. Changing Default Port

The app is now accessible on port 2000 instead of 5000.

---

Running the Project

1. Clone the repository bash git clone cd flask-visitor-counter-docker

2. Build and start containers bash docker-compose up --build

3. Open in browser

   http://localhost:5000

   (or the port you set in docker-compose.yml)

---

👤 Author

Ahmed Sayed
LinkedIn
GitHub

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.