DEV Community: Mr Chike

🤝 Learn Front-End by Doing: Contribute to Cal.com's Open Source...🚀

Mr Chike — Thu, 14 Aug 2025 13:59:11 +0000

In this tutorial, we'll be focusing on Cal.com:

A fully customizable scheduling software for individuals, businesses taking calls and developers building scheduling platforms where users meet users.

⛔✋ Before you start scrolling and skimming...
Here’s a quick overview of the project you’ll be setting up and contributing to.

👇 Table of Contents

⚙️ Environment Setup (Optional)
📦 Project Scaffolding
🚀 Launch

⚙️ Environment Setup (Optional)

Getting started with servers can feel overwhelming at first. I remember that stage well. That’s why I like to keep things beginner-friendly. If you’ve already got some experience under your belt, you can skip this part.

For this guide, I’m working with Ubuntu Linux, but we’ll also walk through setting up a fresh environment on Windows using WSL (Windows Subsystem for Linux). Even if you don’t need it today, this is the kind of setup you’ll probably want to bookmark for later.

💡 For Windows users
You can install Windows Subsystem for Linux (WSL) with the command wsl --install in your terminal.

wsl --list --online

The following is a list of valid distributions that can be installed.
Install using 'wsl.exe --install <Distro>'.

NAME                            FRIENDLY NAME
AlmaLinux-8                     AlmaLinux OS 8
AlmaLinux-9                     AlmaLinux OS 9
AlmaLinux-Kitten-10             AlmaLinux OS Kitten 10
AlmaLinux-10                    AlmaLinux OS 10
Debian                          Debian GNU/Linux
FedoraLinux-42                  Fedora Linux 42
SUSE-Linux-Enterprise-15-SP6    SUSE Linux Enterprise 15 SP6
SUSE-Linux-Enterprise-15-SP7    SUSE Linux Enterprise 15 SP7
Ubuntu                          Ubuntu
Ubuntu-24.04                    Ubuntu 24.04 LTS
archlinux                       Arch Linux
kali-linux                      Kali Linux Rolling
openSUSE-Tumbleweed             openSUSE Tumbleweed
openSUSE-Leap-15.6              openSUSE Leap 15.6
Ubuntu-18.04                    Ubuntu 18.04 LTS
Ubuntu-20.04                    Ubuntu 20.04 LTS
Ubuntu-22.04                    Ubuntu 22.04 LTS
OracleLinux_7_9                 Oracle Linux 7.9
OracleLinux_8_10                Oracle Linux 8.10
OracleLinux_9_5                 Oracle Linux 9.5

To install Ubuntu 22.04 (recommended):

wsl --install Ubuntu-22.04

Once installed, launch your new Ubuntu distribution with:

wsl -d Ubuntu-22.04

You can access your project folders in the new Linux environment using the WSL extension in your favourite code editor (I use VSCode).
From there, continue with the setup by running the commands below.

💡 For Linux Users
Run the command below in your terminal. If you happen to be using a different Linux distribution, then replace apt with your system's package manager like yum, dnf, pkg, apk and so on.

# Update package lists and upgrade existing packages
sudo apt update && sudo apt upgrade -y

# Install useful dependencies
sudo apt install -y docker.io docker-compose tree vim openssh-server

# Add current user to the docker group for non-root access
sudo usermod -aG docker $USER

# Enable/start the SSH service
sudo systemctl enable ssh
sudo systemctl start ssh

# Allow SSH through the firewall and enable UFW (Uncomplicated Firewall)
sudo ufw allow ssh
sudo ufw enable

# Generate a new RSA SSH key pair with no passphrase and a comment for identification
ssh-keygen -t rsa -f ~/.ssh/id_rsa -N "" -C "ssh-key"

# Reboot the system to apply changes
sudo shutdown -r now

Now that we're done with running the above commands and restarting the server so changes take full effect, we will be moving to the next section which will be...

📦 Project Scaffolding

In this section, we will be setting up the project structure.

# Clone the Cal.com repository from GitHub
git clone --depth=1 https://github.com/calcom/cal.com.git

# Move into the newly cloned project directory
cd cal.com

# Create and switch to a new Git branch called "dev"
git checkout -b dev

# Create a new Docker network for containers to communicate easily with each other
docker network create calcom_net

docker run \
  --network calcom_net \                         # Use custom network
  --dns=8.8.8.8 \                                # Set DNS to Google
  --privileged \                                 # Grant extra permissions
  --name calcom_dev \                            # Name the container
  --add-host="host.docker.internal:host-gateway" \ # Access host from container
  -v /var/run/docker.sock:/var/run/docker.sock \ # Mount Docker socket
  -v $(pwd):/calcom \                            # Mount current dir
  -w /calcom \                                   # Set working dir
  -e NVM_DIR="/root/.nvm" \                      # NVM config
  -e NODE_OPTIONS="--max-old-space-size=16384" \ # Increase Node memory
  -e CALCOM_TELEMETRY_DISABLED=1 \               # Disable telemetry
  -e NEXT_PUBLIC_LOGGER_LEVEL=3 \                # Set log level
  -e NEXT_PUBLIC_IS_E2E=1 \                      # Enable E2E mode
  -it node:20-bullseye bash                      # Run Node 20 with bash

Now you should be inside the container, and your bash shell should look like this

root@60c156b42050:/calcom#

In your container bash shell, run the command

apt update && apt upgrade -y     # Update & upgrade
apt install -y docker.io \       
               docker-compose \  # Install Docker tools
               vim \             # Install text editor
               iputils-ping \    # Install ping
               npm               # Install Node package manager

Now, let create setup.sh file and copy all the contents of this file 👉 Calcom Setup Script into it.
In this terminal shell, run the following commands

# Create setup script
touch setup.sh

# Make it executable
chmod +x setup.sh

# Execute updated script
./setup.sh

NB: If you're not familiar with docker, try a crash course on YouTube...

Now there are some important updates to make in our Docker Compose files before spinning up the application:

docker-compose.dev.yml
docker-compose.prod.yml
apps/api/v2/docker-compose-apiv2.yaml

In each file, go to the volumes section and update the project's folder path to match the absolute path of your local cal.com project directory (e.g. /home/mrchike/cal.com).
You can run the pwd command inside the project folder in your host's terminal to get the correct path.

This is what you’ll see:

volumes:
   - /absolute/path/to/cal.com:/calcom # UPDATE FOLDER PATH

and this is what it should look like when done. (of course, updated with your own project folder path)

volumes:
   - /home/mrchike/cal.com:/calcom

Now that you're done updating the path in each Docker Compose file. Run the following command.

🚀 Launch

# Run the application in production mode (optimized build, no hot reloading)
docker-compose -f docker-compose.prod.yml up --build

# Run the application in development mode (supports real-time code changes / hot reloading)
docker-compose -f docker-compose.dev.yml up --build

NB: The project may take some time to spin up, approximately 30 minutes to 1 hour.
If it starts consuming a lot of your system’s resources and doesn’t boot up properly, consider running it on an external server (e.g., AWS, GCP, or any equivalent).

If you encounter an error... 🎉 Congratulations! You're officially a developer, figure it out. 😅

But if, after a long (and valuable) struggle, you still need support, feel free to reach out on LinkedIn

The command will spin up all related services along with their respective GUIs for web access.

Once they’re up, you can access them locally using the following URLs and credentials:

Cal.com APP (Frontend)
🌐 URL: http://localhost:3000/
Cal.com API (Backend)
🌐 URL: http://localhost:3002/docs
RedisInsight (Redis)
🌐 URL: http://localhost:5540/
🔌 Connection String: redis://:root@redis:6379
pgAdmin (Postgres)
🌐 URL: http://localhost:8083/
🔐 Login:
Email: root@mailinator.com
Password: root

The PostgreSQL database has already been updated with initial migrations! If you're new to pgAdmin, no w😉rries!. I’ll walk you through viewing the data:

Visit 👉 http://localhost:8083/browser/
Click "Add New Server"
Under the General tab, set a name (e.g., Cal.com App)
Under the Connection tab, fill in the following:
Host name/address: postgres
Port: 5432
Maintenance database: root
Username: root
Password: root
Save password?: ✅
Click Save

To view your data:
Go to Databases(1) -> Schemas(1) -> public -> Tables (100).
Right-click any table -> View/Edit Data -> All Rows

When you are done setting up. You can either create a user and log in or use the already existing users below:

username: enterprise-member-1
email: enterprise-member-1@example.com
password: enterprise-member-1

username: enterprise-member-2
email: enterprise-member-2@example.com
password: enterprise-member-2

username: enterprise-member-3
email: enterprise-member-3@example.com
password: enterprise-member-3

and below are some URLs that you might find helpful once your project is up and running!

http://localhost:3000/event-types
http://localhost:3000/auth/setup
http://localhost:3000/getting-started

That’s all, folks! 🎉

Hope you have fun contributing and learning on the job. This project is packed with value, and you’ll definitely learn a lot because the technologies used are industry standard for building front-end applications.

Feel free to supplement your learning with YouTube or other popular educational platforms to deepen your understanding.

Good luck, and happy building! 🚀👨🏾‍💻

💡 Enjoyed this article? Connect with me on:

💼 LinkedIn
🐙 GitHub.

Your support means a lot. If you’d like to buy me a coffee ☕️ to keep me fueled, feel free to check out this link. Your generosity would go a long way in helping me continue to create content like this.

Previously Written Articles:

🚀 Create Professional Portfolios Using Material for MkDocs (Series-X) → Read here
🛠️ FastAPI in Production: Build, Scale & Deploy - Series B : Services, Queues & Containers → Read here
🧠 Master the Art of Learning Efficiently (A Memo for Lifelong Learners) ⏱️🎯 → Read here

🛠️ FastAPI in Production: Build, Scale & Deploy - Series B : Services, Queues & Containers

Mr Chike — Wed, 23 Jul 2025 02:44:00 +0000

Welcome to Part 2 of our 3-part FastAPI Series 📦 - Full source code is available on GitHub!

In case you missed it, here’s 🔥PART 1 to get you up to speed!

To whet your appetite, here are just a few of the interesting features we’ll be focusing on:

🐳 Dockerized Environment Setup
🚀 Asynchronous Task Processing with Celery
📦 Boss-Level Project Documentation with MKDocs.

Before we dive in, here's a quick look at what we'll cover:

📚 Table of Contents

⚽ Picking Up Where We Left Off
🗂️ Project Structure
🛢️ Setup Database
💾 Perform CRUD Operations
🚀 Offloading CPU Intensive Workloads with Celery
📄 Project Documentation with MKDocs
🐳 Running Your Project in Docker

⚽ Picking Up Where We Left Off

Let’s pick things up by cloning the repo from Part 1 and setting up our project environment. Follow these steps to get started:

# Clone project
git clone --branch=seriesA https://github.com/MrChike/media_app.git

cd media_app

# Create and activate virtual environment
python3 -m venv env && source env/bin/activate

# Install dependencies
pip install -r requirements.txt

Now that our project is all set up, let's create a setup script to bootstrap the series_b files we’ll be working with:

# Create the setup script file
touch series_b_setup.sh

# Make the setup script executable
chmod +x series_b_setup.sh

# Run the setup script (after updating it with the setup script repo link)
./series_b_setup.sh

At this point, your project structure would look like this 👇🏼

🗂️ Project Structure

media_app/

├── base/                                # Core feature module
│   ├── __init__.py
│   ├── router.py                        # Defines HTTP API endpoints and maps them to controller functions
│   ├── controller.py                    # Handles request-response cycle; delegates business logic to services
│   ├── service.py                       # Core business logic for async I/O operations
│   ├── model.py                         # SQLAlchemy ORM models representing database tables
│   ├── schema.py                        # Pydantic models for input validation and output serialization
│   ├── dependencies.py                  # Module-specific DI components like authentication and DB sessions
│   └── tasks.py                         # Core business logic for CPU-bound operations

├── movies/                              # Movie feature module (same layout as base)
│   ├── __init__.py
│   ├── router.py
│   ├── controller.py
│   ├── service.py
│   ├── model.py
│   ├── schema.py
│   ├── dependencies.py
│   └── tasks.py

├── static/                              # (Optional) Static files (e.g., images, CSS)
├── templates/                           # (Optional) Jinja2 or HTML templates for frontend rendering
├── docs/                                # (Optional) API documentation, design specs, or OpenAPI enhancements

├── shared/                              # Project-wide shared codebase
│   ├── __init__.py
│   ├── config/
│   │   ├── __init__.py
│   │   ├── base_settings.py             # Base config for environments
│   │   └── settings.py                  # Pydantic-based config management
│   ├── db/
│   │   ├── __init__.py
│   │   └── connection.py                # DB engine/session handling
│   ├── dependencies/                    # Shared DI functions (e.g., auth, DB session)
│   │   └── __init__.py
│   ├── middleware/                      # Global middlewares (e.g., logging, error handling)
│   │   └── __init__.py
│   ├── services/
│   │   ├── __init__.py
│   │   ├── external_apis/               # Third-party integrations
│   │   │   ├── __init__.py
│   │   │   └── omdb_movies.py           # Integration with OMDB API
│   │   └── internal_operations/         # CPU-intensive logic, background tasks
│   │       └── __init__.py
│   └── utils/                           # Generic helpers
│       ├── __init__.py
│       └── fetch_request_with_error_handling.py  # Error-resilient HTTP requests

├── scripts/                             # Developer or DevOps utilities
│   ├── __init__.py
│   └── sanity_check.py                  # A friendly reminder not to lose your mind while debugging

tests/                                     # Root of all tests
├── __init__.py
│
├── unit/                                  # Fast, isolated logic-level tests
│   ├── __init__.py
│   ├── base/
│   │   ├── __init__.py
│   │   └── test_service.py
│   └── movies/
│       ├── __init__.py
│       ├── test_controller.py
│       ├── test_service.py
│       └── test_tasks.py
│
├── integration/                           # DB/API/network dependent tests
│   ├── __init__.py
│
├── e2e/                                   # High-level, full user flow tests
│   ├── __init__.py
│
├── system/                                # System resilience, performance, fault-tolerance tests
│   ├── __init__.py

├── migrations/                          # Alembic migration files
│   ├── env.py
│   ├── README
│   ├── script.py.mako
│   └── versions/                        # Versioned migration scripts

├── alembic.ini                          # Alembic configuration for database migrations
├── celeryconfig.py                      # Celery settings for async task queue

├── docker-compose.api.yaml              # Docker Compose API
├── docker-compose.db.yaml               # Docker Compose DB
├── Dockerfile                           # Base app Dockerfile
├── Dockerfile.nginx                     # Nginx reverse proxy Dockerfile
├── nginx.conf                           # Nginx configuration
├── entrypoint.sh                        # Shell script to run app container
├── series_a_setup.sh                    # SeriesA Environment setup script
├── series_b_setup.sh                    # SeriesB Environment setup script

├── .example.env                         # Template for environment variables
├── .coveragerc                          # Code coverage settings
├── .gitignore                           # Files and folders ignored by Git

├── main.py                              # FastAPI application entrypoint
├── pytest.ini                           # Pytest configuration
├── requirements.txt                     # Python dependency list
├── JOURNAL.md                           # Development log: issues faced, solutions, and resources
└── README.md                            # Project overview, setup, and usage

🛢️ Setup Database

Now that we know what to expect, we will set up our database(s).
At first, we will start by updating these files:

movies/model.py
movies/schema.py
shared/config/settings.py
shared/db/connection.py

Now you've updated the files we will be moving next to setting up alembic.
What the awwwwn is an Alembic...? you ask? 😉

Alembic is a database migration tool for Python that integrates with SQLAlchemy to generate, track, and apply versioned schema changes across different environments.

Now that you’ve got all that off your chest, it’s time to initialize the migrations folder.

Quick Note💥: You can technically name this folder anything, even alembic. But I prefer migrations because it’s clear and straightforward, and it helps anyone reading the code later (including future me) to quickly understand its purpose without confusion.

Next, run the command:

alembic init migrations

  Creating directory /path/to/media_app/migrations ...  done
  Creating directory /path/to/media_app/migrations/versions ...  done
  Generating /path/to/media_app/migrations/README ...  done
  Generating /path/to/media_app/alembic.ini ...  done
  Generating /path/to/media_app/migrations/env.py ...  done
  Generating /path/to/media_app/migrations/script.py.mako ...  done
  Please edit configuration/connection/logging
  settings in /path/to/media_app/alembic.ini before proceeding.

After running the command, you’ll notice an alembic.ini file and a migrations folder have been created.

Our focus will be on updating the migrations/env.py file.

This file is generated automatically when you run alembic init, but there are several key parts we’ll be updating to make it work with our PostgreSQL database:

Line 5 (Import application settings)
Line 6 (Import modules models)
Line 11 (Configure PostgreSQL connection URL)
Line 31 (Register modules migration)
Line 53 (Insert database connection string)
Line 76 (Add database URL and connection parameters)

Now that the settings are complete, it’s time to configure the database using a Docker Compose file.

Update your docker-compose.db.yaml file to reflect the necessary services.

Note: I purposely included all database configurations in a single Docker Compose file for simplicity. I understand that some of you might already be using external databases. However, for the purpose of this tutorial, I’ve bundled Redis, Postgres, and MongoDB along with their respective GUIs: RedisInsight, pgAdmin, and Mongo Express into one file for convenience.

If you’re already using external databases, you can skip the next step. Otherwise, start the services by running:

docker-compose -f docker-compose.db.yaml up

This command will spin up the databases along with their respective GUIs. Give it a minute or so for all the services to initialize properly. (Between you and I, pgAdmin is an elder, so he takes more time to get prepared, so please be patient with him)😉

Once they’re up, you can access them locally using the following URLs and credentials:

RedisInsight (Redis)
🌐 URL: http://localhost:5540/
🔌 Connection String: redis://:root@redis:6379
Mongo Express (MongoDB)
🌐 URL: http://localhost:8081/
🔐 Login: Already logged in as admin
pgAdmin (Postgres)
🌐 URL: http://localhost:8083/
🔐 Login:
Email: root@mailinator.com
Password: root

Now that we have our databases up and running, let’s not lose sight of what we’ve accomplished so far with Alembic.

So far, we’ve only completed the first step in the 3-step Alembic flow: initializing migrations. The next two steps are just as important, generating and applying those migrations. That’s what we’ll focus on next.

To generate a new migration based on your current models, run the following command:

alembic revision --autogenerate -m "Initial Migration"

Replace "Initial Migration" with a message that describes the changes you're capturing, if needed.

INFO  [alembic.runtime.migration] Context impl PostgresqlImpl.
INFO  [alembic.runtime.migration] Will assume transactional DDL.
INFO  [alembic.autogenerate.compare] Detected added table 'movies'
INFO  [alembic.autogenerate.compare] Detected added index 'ix_movies_id' on '('id',)'
INFO  [alembic.autogenerate.compare] Detected added index 'ix_movies_title' on '('title',)'
  Generating /path/to/media_app/migrations/versions/b7283418aefb_initial
  _migration.py ...  done

To apply the generated migrations to your relational (PostgreSQL) database, run the following command:

alembic upgrade head

INFO  [alembic.runtime.migration] Context impl PostgresqlImpl.
INFO  [alembic.runtime.migration] Will assume transactional DDL.
INFO  [alembic.runtime.migration] Running upgrade  -> b7283418aefb, Initial Migration

This will apply the latest migration(s) to your database schema, syncing it with your current models.

Your PostgreSQL database has been updated with the movies table! If you're new to pgAdmin, no w😉rries!. I’ll guide you through how to view it. First, head to http://localhost:8083/browser/ and register a new server. Under the General tab, name your server something like Media App. Then, in the Connection tab, update the following details:

Host name/address: postgres
Port: 5432
Maintenance database: root
Username: root
Password: root
Save password?: ✅

And Don’t forget to smash the Save button... & follow for more!👍

Once you're connected, go to Databases(2) -> root -> Schemas -> public -> Tables (2). Right-click on the movies table, and choose View/Edit Data -> All Rows to see the contents.

Now that we’ve completed the migration process and have our database up and running, it’s time to move on to the next phase. 👣

💾 Perform CRUD Operations

What’s an app without CRUD? 😤
At the heart of every killer app, no matter how sleek the UI, how fancy the animations, or how many laws of space-time complexities it defies, one simple truth is: users just want to create, read, update, and delete stuff.

If your app can’t handle their basic requests? Game Over!❌
So let’s give our stakeholders what they truly want, reliable CRUD endpoints that just work.

We will be updating the following files according to the order of the request life cycle explained in part 1.

movies/router.py
movies/controller.py
movies/service.py
movies/dependencies.py
shared/services/external_apis/omdb_movies.py
shared/utils/fetch_request_with_error_handling.py
tests/unit/movies/test_controller.py
tests/unit/movies/test_service.py
main.py

Now that we've updated these files, let's check if unit tests are all intact. Run the command:

pytest

======================================================================= test session starts ========================================================================
platform linux -- Python 3.10.12, pytest-8.3.5, pluggy-1.6.0
rootdir: /path/to/media_app
configfile: pytest.ini
testpaths: tests/
plugins: cov-6.1.1, anyio-4.9.0
collected 13 items                                                                                                                                                 

tests/unit/movies/test_controller.py ......                                                                                                                  [ 46%]
tests/unit/movies/test_service.py .......                                                                                                                    [100%]

========================================================================== tests coverage ==========================================================================
_________________________________________________________ coverage: platform linux, python 3.10.12-final-0 _________________________________________________________

Name                   Stmts   Miss  Cover   Missing
----------------------------------------------------
movies/controller.py      22      0   100%
movies/service.py         86      0   100%
movies/tasks.py            0      0   100%
----------------------------------------------------
TOTAL                    108      0   100%
======================================================================== 13 passed in 8.68s ========================================================================

NB: The test configuration had already been set here in part 1. So if interested feel free to check it up...

Everythings seems good. Let have a view of our changes, run the command:

uvicorn main:app --reload --port 8000

INFO:     Will watch for changes in these directories: ['/path/to/media_app']
INFO:     Uvicorn running on http://127.0.0.1:8006 (Press CTRL+C to quit)
INFO:     Started reloader process [59568] using WatchFiles
INFO:     Started server process [59588]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

At this endpoint, feel free to play with the endpoints. (See what i did there)😏

So, to add the final icing on this piece of cake, in the next section, we’ll be introducing the one and only Celery... 💃

🚀 Offloading CPU Intensive Workloads with Celery

If async gives FastAPI the speed of Superman, then adding Celery makes it the Flash on three cups of coffee and a shot of tequila.

So first, we will conclude by updating the pending files related to crud operations for celery task processing. Go ahead and update the following files:

movies/router.py
movies/controller.py
movies/service.py
movies/tasks.py
tests/unit/movies/test_controller.py
tests/unit/movies/test_service.py
tests/unit/movies/test_tasks.py

And for the celery configuration itself update the following files:

shared/config/settings.py
celeryconfig.py

Now that we're done with the setup. Let's run the following command to get our celery workers up and running...

celery -A shared.config.settings.redis_broker worker --loglevel=INFO --concurrency=4

 -------------- celery@mrchike-vm v5.5.2 (immunity)
--- ***** ----- 
-- ******* ---- Linux-6.8.0-60-generic-x86_64-with-glibc2.35 2025-07-10 00:32:39
- *** --- * --- 
- ** ---------- [config]
- ** ---------- .> app:         tasks:0x722396ee9cf0
- ** ---------- .> transport:   redis://:**@localhost:6379/0
- ** ---------- .> results:     redis://:**@localhost:6379/0
- *** --- * --- .> concurrency: 4 (prefork)
-- ******* ---- .> task events: OFF (enable -E to monitor tasks in this worker)
--- ***** ----- 
 -------------- [queues]
                .> celery           exchange=celery(direct) key=celery


[tasks]
  . movies.tasks.process_heavy_task

[2025-07-10 00:32:40,268: INFO/MainProcess] Connected to redis://:**@localhost:6379/0
[2025-07-10 00:32:40,286: INFO/MainProcess] mingle: searching for neighbors
[2025-07-10 00:32:41,385: INFO/MainProcess] mingle: all alone
[2025-07-10 00:32:41,494: INFO/MainProcess] celery@mrchike-vm ready.

The tasks have been registered and now we need to execute this through the api.

[2025-07-10 00:37:33,717: INFO/MainProcess] Task movies.tasks.process_heavy_task[c0553b69-9529-42df-8ce4-506b3fa8d2ed] received
[2025-07-10 00:41:37,690: INFO/ForkPoolWorker-4] ==============================================
[2025-07-10 00:41:37,692: INFO/ForkPoolWorker-4] Successfully Processed 1 Billion Transactions...
[2025-07-10 00:41:37,692: INFO/ForkPoolWorker-4] ==============================================
[2025-07-10 00:41:37,723: INFO/ForkPoolWorker-4] Task movies.tasks.process_heavy_task[c0553b69-9529-42df-8ce4-506b3fa8d2ed] succeeded in 243.99923642900103s: 1000000000

This task takes 243.999 seconds, which is approximately 4.07 minutes. Now imagine if this task weren’t offloaded to the background using Celery, and your user had to wait the full 4 minutes before being able to continue. That’s enough time to completely lose their attention, and likely their patience.

Now scale that up to thousands or even millions of users. Blocking execution like that doesn’t just degrade user experience, it can cripple your application. Background task queues like Celery aren’t just convenient but essential for performance and scalability.

At this point your changes would have reflected in the Redis DB. Check it up. And that's a wrap for this section. We'll be moving to project documentation.

📄 Project Documentation with MKDocs

The project documentation we will be building can be found below but it's important to note that the documentation structure has already been set when you ran the setup script.

To enable display of our documentation static files, we would be udpating the main.py to include static import and mounting

After you're done with the update. You can now access the documentation page on http://127.0.0.1:8000/docs/

And now for the grand finale, let's put it all in a box.

🐳 Running Your Project in Docker

To wrap things up, you will be updating the following files

Take your time and go through the DockerFiles. That's your assignment.
What i would be focusing on is explaining Nginx and Entrypoint.

Nginx serves as a reverse proxy.
What's a reverse proxy, you asked?

A reverse proxy is a server that sits between clients and backend servers, forwarding client requests to the appropriate backend server and then returning the server's response back to the client and nginx.conf is what handles this.

The entrypoint is designed to build your project documentation, run your database migrations, execute tests, and start the application. All of this is very helpful when done during each build. However, what’s most important for me to explain to you is the set -e command.

set -e is used to make your script safer and more predictable by stopping execution as soon as something goes wrong. For example, if your tests fail, the app won't start, which is actually very helpful. It gives you a sense of what proper CI/CD should look like: your code shouldn’t be deployed to production if the tests are failing.

During development, you can comment it out to avoid interruptions, but once you're done, be sure to turn it back on.

🔧 Update the service hostnames in your .env file to match these: 👉 env.example

Note: The hostnames are the same as the service names defined in your Docker Compose file. This allows containers to communicate with each other via Docker’s internal networking, so you won’t need to manually update IP addresses every time.

Now run the following commands:

# Stop and remove containers, including orphans
docker-compose -f docker-compose.db.yaml -f docker-compose.api.yaml down --remove-orphans

# Build and start services
docker-compose -f docker-compose.db.yaml -f docker-compose.api.yaml up --build

And with that, we've come to the end of this tutorial.
In the next part of this series, we'll focus on deploying our app for a live demo.

💡 Enjoyed this article? Connect with me on:

💼 LinkedIn
🐙 GitHub.

Your support means a lot, if you’d like to buy me a coffee ☕️ to keep me fueled, feel free to check out this link. Your generosity would go a long way in helping me continue to create content like this.

Until next time, happy coding! 👨🏾‍💻🚀

Previously Written Articles:

🔥 FastAPI in Production: Build, Scale & Deploy – Series A: Codebase Design → Read here
🚀 Series-X: Create Professional Portfolios Using Material for MkDocs → Read here
How to Learn Effectively & Efficiently as a Professional in any Field 🧠⏱️🎯 → Read here

🚀 Create Professional Portfolios Using Material for MkDocs (Series-X)

Mr Chike — Mon, 21 Jul 2025 06:00:10 +0000

📌 See the source code on GitHub: Material for MkDocs Portfolio Template
🔥 Live Demo: Portfolio Site

This article teaches you how to create stunning, professional portfolios using Material for MkDocs, a fast, customizable, and open-source static site generator trusted by over 20,000 users to build responsive, searchable, and beautifully designed websites.

This is one of the most frustrating article I've ever written (Weird way to start an article, right?) 😜. It was truly a bittersweet experience.

Did I hear you say why? Glad you asked... Now let me lay it down for you.

✌️ Table of Contents

⚙️ Environment Setup (Optional)
📦 Project Scaffolding
🤬 Frustrations (Optional)
🚶‍♂️ Walk Through
🚀 Deployment (Github Actions Included)

⚙️ Environment Setup (Optional)

I always write my articles with beginners in mind because I was once one, too. If you're already experienced, feel free to skip this section. This guide assumes you're using Ubuntu Linux. The following commands will help you to set up a fresh server environment and serve as a reference point some time in the future because eventually, you’ll probably be needing it again.

💡 For other Linux distributions: Replace apt with your system's package manager like yum, pkg, apk and so on.

💡 For Windows users: You can install Windows Subsystem for Linux (WSL) with the command wsl --install in your terminal, access it with your favourite code editor and then run the commands below.

# Update package lists and upgrade existing packages
sudo apt -y update && sudo apt -y upgrade

# Install Docker, Docker Compose, and add current user to the docker group for non-root access
sudo apt -y install docker.io
sudo apt -y install docker-compose
sudo usermod -aG docker $USER

# Install useful dependencies
sudo apt -y install tree
sudo apt -y install vim

# Install Python 3.10 virtual environment package
sudo apt -y install python3.10-venv

# Install pip for Python 3
sudo apt -y install python3-pip

# Install OpenSSH server and enable/start the SSH service
sudo apt -y install openssh-server
sudo systemctl enable ssh
sudo systemctl start ssh

# Allow SSH through the firewall and enable UFW (Uncomplicated Firewall)
sudo ufw allow ssh
sudo ufw enable

# Generate a new RSA SSH key pair with no passphrase and a comment for identification
ssh-keygen -t rsa -f ~/.ssh/id_rsa -N "" -C "ssh-key"

# Reboot the system to apply changes
sudo shutdown -r now

Now that we're done with running the above commands and restarting the server so changes take full effect, we will be moving to the next section which will be...

📦 Project Scaffolding

In this section, we will setting up the project structure by creating and executing the setup.sh

# Create & make setup script executable
touch setup.sh && chmod +x setup.sh

# Excute setup script (populate script from github link provided)
./setup.sh

After successful execution, your project directory should look like this:

portfolio/
├── .github
├── .gitignore
├── Journal.md
├── docs
├── mkdocs.yml
├── requirements.txt
└── site

To activate your virtual environment and start the project, run the following commands:

# Activate virtual environment
source env/bin/activate

# Navigate into the project folder
cd portfolio

# Start the development serve
mkdocs serve

INFO    -  Building documentation...
INFO    -  Cleaning site directory
INFO    -  Documentation built in 0.31 seconds
INFO    -  [17:59:56] Watching paths for changes: 'docs', 'mkdocs.yml'
INFO    -  [17:59:56] Serving on http://127.0.0.1:8000/

If you happen to be running on a VM or an external server. You can use this instead, as it binds the IP to the host to make it accessible on your web browser.

mkdocs serve -a "$(hostname -I | awk '{print $1}'):8000"

Head to the project URL, and you should see the screen below in your browser, which means the portfolio template is now up and running! 🚀

📌 When the foundation is not solid, everything built upon it will crumble in due time.

The setup script that was run established a solid foundation. However, if you want to build on top of that, this reference page is crucial: https://squidfunk.github.io/mkdocs-material/customization/ because it’s what will take your portfolio from what you see above to what you'll see below 👇.

🤬 Frustrations (Optional)

This tutorial might look cute, but let me tell you, there was a whooooole lotta frustration trying to figure out where to put what, getting things to work, and why something that worked perfectly on local breaks in production. (That kind of mess)

It got so annoying that I ended up writing a script to scaffold the whole project from scratch because, just like a Microsoft Word CV, one tiny tweak can break the whole format, and suddenly you're spending hours trying to reformat stuff that shouldn't even be broken in the first place. And ohhhh! Don't even get me started on setting up Github Actions, that was the real rabbit hole 2.0. What I thought would take me just a few hours to figure out ended up taking a week.

🚶‍♂️ Walk Through

Wheeeew! Now that I’ve got that off my chest. Allow me, your one and only tour guide, MrChike, to take you on a cruise through the inner workings of this project.
Ready, Player One? 🎮

docs/: Your development environment (HTML, CSS & JavaScript)
- overrides/: Customise any part of the site to your taste

💡 Treat the markdowns(*.md) files like HTML: you can add HTML tags like div to it, and it would still work because it would be converted to index.html, as you will see under site/

docs/
├── articles.md
├── assets
│   ├── images
│   │   └── logo.svg
│   ├── javascripts
│   │   └── extra.js
│   └── stylesheets
│       └── extra.css
├── certifications.md
├── contributions.md
├── index.md
├── overrides
│   └── partials
│       └── logo.html
└── projects.md

sites/: Production environment

💡 This folder is intended for public access. You don't need to modify it manually as it's regenerated before each deployment. That's why it's included in .gitignore. This folder is what gets deployed to the gh-pages branch and displayed on your portfolio website.

site/
├── 404.html
├── articles
│   └── index.html
├── assets
│   ├── images
│   ├── javascripts
│   └── stylesheets
├── certifications
│   └── index.html
├── contributions
│   └── index.html
├── css
│   ├── base.css
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── brands.min.css
│   ├── fontawesome.min.css
│   ├── solid.min.css
│   └── v4-font-face.min.css
├── img
│   ├── favicon.ico
│   └── grid.png
├── index.html
├── js
│   ├── base.js
│   ├── bootstrap.bundle.min.js
│   ├── bootstrap.bundle.min.js.map
│   └── darkmode.js
├── overrides
│   └── partials
├── projects
│   └── index.html
├── search
│   ├── lunr.js
│   ├── main.js
│   ├── search_index.json
│   └── worker.js
├── sitemap.xml
├── sitemap.xml.gz
└── webfonts

deploy.yml: Github Actions Configuration file for automated deployment

.github/
└── workflows
    └── deploy.yml

Journal.md: A log of your experiences and insights while working on your projects. (Keeping a journal is a great habit to develop when working on projects.)
mkdocs.yml: Configuration file for MKDocs
requirements.txt: Lists your project dependencies. (It's good practice to include specific versions, as dependencies are frequently updated and changes may break your project in the future.)

.
├── Journal.md
├── mkdocs.yml
└── requirements.txt

Now you have a good grasp of the project structure, let's advance to deployment.

🚀 Deployment (Github Actions Included)

In this section, we will focus on both manual and automated deployment but first i will lay down the steps in order to follow.

📁 Create a GitHub Repository (if not existing already)
🔑 Generate SSH keys
🗝️ Add your SSH public key to GitHub
🧑‍💻 Manual Deployment using mkdocs gh-deploy
🔐 Create a Personal Access Token (PAT)
🤫 Add the PAT as a GitHub Secret
🤖 Automated Deployment using GitHub Actions

📁 Create a GitHub Repository

Take Home Assignment: Figure it out! 😉

🔑 Generate SSH keys

First, confirm if you have SSH keys available

ls -lh ~/.ssh/

-rw------- 1 mrchike mrchike 2.6K Jun 20 05:26 id_rsa
-rw-r--r-- 1 mrchike mrchike  572 Jun 20 05:26 id_rsa.pub
-rw------- 1 mrchike mrchike  978 Jun 20 05:28 known_hosts
-rw-r--r-- 1 mrchike mrchike  142 Jun 20 05:16 known_hosts.old

💡 The id_rsa.pub is your authentication public key to access external servers (in this case, GitHub).

⚠️ Note on SSH Keys:
If you try using a custom name for your SSH key (i.e something other than id_rsa.pub), GitHub may reject the connection during deployment. If you encounter this issue, a simple workaround is to generate a new key and overwrite the existing one using the command:

ssh-keygen

This will recreate id_rsa and id_rsa.pub, which are the default names GitHub expects unless otherwise configured.

You will need to register it on your GitHub account to have access to push/pull changes. So run the following command to print it out.

cat ~/.ssh/id_rsa.pub

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQDKiPnhAeI70ooWzt7yDgopgmgllifUBwvev1RKBq/UM1rQ/std0PHokt+qcGZlIAtFWUsGdOZi+FDLpOywsL1+XO4UlBVW4M/qQasoVnE/CdT77GxaZQ0btYlHm5FS4mKYRWtxSIxjq3b+qRWB6U4KFkfOG3iQAinLI+iD0olcAikCaA8mRKTg541+qDxY33oSE3a9svjP8keVmB9ALN6zdGoDuLa3gX9OCK8wIOzewYDFfr3wMHpT/oJ0sG5oPtBFMBDHJcdt46T+u3uZCbaRs/Hre7UbYXgXkcQWNZ8fpSj4JieebjP8MrHxkRVG5mmM5/wumaC342fmTBbiA4wJUhOErR7zX/SDlUN5NDAyBiq7vDhdkVrj3sTisXgGnboRhLbrOt0TzAo3QRxyXQTZe7rQPh+9D/DDLgGuVz0PB0YOvSDcbVpWwsZvWzE+oBJi9Xxp3bkJH79+6M/AUZ36D9qd1jzI8sTf1+LNj8nxdNtIWmDtpWeRIIbgBcfusvs= YOUR-SSH-KEY

Now, copy your SSH Key as you'll be needing it for the next step.

🗝️ Add your SSH public key to GitHub

You can register your SSH key in one of two ways:

User-wide access: https://github.com/settings/keys
Repo-specific access (Deploy Key): https://github.com/YOUR-USERNAME/REPO-NAME/settings/keys
- e.g https://github.com/MrChike/temp/settings/keys

💡 Your use case should determine your preference.

If you want to use the key across multiple repositories from the same machine, go with user-wide access.

If you only want to allow access to a single repository (i.e for CI/CD purposes), then use a repo-specific deploy key.

Once you've decided on your preference, add your SSH Key.

📌 For Repo-specific access (Deploy Key) make sure you tick Allow write access

Congrats! 🎉 It's time to see our first deployment in action.

🧑‍💻 Manual Deployment using `mkdocs gh-deploy`

First we will start by initializing git in our project forlder

git init

hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint:   git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint:   git branch -m <name>
Initialized empty Git repository in /path/to/project/portfolio/.git/

Then set your preferred default branch name. Feel free to name it whatever you want but in this tutorial i will be going with master.

git config --global init.defaultBranch master

Now that we've done that, let's connect to our remote repo, commit changes and push to the master branch. Also, note that all GitHub-related URLs should be yours, I only use this tutorial repo to serve as a guide.

# Connects your local repo to the remote GitHub repository via SSH
git remote add origin git@github.com:MrChike/mkdocs-portfolio.git

# Stages all changes and commits them with a message
git add . && git commit -m "Initial Commit"

# Pushes the 'master' branch to GitHub and sets it as the upstream branch
git push --set-upstream origin master

[master (root-commit) 516f9ae] Initial Commit
 14 files changed, 159 insertions(+)
 create mode 100644 .github/workflows/deploy.yml
 create mode 100644 .gitignore
 create mode 100644 Journal.md
 create mode 100644 docs/articles.md
 create mode 100644 docs/assets/images/logo.svg
 create mode 100644 docs/assets/javascripts/extra.js
 create mode 100644 docs/assets/stylesheets/extra.css
 create mode 100644 docs/certifications.md
 create mode 100644 docs/contributions.md
 create mode 100644 docs/index.md
 create mode 100644 docs/overrides/partials/logo.html
 create mode 100644 docs/projects.md
 create mode 100644 mkdocs.yml
 create mode 100644 requirements.txt

Enumerating objects: 24, done.
Counting objects: 100% (24/24), done.
Delta compression using up to 12 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (24/24), 3.23 KiB | 826.00 KiB/s, done.
Total 24 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:MrChike/temp.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

Now that we've pushed, let's deploy our site by running the command:

mkdocs gh-deploy --force

INFO    -  Cleaning site directory
INFO    -  Building documentation to directory: /path/to/portfolio/site
INFO    -  Documentation built in 0.39 seconds
WARNING -  Version check skipped: No version specified in previous deployment.
INFO    -  Copying '/path/to/portfolio/site' to 'gh-pages' branch and pushing to GitHub.
Enumerating objects: 72, done.
Counting objects: 100% (72/72), done.
Delta compression using up to 12 threads
Compressing objects: 100% (63/63), done.
Writing objects: 100% (72/72), 579.32 KiB | 1.66 MiB/s, done.
Total 72 (delta 8), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (8/8), done.
remote: 
remote: Create a pull request for 'gh-pages' on GitHub by visiting:
remote:      https://github.com/MrChike/mkdocs-portfolio/pull/new/gh-pages
remote: 
To github.com:MrChike/mkdocs-portfolio.git
 * [new branch]      gh-pages -> gh-pages
INFO    -  Your documentation should shortly be available at: https://MrChike.github.io/mkdocs-portfolio/

Now, the portfolio site should be hosted on the link provided. In this case https://MrChike.github.io/mkdocs-portfolio/

If you have yours set up and working, a huge congratulations!

At this point, you might be wondering: if I can manually deploy my site from my local machine, why bother automating it?
Honestly, I don’t even know why I decided to take it a step further. But this is when I finally understood what Nagato meant when he said to Naruto: "And now... You shall know pain." 😵‍💫

🔐 Create a Personal Access Token (PAT)

Head to your Github account and create your personal access token at https://github.com/settings/personal-access-tokens

Fill in the details as needed. Under Repository access, select your preference (either all repos or just specific ones).
Most importantly, under Permissions, you’ll see two sections: Repository permissions and Account permissions. Go ahead and give everything under both sections read/write access.

Once that’s done, scroll down and hit Generate token.
it's important that you copy this token and save somewhere because once you leave that page the only way to use it if forgotten is to regenerate it.

📌 NB: It took me a while to figure this one out because without it, you’ll keep running into errors when deploying with GitHub Actions. At some point, I was really losing patience, so I just gave everything under both permission sections read/write access. When you have time, feel free to go back and untick anything you don’t actually need.

🤫 Add the PAT as a GitHub Secret

Head to your repo → Settings → Secrets and variables → Actions, and create a new repository secret for your token.

Populate the following fields:

Name: ACCESS_TOKEN
Secret: Paste the personal access token you just generated and copied Then click Save.

This gives GitHub Actions access for automated deployments

🤖 Automated Deployment using GitHub Actions

To wrap things up, we'll automate deployment to run daily at 12:00 AM, ensuring any updates to your portfolio are always live.

But first, let’s give credit where it’s due.
A huge shoutout to peaceiris for simplifying what could have been a tedious process. Check out the repo when you have time, it's worth it!

Now, update your deploy.yml file with the following configuration.

📝 The inline comments explain each section, but here are a few key points to emphasize:

branches:
Update this to match the branch you're deploying from (master, main, or multiple branches if needed). The workflow will only trigger on changes to the specified branch(es).
personal_token:
Do not change this key name. It must be exactly personal_token, that’s what the GitHub Action expects.
However, the repository secret name (i.e ACCESS_TOKEN) can be whatever you like, just make sure the name you use in Secrets and variables → Actions matches what you reference in the workflow.

commit and push your changes to the repo

You can monitor your deployment runs under the Actions tab in your GitHub repo. Each run will show success/failure logs and scheduling history as displayed in the screenshot below..

And that's all folks. It's been an interest ride so far and if you have any blockers I'm open to mentor and assist.

Would you like a deeper dive on this topic? 👉 Cast your vote

💡 Enjoyed this article? Connect with me on:

💼 LinkedIn
🐙 GitHub.

Until next time, happy coding! 👨🏾‍💻🚀

Previously Written Articles:

🔥 FastAPI in Production: Build, Scale & Deploy – Series A: Codebase Design → Read here
How to Learn Effectively & Efficiently as a Professional in any Field 🧠⏱️🎯 → Read here

🔥 FastAPI in Production: Build, Scale & Deploy – Series A: Codebase Design

Mr Chike — Mon, 02 Jun 2025 00:05:33 +0000

Welcome to Part 1 of the 3-part FastAPI Series 📦 - View Full Code on GitHub

We are building a scalable, production-ready FastAPI codebase from the ground up. Along the way, we'll cover project structure, environment setup, dependency injection, and async I/O-bound API calls.

Whether you're working on monoliths, microservices, or event-driven systems, this guide is about laying a clean, modular, and solid foundation, one that’s been tested in real-world environments, not just spun up for a quick demo.

🧠 A Bit of Background
🎯 What to Expect
🗂️ Project Structure Overview
🏗️ Project Initialization
🔄 Request Lifecycle
🧪 Testing the Gears
🏁 Conclusion

🧠 A Bit of Background

Like many developers, I started with Python. I was eager to learn (still am), and dove into every tutorial I could find. It didn’t take long before I hit Tut🔥rial Hell, you know that endless loop where every new video feels like I've finally found the ch🙌sen one. Spoiler alert: it never was...

But that hell did prepare me well enough to land an internship. And to my surprise, I realized I was actually light years ahead of my peers.

That internship was a deep dive into the real world: a full-scale, SaaS, enterprise-grade KPI management system built with Django, serving over 100K users (with more being onboarded regularly). It was the first time I saw Python used at scale in a production environment and it completely changed how I thought about architecture and design.

Since then, I’ve worked on Python applications across different industries, helping teams scale their systems (and occasionally refactoring parts of legacy code).

Eventually, I started hearing about the latest kid on the block: FastAPI, the "speedster" of the Python ecosystem. I checked it out, watched a bunch of tutorials... and quickly noticed a pattern: a lot of them were just theory. Surface-level. Book-knowledge.

This series is my attempt to share what I’ve learned over the years about Python’s real capabilities in production.

🎯 What to Expect

This series is practical. It’s grounded in real-world experience and designed with ❤️ by yours truly, the host of this series, Mr. Chike👨🏾‍💻 to show you how to build systems that are modular, maintainable, and scalable from day one.

So enough talk.

Let’s get to work. 💥

🗂️ Project Structure Overview

media_app/

base/                                  # Feature module
├── __init__.py                        # Python package initialization
├── router.py                          # Defines HTTP API endpoints and maps them to controller functions
├── controller.py                      # Handles request-response cycle; delegates business logic to services
├── service.py                         # Core business logic for async I/O operations
├── model.py                           # SQLAlchemy ORM models representing database tables
├── schema.py                          # Pydantic models for input validation and output serialization
├── dependencies.py                    # Module-specific DI components like authentication and DB sessions
├── tasks.py                           # Core business logic for CPU-bound operations

├── movies/                            # Movie feature module

├── tv_series/                         # TV series feature module

├── static/                            # (Optional) Static files (e.g., images, CSS)

├── templates/                         # (Optional) Jinja2 or HTML templates for frontend rendering

├── docs/                              # (Optional) API documentation, design specs, or OpenAPI enhancements

├── shared/                            # Project-wide shared codebase
│   ├── __init__.py
│   ├── config/                        # Environment configuration setup
│   │   ├── __init__.py
│   │   └── settings.py                # Pydantic-based config management
│   ├── dependencies/                  # Shared DI functions (e.g., auth, DB session)
│   ├── middleware/                    # Global middlewares (e.g., logging, error handling)
│   ├── services/                      # Reusable services
│   │   ├── __init__.py
│   │   ├── external_apis/             # Third-party integrations (e.g., TMDB, IMDB)
│   │   └── internal_operations/       # CPU-intensive logic, background tasks
│   └── utils/                         # Generic helpers (e.g., slugify, formatters)

├── scripts/                           # Developer or DevOps utilities
│   ├── __init__.py
│   └── sanity_check.py                # A friendly reminder not to lose your mind while debugging

├── tests/                             # # Unit, Integration, System, and End-to-End (E2E) tests for app modules
│   ├── __init__.py

├── .example.env                       # Template for environment variables (e.g., DB_URL, API_KEY)
├── .coveragerc                        # Code coverage settings
├── .gitignore                         # Files and folders ignored by Git
├── main.py                            # FastAPI application entrypoint
├── pytest.ini                         # Pytest configuration
├── requirements.txt                   # Python dependency list
├── JOURNAL.md                         # Development log: issues faced, solutions, and resources
└── README.md                          # Project overview, setup, and usage

🏗️ Project Initialization

We’ll start by setting up the project folder and running an initialization script to scaffold the directories and files we’ll use throughout the article.

You can find the full setup.sh script in the GitHub repository.

# Create the main project folder and initialize Git
mkdir media_app && cd media_app && git init

# Add and make the setup script executable
touch setup.sh && chmod +x setup.sh

# Update 'setup.sh' with your GitHub repository link, then run the setup script to scaffold the project
./setup.sh

# Activate your Python virtual environment (if applicable)
source env/bin/activate

Now update main.py with the content from this file, then start the project by running:

uvicorn main:app --reload --port 8000

This will launch the app with live reload enabled on port 8000. (Feel free to change the port to whatever your majesty desires.)

Now we create the module we want to work on from base

$ cp -r base movies

I know firsthand how frustrating it can be to read a technical article. it's almost like the developer assumes you're inside their head and completely understand all the complexities.

That's exactly why I'm taking my time to explain things clearly and step by step.

Now, let’s move on to the next phase...

🔄 Request Lifecycle

The router receives an HTTP request from the user and forwards it to a controller.
The controller validates the request data often using schemas for input validation and output serialization, then calls the appropriate service or tasks function.
The service handles the core business logic for async I/O operations, such as CRUD operations on the database (using model.py) or interactions with external APIs.
When needed, the service also uses components from dependencies.py, such as authentication or database session injection, to get the job done.
For CPU-bound or long-running operations, the service delegates the work to tasks.py. These tasks are executed asynchronously using Celery, with a broker like Redis or RabbitMQ, to keep the user experience smooth. (Covered in Part 2 of this series)

😒 No one loves waiting, so the heavy lifting is done in the background while the user gets a quick response and moves on with their day.

Once processing is complete, the service returns the result to the controller, which formats the response using schemas, and sends it back through the router to the client.

Now that we understand the overall process, let’s break down what it actually looks like in motion.

When a user hits the movie endpoint, here’s what's going on in the background:

App Entry (main.py):
The FastAPI app initializes and mounts the movie_router under /movies on Line 13. This means all movie-related routes start with /movies.

Configuration Layer (shared/config/settings.py):
This layer manages the application's settings and environment variables using Pydantic for validation and dotenv for loading configuration from a .env file. The AppSettings class defines various configuration fields such as database credentials and others.

Router Layer (movies/router.py):
The router defines specific HTTP routes and forwards incoming requests to the controller. For example, a POST request to /movies/omdb/ hits the router’s get_movie method on Line 11.

Controller Layer (movies/controller.py):
The controller acts as a middleman by receiving the validated request data, calls the service layer to handle business logic, and formats the response to send back to the client as seen from Line 10.

Schema Layer (movies/schemas.py):
This layer defines the data structure and validation rules using Pydantic models. For incoming requests, MovieSchema ensures required and optional fields (like title, actors, and year) are properly validated. For responses, MovieResponseSchema extends MovieSchema to allow automatic population from ORM models, as seen from Line 10 of the controller.

Service Layer (movies/service.py):
This layer constructs the external API URL and delegates the task of fetching data to the external API service. It handles errors gracefully, logging issues for developers and returning user-friendly messages if something goes wrong as seen from Line 19.

External API Call (shared/services/external_apis/omdb_movies.py):
The actual HTTP request to the OMDB API is made here using httpx. This function focuses on making reliable API calls and raising exceptions on errors, which the service layer catches as seen from Line 6.

Once the response is received from the external service, it’s returned back through the chain:

→ from fetch_movie_omdb to
→ get_movie_details (service) to
→ the controller, and finally
→ back to the client via the router.

NB: Don't forget to register for your movie api key @ https://www.omdbapi.com/apikey.aspx and update you .env file...

Then run the following commands:

# Refresh environment variables to reflect update
source .env

# Start app with live reloading on specified port
uvicorn main:app --reload --port 8000

This layered, modular design ensures each part has a clear responsibility, making the codebase easier to maintain, test, and scale.

Now speaking of testing… I just hope the length of this article isn’t unit-testing your patience. 🧪🤯

🧪 Testing the Gears

In this section, we’ll be blending three powerful tools:

pytest to configure and run tests across the entire module,
unittest to drill down into individual units, and
coverage to generate reports on what’s been tested and what hasn’t.

This hybrid approach ensures both broad and deep testing of the system while keeping things modular, clear, and production-ready.

We'll start by configuring pytest.ini alongside coverage so it can automatically detect test files and report on which parts of the codebase are covered.

Next, we’ll configure .coveragerc to omit files that don’t need to be tested like (e.g, __init.py, model.py) and other boilerplate or non-critical modules, so the reports remain clean, focused and provide meaningful insights.

Now that we’ve done that, we can test if the configuration is properly set up by running the command:

$ pytest

(env) mrchike@practice:~/code/contributions/education/media_app$ pytest
==================================================== test session starts ====================================================
platform linux -- Python 3.10.12, pytest-8.3.5, pluggy-1.6.0
rootdir: /home/mrchike/code/contributions/education/media_app
configfile: pytest.ini
testpaths: tests/
plugins: anyio-4.9.0, cov-6.1.1
collected 0 items                                                                                                           
/home/mrchike/code/contributions/education/media_app/env/lib/python3.10/site-packages/coverage/control.py:915: CoverageWarning: No data was collected. (no-data-collected)
  self._warn("No data was collected.", slug="no-data-collected")

====================================================== tests coverage =======================================================
_____________________________________ coverage: platform linux, python 3.10.12-final-0 ______________________________________

Name                   Stmts   Miss  Cover   Missing
----------------------------------------------------
movies/controller.py      10     10     0%   1-13
movies/service.py         19     19     0%   1-32
movies/tasks.py            0      0   100%
----------------------------------------------------
TOTAL                     29     29     0%
=================================================== no tests ran in 0.16s ===================================================

And just like that we have this beautiful display of Missing tests you've not attended to leading us to the next step ...

Unit testing

Now that we know which files and lines of code require testing based on the coverage report, we will proceed with writing tests for controller.py and service.py in the corresponding movies module under the tests folder.

Run the command once more:

$ pytest

(env) mrchike@practice:~/code/contributions/education/media_app$ pytest
================================ test session starts =================================
platform linux -- Python 3.10.12, pytest-8.3.5, pluggy-1.6.0
rootdir: /home/mrchike/code/contributions/education/media_app
configfile: pytest.ini
testpaths: tests/
plugins: anyio-4.9.0, cov-6.1.1
collected 2 items                                                                    

tests/movies/test_controller.py ..                                             [100%]

=================================== tests coverage ===================================
__________________ coverage: platform linux, python 3.10.12-final-0 __________________

Name                   Stmts   Miss  Cover   Missing
----------------------------------------------------
movies/controller.py      10      0   100%
movies/service.py         19     10    47%   20-32
movies/tasks.py            0      0   100%
----------------------------------------------------
TOTAL                     29     10    66%
================================= 2 passed in 2.35s ==================================


(env) mrchike@practice:~/code/contributions/education/media_app$ pytest
========================================================= test session starts ==========================================================
platform linux -- Python 3.10.12, pytest-8.3.5, pluggy-1.6.0
rootdir: /home/mrchike/code/contributions/education/media_app
configfile: pytest.ini
testpaths: tests/
plugins: anyio-4.9.0, cov-6.1.1
collected 4 items                                                                                                                      

tests/movies/test_controller.py ..                                                                                               [ 50%]
tests/movies/test_service.py ..                                                                                                  [100%]

============================================================ tests coverage ============================================================
___________________________________________ coverage: platform linux, python 3.10.12-final-0 ___________________________________________

Name                   Stmts   Miss  Cover   Missing
----------------------------------------------------
movies/controller.py      10      0   100%
movies/service.py         19      0   100%   
movies/tasks.py            0      0   100%
----------------------------------------------------
TOTAL                     29      0   100%
========================================================== 4 passed in 2.42s ===========================================================

🏁 Conclusion

In this first part of the series, we've laid the groundwork for building a scalable, production-ready FastAPI application. We covered essential concepts like project structure, modularity, and the flow of requests through various layers of the app. Most importantly, we set up testing strategies to ensure our code is robust and maintainable.

Quick Recap:

Project Structure: We’ve created a clean, scalable folder structure that’s ready for real-world growth.
Request Flow: We broke down how requests travel through the router, controller, and service layers, ensuring clear responsibility separation.
Testing: We integrated pytest, unittest, and coverage, and wrote tests to make sure the code performs as expected.

With this solid foundation, we’re well-equipped to scale up the app and handle more advanced features in Part 2, such as background tasks for CPU-bound operations. So, stay tuned for that!

💡 Enjoyed this article? Connect with me on:

💼 LinkedIn
🐙 GitHub.

Your support means a lot, if you’d like to buy me a coffee ☕️ to keep me fueled, feel free to check out this link. Your generosity would go a long way in helping me continue to create content like this.

Until next time, happy coding! 👨🏾‍💻🚀

Previously Written Articles:

How to Learn Effectively & Efficiently as a Professional in any Field 🧠⏱️🎯 [Read here]
Build, Innovate & Collaborate: Setting Up TensorFlow for Open-Source Contribution! 🚀✨ [Read here]
Building a Secure, Scalable Learning Platform with RBAC Features 🎓🔒📚 [Read here]
Setting Up MKDocs for Your Django Project: A Quick Guide! [Read here]
How to Deploy React Portfolio | Project with GitHub Pages as of 2024 [Read here]

Resources:

Mastering the Art of Learning: A Professional’s Guide

Mr Chike — Sun, 20 Apr 2025 14:07:26 +0000

Mr Chike

Apr 18 '25

🧠 Master the Art of Learning Efficiently (A Memo for Lifelong Learners). ⏱️🎯

#learning #productivity #agile

Comments 2

7 min read

🧠 Master the Art of Learning Efficiently (A Memo for Lifelong Learners). ⏱️🎯

Mr Chike — Fri, 18 Apr 2025 12:07:11 +0000

This is one topic I’ve been researching and experimenting with for the past five years, ever since I became a software engineer. Although i’m someone who loves to take my time to learn and understand deeply. But unfortunately, my field has taught me some harsh truths I had to learn the hard way through trial and error which almost made me loose it.

Business is all about making profit, and management wants solutions as soon as yesterday and they will micromanage and frustrate the soul right out your body if you don’t deliver.
Information and technology evolves at a rapid pace, and your ability to grasp new concepts quickly and execute ASAP to make an impact is a critical skill if you ever plan to survive in a highly competitive industry.
The way you were taught to learn in school just doesn’t cut it in this fast-paced, cutthroat and highly competitive job market you’ve found yourself in.

I’ll be diving into the types of learning and techniques that will help you learn effectively and efficiently. First, let’s talk about the learning process taught in schools and why they’re in the wrong order.

Traditional Learning
Learning by Doing
Learning by Priority

🏫🗂️🕰️ Traditional Learning

This is the classic "sit in a classroom, follow a Course Outline | Syllabus or Roadmap for 4-6 years" situation. Hopefully, it’s not 10 years in your country! While this approach works well for learning core concepts and fundamentals deeply, it’s pretty ineffective in the real world. Why? Because your brain is designed to filter out what’s not important, which means you’re definitely going to forget everything you learned in Year 1 once you hit Year 2. Lol, and let’s not even talk about what happens by your final year. Let’s face it: your brain has more pressing things to focus on, like BILLS 😭 and life issues.

👷‍♀️🧪💥 Learning by Doing
Yipee! You’ve just graduated with your certificate, feeling like you can conquer every obstacle in your path until life hits you with the Sh🔥ryuken!

Recruiters asking for 7 years of experience for an entry-level role 😭😭
Endless applications with a whole lot of “Unfortunatelies” (Awwwn! You thought one or two applications would do the trick? Psyche! 🤪).

But finally, after what feels like forever, you land a job (Hopefully your boss ain’t the Wicked Witch of Beverly Hill). Now the real learning begins, the good ol’ learning by doing, aka on-the-job learning. This is where someone more experienced steps in to guide you. They point out your mistakes, you take notes, and you gradually start to level up.

Which brings us to the next learning process…

🚨🥵🎯 Learning by Priority

This is the part where it hits you: Uhhhm! I really don’t know as much as I think I did. So, you reflect on the notes you’ve taken, do some research, and start filling in the gaps.
After doing this over and over again, somewhere between 1 to 3 years in, you suddenly become the go-to guy or gal for the job.

🧠💡 But actually… the right order of learning looks a little different.

We always think it starts with traditional learning, but in reality, it goes more like this:

Learning by Doing – You dive in headfirst, make mistakes, and learn on the fly.
Learning by Priority – You realize what you don’t know and start bridging knowledge gaps.
Traditional Learning – Now you take the time to go deeper and truly understand the why behind what you’ve been doing.

So just to give you an example to solidify what I’m saying…

Let’s say you are studying for an exam and you have 3 hours of free time each day. Here’s how you should apply this learning order:

Learning by Doing – 1hr:30mins: You would start with practice questions, simulate exam conditions, and grade yourself. This reveals the gaps in your knowledge.
Learning by Priority – 1hr: Then, you would go back to your study materials and read specifically on the topics where you struggled.
Traditional Learning – 30mins: Finally, you would take your time going through the material chapter by chapter, to gain deeper understanding.

🎯 The fun part is? This system scales to any goal you want to achieve, not just exams.

For example, imagine you just stepped into your first leadership role (like ever, like ever ever):

You jump in and figure things out as you go (Learning by Doing). Over time, you spot your weaknesses and take note. Then, you look for books or resources that address those specific challenges (Learning by Priority) and just as important as any, you carve out time (30 minutes a day) to read those leadership books chapter by chapter for in-depth understanding and long-term growth (Traditional Learning). 😉

Now, what this does is it frees you from the mindset of "I have to know it all or be perfect before I can make an impact" which in itself, is a trap.

You know… like the classic “I need to wait 365 days to make a decision because it’s the end of the year and I’m all hyped up” move. → New Year, New Me 🤦‍♂️

🎉 Drum roll, please...
🥁 And the Best Procrastinator Award goes to... Y🤡U!

Sooooo… on to the next section: studying techniques, which I’ll be listing in this order:

Todo List → Eisenhower Matrix → Paretho Principle → Eat That Frog → Pomodoro → Delibrate Practice → Feyman Technique → Spaced Repetition → The Feedback Loop

Todo List - All tasks must relocate from your head to paper (H1-B Style) as you can’t always trust your brain to remember everything
Eisenhower Matrix
- Urgent & Important = Prioritize
- Not Urgent but important = Schedule
- Urgent but not important = Delegate
- Not urgent or important = Eliminate
Pareto Principle - The 80/20 Rule! - 80% of results come from 20% of the efforts.
Eat That Frog – Tackle the most important (and often dreadful) task first, while your energy is at its peak.
Pomodoro Technique – Work in focused sessions while eliminating distractions, and take breaks when you're done to cool off.
Deliberate Practice – “I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.” — Bruce Lee
Feyman Technique - if you can’t teach it to 5-year-old, then you probably don't understand it as well as you think you do.
Spaced Repetition - The more you try to recall something from memory at spaced intervals, the more it sticks for good. (Anki, Notion, and others are great tools for this!)
The Feedback Loop – This isn’t really a study technique, but more of a system of testing what works and what doesn’t, so you keep twerking, sorry tweaking things until you figure out what works best for you. Although there is one technique I could have added to the list, but I’ve been able to do without it and still make an impact. That would be Mind Mapping. If you’re a die-hard fan of this technique, feel free to add it to the list. The more, the merrier!

Now, to bring it to life with an example by putting it all together… Let’s say you have an exam in the next 3 months and have only 3 hours to spare daily. This is how you should go about it. But First! I’ll leave you with a quote from The 7 Habits of Highly Effective People:

"If I had seven days to cut down a forest, I’d spend most of it sharpening my tools."

Simply put, the time spent preparing isn’t time wasted, but time well invested. #preach!

🧠 Study Game Plan (3 Hours Daily for 3 Months)

Preparation
- Research & gather study materials that best fit your learning style (books, audio, video… whatever works for you).
- List all study materials on a to-do list.
- Filter out what’s not needed and prioritize what’s essential using the Eisenhower Matrix.
Learning by Doing – 1hr 30mins
- Practice with past questions or a study bank under exam time constraints.
- Grade yourself.
  
  After a few sessions, you’ll notice certain topics keep popping up, this is called pattern recognition. It reveals the topics that are most likely to appear in the exam. Yep!, that’s the Pareto Principle in action.
  
  Jot down these recurring topics, these are your knowledge gaps and your research guide.
Learning by Priority – 1hr
- Now that you’ve identified your high-priority topics, start with the hardest one when your energy is at its peak (well-rested, well-fed & hydrated) → Eat That Frog.
- Use focused study-play sessions with zero distractions → Pomodoro Technique.
  
  For example:
  - 30 mins focus / 5 mins break
  - OR 1 hr focus / 10 mins break
  NB: Your break can be anything you genuinely enjoy.
  
  For me? Some mad afrobeats🔥music, watching comedy skits on TikTok, or a quick match in Call of Duty Mobile.
  
  PS: I’m the best sniper alive, you won’t even see it coming. you just gonna black out 🎯💀
  
  So, figure out what works for you, and stick to it.
- Be intentional with what you’re studying, focus on what you want to understand, not just skim. → Deliberate Practice.
  
  Pro Tip: Spar with 🥷 GPT Sensei. Ask questions. Explain answers. Challenge your understanding. You’ll retain more that way.
- Think you finally understand Quantum Computing? Cool. Now… explain it to a 5-year-old without sounding like an evil Harvard scientist. → Feynman Technique
  Yup! you’re about to find out you might not know it as well as you thought. Simplifying complex concepts enforces deep understanding.
- Once you’ve understood the concept, create a Q&A model using tools like Notion or Anki and start testing yourself over time → Spaced Repetition.
Traditional Learning - 30mins

Now this is where you take your time and walk through each chapter | section | module to gain a deeper understanding of the material. No rush!

So why do you need this?

Well… sometimes, the examiner doesn’t pull questions from the past, they pull 'em from the future! - Uhhh! Ahhh! 😱

That’s when you realize surface-level knowledge won’t cut it. You need true, in-depth understanding to solve complex problems.

Closing Remark: Traditional learning had us believing we need to know it all before we do anything significant.

Real life taught me otherwise:

→ Learn by doing - Get those squeaky-clean hands dirty.

→ Always focus on current priority - Of 99 things you can be doing, there's only 1 that needs laser focus

→ Deepen your Knowledge - Mastery demands depth, and it takes time (that's why traditional learning is best done along side while executing current priority). But depth lets you spot hidden patterns, connect the dots, and give life to new ideas.

Now, combine that mindset with tools like Pomodoro, Eisenhower Matrix, Spaced Repetition, and others as i've listed...

You’re not just learning, you’re evolving.

If you found this article helpful, feel free to connect with me → LinkedIn.

Until we meet again Tudulus Wishes! 🤪

Building a Secure, Scalable Learning Platform with RBAC Features 🎓🔒📚

Mr Chike — Tue, 19 Nov 2024 11:15:02 +0000

Before we go all technical and start with 1's and 0's my dear geek!.
Here's a sneak peak of what we are going to be working with.

Yup!... It's an LMS system, like one of those you don't really see much on the internet as it takes a rich and full approach from course registration to payment with the original course on Youtube.

This is where I step in and crank it up a notch like every hired mercenary in tech. So what inspired me to do this? After a thorough search on the internet i realised one thing. You couldn't see this application hosted anywhere and me spidey senses started tingling. I knew this would be a good challenge to make available to the public. So i grabbed my laptop, coffee and the rest was history...

So what would you be learning here, how to set up & contribute to this ongoing project. I will be working you through the important parts of the application for easy set-up. So now let's get technical...

Below are the steps we will be taking to get you up and running.
🥷 Fork & clone LMS repo
⚙️ Setup & Migrate Prisma Schema
🥷 Fork & clone LMS API repo
📚 Start creating courses

🥷 Fork & clone LMS repo.

Head to the lms repo and do the needful. You would want to also click on watch as more features are being introduced.

Copy link and clone the repo to your local.

$ mkdir lms_project && cd lms_project
$ git clone git@github.com:MrChike/LMS.git
Cloning into 'LMS'...
remote: Enumerating objects: 1530, done.
remote: Counting objects: 100% (1185/1185), done.
remote: Compressing objects: 100% (602/602), done.
remote: Total 1530 (delta 546), reused 1025 (delta 482), pack-reused 345 (from 1)
Receiving objects: 100% (1530/1530), 53.13 MiB | 6.74 MiB/s, done.
Resolving deltas: 100% (588/588), done.

$ git clone https://github.com/MrChike/LMS-API
Cloning into 'LMS-API'...
remote: Enumerating objects: 131, done.
remote: Counting objects: 100% (131/131), done.
remote: Compressing objects: 100% (85/85), done.
remote: Total 131 (delta 75), reused 100 (delta 44), pack-reused 0 (from 0)
Receiving objects: 100% (131/131), 31.87 KiB | 238.00 KiB/s, done.
Resolving deltas: 100% (75/75), done.

Your frontend root folder should look like this and if you notice we will be starting with the .env.sample file as this is important to run the application

Rename the .env.sample file to .env and populate with the necessary credentials. NB: The link to the external services to populate below are located at the end of this article.

NEXT_PUBLIC_APP_URL=http://127.0.0.1:3000
NEXT_PUBLIC_TEACHER_ID=
NEXT_PUBLIC_BACKEND_API_URL=http://127.0.0.1:8000

# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
DATABASE_URL=protocol://username:password@host:port/database
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
MUX_TOKEN_ID=
MUX_TOKEN_SECRET=
STRIPE_WEBHOOK_SECRET=
STRIPE_API_KEY=

⚙️ Setup & Migrate Prisma Schema

After you're done. run the following prisma commands

$ npx prisma generate
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma

✔ Generated Prisma Client (v5.3.0) to ./node_modules/@prisma/client in 519ms

Start using Prisma Client in Node.js (See: https://pris.ly/d/client)

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

or start using Prisma Client at the edge (See: https://pris.ly/d/accelerate)

import { PrismaClient } from '@prisma/client/edge'


See other ways of importing Prisma Client: http://pris.ly/d/importing-client

$ npx prisma db push
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "lms", schema "public" at "192.168.86.133:5432"

🚀  Your database is now in sync with your Prisma schema. Done in 449ms

✔ Generated Prisma Client (v5.3.0) to ./node_modules/@prisma/client in 574ms

┌─────────────────────────────────────────────────────────┐
│  Update available 5.3.0 -> 5.22.0                       │
│  Run the following to update                            │
│    npm i --save-dev prisma@latest                       │
│    npm i @prisma/client@latest                          │
└─────────────────────────────────────────────────────────┘
$ npm install
(#########⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠧ reify:@img/sharp-darwin-arm64: timing reifyNode:node_m

$ node scripts/seed.ts #create course categories
Success

I prefer to see what i'm working with so i'm using pgadmin to monitor my postgres DB. You can use your prefered tool.

Or you can run npx prisma studio command to monitor your database table.

$ npx prisma studio
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Prisma Studio is up on http://localhost:5555

Now that we have our prisma schema all set up. Let's set up the backend.

🥷 Fork & clone LMS API repo

Clone and navigate to the api folder as seen below

Rename the .env.sample file to .env and populate with the database credentials. For the SECRET_KEY you can populate that with Djecrety

SECRET_KEY=
DATABASE_NAME=
DATABASE_USER=
DATABASE_PASSWORD=
DATABASE_HOST=
DATABASE_PORT=
CORS_ALLOWED_ORIGINS=http://localhost:3000
CORS_ALLOW_HEADERS=content-type,Authorization,X-Requested-With,X-CSRFToken
CORS_ALLOW_METHODS=*default_methods
CORS_ORIGIN_WHITELIST=http://localhost:3000

Run the commands

$ python3 -m venv env
$ source env/bin/activate
$ pip install -r requirements.txt
$ python3 manage.py migrate
Operations to perform:
  Apply all migrations: account, admin, auth, contenttypes, sessions
Running migrations:
  Applying account.0001_initial... OK
  Applying account.0002_alter_profile_table... OK
  Applying account.0003_alter_attachment_table_alter_category_table_and_more... OK
  Applying contenttypes.0001_initial... OK

$ python3 manage.py createsuperuser #populate with your own credentials
Email: mrchike@mailinator.com
User id: mrchike
First name: chike
Last name: egonu
Password: 
Password (again): 
Superuser created successfully.

$ python3 manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
November 18, 2024 - 22:29:22
Django version 5.1.3, using settings 'lms_api.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

confirm that user has been created in prisma studio or your preferred database app.

Now that you have created a user and the backend is up and running, we will be moving on to the next step.

vim lms_project/LMS/app/(dashboard)/(routes)/(root)/page.tsx

... #Update email and password to your created user. I know it's not best practice so i'm working 😜n it. 
export const fetchUserData = async (email="yours@email.com", password="yours@password") => {
  try {
    const response = await api.post('/account/token/', {
      email,
      password,
    });
    console.log('app/(dashboard)/(routes)/(root)/page.tsx', response.data.userId)
    return response.data;
  } catch (error) {
    console.error('Error fetching user data:', error); // Log error if any
  }
};

Update the NEXT_PUBLIC_TEACHER_ID environment variable with your newly created userId (in my case mrchike) and run the command npm run dev or npm run build

$ npm run dev
> lms-tutorial@0.1.0 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- info Loaded env from /home/mrchike/code/features/education/LMS/.env
- event compiled client and server successfully in 3.4s (20 modules)
- wait compiling...
- event compiled client and server successfully in 1335 ms (20 modules)
- wait compiling /middleware (client and server)...
- event compiled successfully in 2.2s (45 modules)
- wait compiling /(dashboard)/(routes)/(root)/page (client and server)...

After compilation you will be able to access the page and you can...

📚 Start creating courses

As it stands you've been able to successfully setup the project on your local. I would more than happy to collaborate with you as there's a whole lot of features to be implemented in the pipeline. Hopefully, they wet your appetite...

Include extra Video Streaming Option for YouTube & Vimeo
Implement Docker Support for easy support dealing with dependency issues on different OS
Include Localization Support for students in multiple countries
Include extra upload platforms like S3
Live Classroom Collaboration Between students for Brainstorming, Debates and presentations.
Advanced Logging System with Grafana
Create a Course Rating System

A preview of the ongoing project can be found here: https://next13-lms-platform-eight.vercel.app/search
Looking forward to working with Ya! 🥹

Resources:

Build, Innovate & Collaborate: Setting Up TensorFlow for Open Source Contribution! 🚀✨

Mr Chike — Mon, 04 Nov 2024 04:30:13 +0000

I'm delighted to share with you the process you would take to setup tensorflow on your machine for open source contribution.
This usually takes days to setup and you don't really get a hand held article on the internet for this.

Soooooo! i've gone out of my way to make this step easy for the beginner who wants to get their hands dirty. Like i'm so exhausted right now 🥴, it's going to be a long one so just grab your coke and popcorn.

In this case i would be using ubuntu 22.04 but the process would be similar on any machine since we would be making most changes in docker.

🥷 Fork & clone tensorflow repo.
⚙️ Setup Development environment for contribution.
🫸 Push and create pull request.

🥷 Fork & clone tensorflow repo

Head to the tensorflow github page and fork the repo.

After doing this you would have your version of the repo for contribution purpose

⚙️ Setup Development environment for contribution

Next, would be to download the repo in zip format or clone the repo in your terminal (Http or SSH)

$ git clone https://github.com/MrChike/tensorflow.git
Cloning into 'tensorflow'...

After cloning, we would want to connect to the parent repo so to be updated with the latest changes.

$ git remote add upstream git@github.com:tensorflow/tensorflow.git
$ git remote -v
origin git@github.com:MrChike/tensorflow.git (fetch)
origin git@github.com:MrChike/tensorflow.git (push)
upstream git@github.com:tensorflow/tensorflow.git (fetch)
upstream git@github.com:tensorflow/tensorflow.git (push)
$ git fetch upstream

By doing this we are now connected and up-to-date with tensorflow repo and can checkout the whatever release we would want to contribute to

$ git branch -r
origin/HEAD -> origin/master
origin/master
upstream/LakshmiKalaKadali-patch-1
upstream/Lakshmikala_systemconfig
upstream/Surya_-MatrixSetDiagV3_checkfail
upstream/SuryanarayanaY-patch-2
:

$ git tag
v2.17.1
v2.18.0
v2.18.0-rc0

$ git checkout v2.17.1
Updating files: 100% (11816/11816), done.
Note: switching to 'v2.17.1'.

Let's take it a step further by introducing docker into the picture, Why? 🐔Because! it's important we isolate the environment and it's build dependencies away from our host machine which gives us a playground to break things and experiment for the fun of it. So we would start by mounting a volume from our host machine to the docker container.

$ docker pull tensorflow/tensorflow:latest
$ docker run --name tensorflow_contribution -it -v $(pwd)/:/tensorflow tensorflow/tensorflow:latest /bin/bash
$ apt update && apt upgrade
$ python --version
root@f56d002b5afc:/# python --version
Python 3.11.0rc1

$ apt install python3-dev python3-pip
$ pip install -U pip
$ pip --version
root@f56d002b5afc:/# pip --version
pip 24.3.1 from /usr/local/lib/python3.11/dist-packages/pip (python 3.11)

# if pip doesn't match your python version which in this case is v3.11 then you would have to update pip to match it.
$ python3.11 -m pip install pip==24.3.1

________                               _______________
___  __/__________________________________  ____/__  /________      __
__  /  _  _ \_  __ \_  ___/  __ \_  ___/_  /_   __  /_  __ \_ | /| / /
_  /   /  __/  / / /(__  )/ /_/ /  /   _  __/   _  / / /_/ /_ |/ |/ /
/_/    \___//_/ /_//____/ \____//_/    /_/      /_/  \____/____/|__/


WARNING: You are running this container as root, which can cause new files in
mounted volumes to be created as the root user on your host machine.

To avoid this, run the container by specifying your user's userid:

$ docker run -u $(id -u):$(id -g) args...

root@2e306f66dcfe:/#

You could crank it up a notch with vscode giving your IDE access to your docker container with the Attach Visual Studio Code option or the equivalent in your favourite IDE and make some changes

Hope you not getting b🙄red!.Now that we have our cloned repo s ynced with the docker container. We could make changes in the tensorflow/ folder and the changes would reflect on the host machine.

Well now we got it all setup, you would think we all good right? Psyche!!!!! 😂. Stay with me, coz we still gotta loooong way to go amigo. So lest I deviate, back to business...

The next step would be to run the configure file to build the changes we've made with ./configure

$ cd tensorflow/
$ ./configure

root@2e306f66dcfe:/tensorflow# ./configure 
Cannot find bazel. Please install bazel/bazelisk.

In the dev world, a new error is a sign of progress...
So what's bazel? It's a build tool developed by Google. It helps automate the process of compiling and testing code. So we would be installing it as instructed in the documentation.

$ apt install apt-transport-https curl gnupg -y
curl -fsSL https://bazel.build/bazel-release.pub.gpg | gpg --dearmor >bazel-archive-keyring.gpg
mv bazel-archive-keyring.gpg /usr/share/keyrings 
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/bazel-archive-keyring.gpg] https://storage.googleapis.com/bazel-apt stable jdk1.8" | tee /etc/apt/sources.list.d/bazel.list

$ apt update && apt install bazel

Now we try to run the configure file again

root@f56d002b5afc:/tensorflow# ./configure 
WARNING: current bazel installation is not a release version.
Please specify the location of python. [Default is /usr/bin/python3]: 


Found possible Python library paths:
  /usr/lib/python3/dist-packages
  /usr/local/lib/python3.10/dist-packages
Please input the desired Python library path to use.  Default is [/usr/lib/python3/dist-packages]

Do you wish to build TensorFlow with ROCm support? [y/N]: N
No ROCm support will be enabled for TensorFlow.

Do you wish to build TensorFlow with CUDA support? [y/N]: N
No CUDA support will be enabled for TensorFlow.

Do you want to use Clang to build TensorFlow? [Y/n]: Y
Clang will be used to compile TensorFlow.

Please specify the path to clang executable. [Default is ]: 


Invalid clang path.  cannot be found. Note that TensorFlow now requires clang to compile. You may override this behavior by setting TF_NEED_CLANG=0
Please specify the path to clang executable. [Default is ]:

At this point we've meet another blocker, so what's clang? Clang is a compiler for the C, C++, and Objective-C programming languages used as the compiler for building TensorFlow from source which helps compile the C++ components of TensorFlow efficiently and provides useful diagnostics. So we would be installing it from the guide

$ wget https://github.com/llvm/llvm-project/releases/download/llvmorg-17.0.2/clang+llvm-17.0.2-x86_64-linux-gnu-ubuntu-22.04.tar.xz

$ tar -xvf clang+llvm-17.0.2-x86_64-linux-gnu-ubuntu-22.04.tar.xz
$ cp -r clang+llvm-17.0.2-x86_64-linux-gnu-ubuntu-22.04/* /usr
$ clang --version

root@f56d002b5afc:/tensorflow# clang --version
clang version 17.0.2 (https://github.com/llvm/llvm-project b2417f51dbbd7435eb3aaf203de24de6754da50e)
Target: x86_64-unknown-linux-gnu
Thread model: posix
InstalledDir: /usr/bin

$ which clang 

root@f56d002b5afc:/tensorflow# which clang
/usr/bin/clang

Now that we know path in which clang has been installed, let's run the configure file again and include the path

$ ./configure
root@f56d002b5afc:/tensorflow# ./configure 
WARNING: current bazel installation is not a release version.
Please specify the location of python. [Default is /usr/bin/python3]: 


Found possible Python library paths:
  /usr/lib/python3/dist-packages
  /usr/local/lib/python3.10/dist-packages
Please input the desired Python library path to use.  Default is [/usr/lib/python3/dist-packages]

Do you wish to build TensorFlow with ROCm support? [y/N]: N
No ROCm support will be enabled for TensorFlow.

Do you wish to build TensorFlow with CUDA support? [y/N]: N
No CUDA support will be enabled for TensorFlow.

Do you want to use Clang to build TensorFlow? [Y/n]: Y
Clang will be used to compile TensorFlow.

Please specify the path to clang executable. [Default is /usr/bin/clang]: 


You have Clang 17.0.2 installed.

Please specify optimization flags to use during compilation when bazel option "--config=opt" is specified [Default is -Wno-sign-compare]: 


Would you like to interactively configure ./WORKSPACE for Android builds? [y/N]: N
Not configuring the WORKSPACE for Android builds.

Preconfigured Bazel build configs. You can use any of the below by adding "--config=<>" to your build command. See .bazelrc for more details.
        --config=mkl            # Build with MKL support.
        --config=mkl_aarch64    # Build with oneDNN and Compute Library for the Arm Architecture (ACL).
        --config=monolithic     # Config for mostly static monolithic build.
        --config=numa           # Build with NUMA support.
        --config=dynamic_kernels        # (Experimental) Build kernels into separate shared objects.
        --config=v1             # Build with TensorFlow 1 API instead of TF 2 API.
Preconfigured Bazel build configs to DISABLE default on features:
        --config=nogcp          # Disable GCP support.
        --config=nonccl         # Disable NVIDIA NCCL support.
Configuration finished

Now that we have clang installed let's build our code to reflect changes. This is the format bazel usually takes
bazel build //path/to/folder:file_target --repo_env=WHEEL_NAME=your_personalized_build_name.

To add some knowlege to your database, When you run pip install tensorflow, you typically don’t see a .whl extension in the command or output because pip handles the download, extraction, and installation of the wheel file seamlessly in the background. However, behind the scenes, pip is indeed downloading a .whl file from PyPI and using it for the installation. So to continue with our bazel installation

$ apt install patchelf
$ bazel build //tensorflow/tools/pip_package:wheel --repo_env=WHEEL_NAME=tensorflow_cpu

root@f56d002b5afc:/tensorflow# bazel build //tensorflow/tools/pip_package:wheel --repo_env=WHEEL_NAME=tensorflow_cpu
ERROR: The project you're trying to build requires Bazel 6.5.0 (specified in /tensorflow/.bazelversion), but it wasn't found in /usr/bin.

You can install the required Bazel version via apt:
  sudo apt update && sudo apt install bazel-6.5.0

If this doesn't work, check Bazel's installation instructions for help:
  https://bazel.build/install/ubuntu

We need to install the exact bazel version the tensorflow project is using as suggested in the terminal and rerun the bazel command

$ apt update && apt install bazel-6.5.0
$ bazel build //tensorflow/tools/pip_package:wheel --repo_env=WHEEL_NAME=tensorflow_cpu

root@f56d002b5afc:/tensorflow# bazel build //tensorflow/tools/pip_package:wheel --repo_env=WHEEL_NAME=tensorflow_cpu
Extracting Bazel installation...
Starting local Bazel server and connecting to it...
Analyzing: target //tensorflow/tools/pip_package:wheel (544 packages loaded, 22399\
 targets configured)
    INFO: Found 1 target...
[809 / 6,002] 2 actions running
    Compiling src/idl_gen_php.cpp [for tool]; 3s local
    Compiling src/ssl/tls_record.cc [for tool]; 1s local
    INFO: Elapsed time: 368.128s, Critical Path: 317.42s
INFO: 5 processes: 1 internal, 4 local.
INFO: Build completed successfully, 5 total actions

NB: There are three versions for possible build.. CPU, GPU & TPU. This tutorial focused on CPU and for the first build it took me 24hrs+, and upon subsequent builds in minutes because the first build has been cached in the bazel folder.

So now your changes are being compiled and after that we can install the compiled version in our tensorflow changes in the terminal.
pip install path/to/wheel

$ pip uninstall tensorflow # If you are removing an already installed custom tensorflow build, it would be that build name instead. In my case, tensorflow_cpu.
$ pip install bazel-bin/tensorflow/tools/pip_package/wheel_house/tensorflow_cpu-2.17.1-cp311-cp311-linux_x86_64.whl

$ pwd
root@f56d002b5afc:/# pwd
/
root@f56d002b5afc:/# python
Python 3.11.0rc1 (main, Aug 12 2022, 10:02:14) [GCC 11.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import tensorflow as tf
2024-11-04 02:41:20.894095: I tensorflow/core/util/port.cc:153] oneDNN custom operations are on. You may see slightly different numerical results due to floating-point round-off errors from different computation orders. To turn them off, set the environment variable `TF_ENABLE_ONEDNN_OPTS=0`.
2024-11-04 02:41:21.211472: I tensorflow/core/platform/cpu_feature_guard.cc:210] This TensorFlow binary is optimized to use available CPU instructions in performance-critical operations.
To enable the following instructions: AVX2 AVX_VNNI FMA, in other operations, rebuild TensorFlow with the appropriate compiler flags.
HELLO WORLD!

As you can see the HELLO WORLD! changes made in the tensorflow/python/keras/models.py module now reflects in our compiled version of tensorflow. The next step would be to commit our changes, push and create a pull request.

NB: The community has it's code of conduct you have to follow to push so i would suggest you familiarize yourself with it before creating your pull request. So let's assume are familiar with this and create our pull request

🫸 Push and create pull request

So now that everything is set, let's do the needful

$ git add . && git commit -m "Initial Commit" && git push

Now head to the branch you've created on your github repo and create pull request as seen in the screenshots below

Now you have completed the full tutorial.
What's left is to collaborate, contribute, solve issues and network in the community..... If you found this article helpful, i would appreciate that you engage in the comment section. 😇

Resources:

Setting Up MKDocs for Your Django Project: A Quick Guide!

Mr Chike — Sat, 19 Oct 2024 22:07:13 +0000

After scouring back and forth the world wide web looking for who's content to devour it came to my notice that this content is the first of it's kind so I would first like to give a special shoutout to my Mom, my Dad 😭😭😭.

So to kickoff, i would start by highlighting the steps to take to get it done. (You know like begin with the end in mind)

Create Django Project
Install MkDocs & Build Documentation Folder
Include Documentation Folder in STATICFILES_DIRS
Register Documentation Folder for Template Rendering
Setup Url Configuration for public visibility
Setup MKDocs Configuration
Insert Static Blocks in HTML File for Static File Management
Build your app...
Create Django Project

django-admin startproject google_docx
cd google_docx/
python3 -m venv env
source env/bin/activate

Install MkDocs & Build Documentation Folder

pip install mkdocs
mkdocs new docs
cd docs
mkdocs build

And now to take a breather before we continue, feel free to go gossip with caroline at the coffee corner, hopefully it doesn't come back to bite you.

Done with the talk? Let's continue then
Below is currently the file structure of the documentation.

docs/
├── docs
│   └── index.md
├── mkdocs.yml
└── site
    ├── 404.html
    ├── css
    │   ├── base.css
    │   ├── bootstrap.min.css
    │   ├── bootstrap.min.css.map
    │   ├── brands.min.css
    │   ├── fontawesome.min.css
    │   ├── solid.min.css
    │   └── v4-font-face.min.css
    ├── img
    │   ├── favicon.ico
    │   └── grid.png
    ├── index.html
    ├── js
    │   ├── base.js
    │   ├── bootstrap.bundle.min.js
    │   ├── bootstrap.bundle.min.js.map
    │   └── darkmode.js
    ├── search
    │   ├── lunr.js
    │   ├── main.js
    │   ├── search_index.json
    │   └── worker.js
    ├── sitemap.xml
    ├── sitemap.xml.gz
    └── webfonts
        ├── fa-brands-400.ttf
        ├── fa-brands-400.woff2
        ├── fa-regular-400.ttf
        ├── fa-regular-400.woff2
        ├── fa-solid-900.ttf
        ├── fa-solid-900.woff2
        ├── fa-v4compatibility.ttf
        └── fa-v4compatibility.woff2
google_docx/
├── asgi.py
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py

So to proceed, we would be heading to the next step.....

Include Documentation Folder in STATICFILES_DIRS & Register Documentation Folder for Template Rendering

Update the following in the `settings.py` file

STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, STATIC_URL)
STATICFILES_DIRS = [
    BASE_DIR / "docs/site",  # mkdocs static directory
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'docs/site')], # register directory for HTML template rendering
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Setup urls.py Configuration for public visibility

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('docs/', TemplateView.as_view(template_name="index.html")),
]

Setup MKDocs Configuration

Update the mkdocs.yml file

site_name: Google Docx Documentation # Project Doc Name
site_dir: site 
site_url: http://127.0.0.1:8000/docs

run the mkdocs build command

mkdocs build

Insert Static Blocks in HTML File for Static File Management

NB:_ mkdocs by default generates index.html but django can only load static files like css and js with {% load static %} in html files. So keep in mind that when you update the document and build you would have to rerun this process._

<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="None">

        {% load static %}
        <link rel="canonical" href="http://127.0.0.1:8003/docs/">
        <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}">
        <title>Google Docx Documentation</title>
        <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
        <link href="{% static 'css/fontawesome.min.css' %}" rel="stylesheet">
        <link href="{% static 'css/brands.min.css' %}" rel="stylesheet">
        <link href="{% static 'css/solid.min.css' %}" rel="stylesheet">
        <link href="{% static 'css/v4-font-face.min.css' %}" rel="stylesheet">
        <link href="{% static 'css/base.css' %}" rel="stylesheet">
        <link id="hljs-light" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css" >
        <link id="hljs-dark" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css" disabled>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
        <script>hljs.highlightAll();</script> 
    </head>

<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script>
     var base_url = ".",
     shortcuts = {"help": 191, "next": 78, "previous": 80, "search": 83};
</script>
<script src="{% static 'js/base.js' %}"></script>
<script src="{% static 'search/main.js' %}"></script>

The final outcome as you'll see below that it's up and running and the code can be found in django_mkdocs

Thanks for your attention so far and would love you to know i'm open to feedback and collaboration.

How to deploy React Portfolio|Project with Github Pages as @ 2024

Mr Chike — Mon, 30 Sep 2024 14:07:34 +0000

Going through the years of tech it’s always interesting to see how things keep evolving. It used to be a whole lot of hassle to deploy applications but I must say it’s really awesome how Github integrated this feature to make life easy. So as a no BS guy, let’s get straight to the point.

If you’ll rather not build things from scratch, then here is an already existing portfolio inspired by the Github design. Feel free to fork and update. Below are the steps

Create Portfolio

npx create-react-app portfolio
cd portfolio
npm install gh-pages --save-dev

Head to Github account and create repo

Update the package.json to reflect commands.

"homepage": "https://<username>.github.io/<repository-name>" "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }

Commit and push changes, then build & deploy.
git remote add origin git@github.com:<username>/<repository-name>.git git add . && git commit -m "initial commit" git push --set-upstream origin master npm run build npm run deploy
View your live website at https://.github.io/ and in my case…

DEV Community: Mr Chike

🤝 Learn Front-End by Doing: Contribute to Cal.com's Open Source...🚀

👇 Table of Contents

⚙️ Environment Setup (Optional)

📦 Project Scaffolding

🚀 Launch

🛠️ FastAPI in Production: Build, Scale & Deploy - Series B : Services, Queues & Containers

📚 Table of Contents

⚽ Picking Up Where We Left Off

🗂️ Project Structure

🛢️ Setup Database

💾 Perform CRUD Operations

🚀 Offloading CPU Intensive Workloads with Celery

📄 Project Documentation with MKDocs

🐳 Running Your Project in Docker

🚀 Create Professional Portfolios Using Material for MkDocs (Series-X)

✌️ Table of Contents

⚙️ Environment Setup (Optional)

📦 Project Scaffolding

🤬 Frustrations (Optional)

🚶‍♂️ Walk Through

🚀 Deployment (Github Actions Included)

📁 Create a GitHub Repository

🔑 Generate SSH keys

🗝️ Add your SSH public key to GitHub

🧑‍💻 Manual Deployment using mkdocs gh-deploy

🔐 Create a Personal Access Token (PAT)

🤫 Add the PAT as a GitHub Secret

🤖 Automated Deployment using GitHub Actions

🔥 FastAPI in Production: Build, Scale & Deploy – Series A: Codebase Design

Table of Contents

🧠 A Bit of Background

🎯 What to Expect

🗂️ Project Structure Overview

🏗️ Project Initialization

🔄 Request Lifecycle

🧪 Testing the Gears

🏁 Conclusion

Quick Recap:

Mastering the Art of Learning: A Professional’s Guide

🧠 Master the Art of Learning Efficiently (A Memo for Lifelong Learners). ⏱️🎯

🧠 Master the Art of Learning Efficiently (A Memo for Lifelong Learners). ⏱️🎯

Building a Secure, Scalable Learning Platform with RBAC Features 🎓🔒📚

🥷 Fork & clone LMS repo.

⚙️ Setup & Migrate Prisma Schema

🥷 Fork & clone LMS API repo

📚 Start creating courses

Build, Innovate & Collaborate: Setting Up TensorFlow for Open Source Contribution! 🚀✨

🥷 Fork & clone tensorflow repo

⚙️ Setup Development environment for contribution

🫸 Push and create pull request

Setting Up MKDocs for Your Django Project: A Quick Guide!

Update the following in the settings.py file

How to deploy React Portfolio|Project with Github Pages as @ 2024

🧑‍💻 Manual Deployment using `mkdocs gh-deploy`

Update the following in the `settings.py` file