DEV Community: Nicolás Andrés Cano Leal

Portfolio v2.0: three themes, one headline, and every number checked against the repo

Nicolás Andrés Cano Leal — Sun, 18 Oct 2026 04:48:22 +0000

My portfolio just hit v2.0. It's a Django 5.2 + DRF API with a React 19 build embedded and served by Django, PostgreSQL on Neon, deployed on PythonAnywhere.

The visible change is a theme switcher in the top-right corner with three palettes: Cian (the default, a midnight background with a cyan-to-violet aurora), Violeta (light) and Ámbar (warm and sober). The less visible change taught me more: making sure my portfolio, my CV and my LinkedIn tell the same story with the same numbers.

👉 Live: nicolasandrescl.pythonanywhere.com · backend · frontend

Part 1 — A theme system that never re-renders React

Themes as plain data

Every component was already styled with Stitches tokens ($accent, $surface, $syntaxFunction…). So I didn't need a ThemeProvider. A theme is just a set of token values, written as plain data with no Stitches import:

// src/themes/palettes.js (trimmed)
export const THEMES = [
  {
    key: 'cian',
    label: 'Cian',
    dark: true,
    colors: { background: '#070b14', accent: '#22d3ee', onAccent: '#04111a', /* … */ },
    fonts: { heading: "'Space Grotesk', 'Segoe UI', sans-serif", /* … */ },
  },
  // violeta, ambar …
];

Keeping it free of Stitches means I can test it without a styling runtime. This test catches the most common theming bug, a theme that quietly inherits a color from another one because it forgot to define a token:

it('every theme defines the same tokens', () => {
  const base = getTheme(DEFAULT_THEME);
  const colorKeys = Object.keys(base.colors).sort();
  THEMES.forEach((t) => {
    expect(Object.keys(t.colors).sort()).toEqual(colorKeys);
  });
});

One class on `<html>`

Each palette becomes a Stitches createTheme class, and switching themes just swaps a class on <html>:

export const themes = Object.fromEntries(
  THEMES.map((t) => [t.key, createTheme(themeClass(t.key), { colors: t.colors, fonts: t.fonts })]),
);
Object.values(themes).forEach((t) => t.className); // ← more on this line below

export function applyTheme(key, root = document.documentElement) {
  const theme = getTheme(key);
  THEMES.forEach((t) => root.classList.remove(themeClass(t.key)));
  root.classList.add(themeClass(theme.key));
  root.dataset.theme = theme.key;
  root.style.colorScheme = theme.dark ? 'dark' : 'light';
  // …and updates <meta name="theme-color"> for the mobile browser bar
}

Why <html> and not a wrapper <div>? Radix renders dropdowns in a Portal attached to <body>. If the theme lived on a div inside the app, every menu would open with the wrong colors.

The switcher itself is a Radix DropdownMenu with a RadioGroup. That gives menuitemradio roles, keyboard navigation, Escape to close and focus management for free. The choice is stored in localStorage, wrapped in try/catch: private mode or blocked storage falls back to Cian instead of breaking the site.

No flash on reload

If you apply the saved theme in a useEffect, every reload paints the default theme first and then switches. The fix is a tiny inline script that runs before React loads:

<style>
  html { background: #070b14; color-scheme: dark; }
  html[data-theme="violeta"] { background: #fbf8ff; color-scheme: light; }
  html[data-theme="ambar"] { background: #130d0a; }
</style>
<script>
  (function () {
    var keys = ['cian', 'violeta', 'ambar'];
    var key = 'cian';
    try { key = localStorage.getItem('portafolio-theme') || key; } catch (e) {}
    if (keys.indexOf(key) === -1) key = 'cian';
    document.documentElement.dataset.theme = key;
    document.documentElement.classList.add('theme-' + key);
  })();
</script>

I verified it with Playwright: save Ámbar, reload, screenshot immediately. Even the loading spinner was already amber.

Four traps I stepped on

1. Stitches injects themes lazily. A createTheme rule only reaches the stylesheet when something reads theme.className. My inline script added theme-ambar to <html> before any component had touched that theme, so the class existed but styled nothing. That's the reason for the "useless-looking" line above: reading .className for every theme when the module loads forces the injection.

2. Django wasn't serving Vite's index.html. The production page comes from Django's templates/index.html, which resolves the hashed assets from Vite's manifest. Anything I added to Vite's <head> (the anti-flash script, Google Fonts) would never reach production. It now lives in both files, and the keys have to match.

3. A light theme exposes every hard-coded color. Going from dark to light turned up three problems:

color: 'white' on buttons became unreadable on the bright cyan accent. That gave me a new onAccent token.
Section wrappers with backgroundColor: '$background' hid the aurora painted on <body>. They're transparent now.
The Radix <Theme> paints its own background by default. It now uses hasBackground={false}.

4. docker compose restart served the old bundle. The built dist/ is copied into the image, so after npm run build you need up -d --build. I noticed because the index-*.js hash in the HTML hadn't changed.

Part 2 — One headline, verified numbers

While shipping the themes, I noticed something a recruiter would notice first. My portfolio said "Backend Python Developer | Automation & Reliability", my CV said "Backend Python Developer · DevOps & Reliability", and LinkedIn said something else. Three versions of the same person don't build trust.

So LinkedIn became the source of truth: Backend Engineer → SRE | Python · Django · Kubernetes · Terraform · CI/CD. The portfolio, the CV (versioned HTML → PDF via headless Edge) and my GitHub profile now say exactly that.

Then I went further and re-measured every number I publish against the actual repositories (pytest --collect-only, git shortlog, counting the Postman collection). Several were stale. The test count of my main automation project was off by thousands, a Postman collection had grown from 79 to 82 requests, and one coverage claim described a target instead of the 80% floor the CI actually enforces. I also caught my own mistake: I counted 18 releases when there were 19, because two versions only appear in the project's README, not in commit messages.

The lesson: a number on your CV is a claim someone can check. Measure it from the source, write down where it came from, and prefer wording like "2,800+ tests" when the exact count changes every week.

How it ships

35 frontend tests (Vitest + Testing Library) and 49 backend tests (~91% coverage) with mypy.
A scripts/verificar.sh in each repo replays the CI on a clean clone of HEAD, with the same Node and Python versions as GitHub Actions. If Python 3.12 isn't installed locally, it runs inside a python:3.12-slim container. The runner only sees what's committed, so that's what gets tested.
End-to-end check in Docker (Django + Postgres + the embedded build) with Playwright: all three themes, desktop and 375 px mobile, no horizontal scroll.
CD with Jenkins: test gate → image build → deploy → healthcheck → smoke test, with a stage that guarantees the deploy can never point at the production database.

The two themes besides Cian were ported from an internal tool I built earlier (CmdVault), where they were NiceGUI palettes. Same idea, different stack. That's the part of side projects I enjoy most: the ideas move from one project to the next.

If you try the site, tell me which theme you'd keep. And if you have your own trick for flash-free theming, I'd love to hear it. 👇

From Local Scripts to Global-Ready Backend: CI/CD, Testing & Coverage in SparkTrace

Nicolás Andrés Cano Leal — Wed, 13 Aug 2025 05:37:28 +0000

Over the past few weeks, I’ve transformed my backend project SparkTrace into a reproducible, test-driven, and CI/CD-integrated system—ready for international technical interviews and scalable deployments.

Here’s a breakdown of the key milestones:

🧠 Modular Architecture & Refactor

Reorganized Django commands into a clean structure under productos/management/commands/

Decoupled logic for API integration, CSV loading, and Spark job execution

Refactored settings and .gitignore for cross-platform compatibility

🧪 Automated Testing & Full Coverage

Built a complete test suite with pytest and pytest-django

Validated edge cases with JSON fixtures simulating real API responses

Achieved 100% coverage in critical modules: CSV loader, API integration, custom exceptions

Documented audit-ready testing strategy in bilingual README

⚙️ CI/CD Integration with GitHub Actions

Configured workflow to run tests and coverage on every push and pull request

Managed secrets (SECRET_KEY, CODECOV_TOKEN) securely via GitHub

Integrated Codecov for visual coverage reporting

Added badges for test status and coverage to README

🌐 Professional Presentation & Portfolio

Updated bilingual README with technical branding

Published progress on LinkedIn to showcase reproducibility and traceability

Live portfolio available at nicolasandrescl.pythonanywhere.com

🎯 What’s Next?

My goal is to lead backend projects with robust testing, API integration, and CI/CD pipelines that scale globally. SparkTrace is now a technical showcase for reproducibility, coverage, and auditability—ready for interviews, collaborations, and open-source contributions.

🇪🇸 Versión en español

De scripts locales a backend listo para el mundo: CI/CD, testing y cobertura en SparkTrace

Durante las últimas semanas, transformé mi proyecto backend SparkTrace en un sistema reproducible, orientado a testing y con integración CI/CD—preparado para entrevistas técnicas internacionales y despliegues escalables.

Aquí el resumen de los hitos clave:

🧠 Arquitectura modular y refactor

Reorganicé los comandos Django en una estructura limpia bajo productos/management/commands/

Desacoplé la lógica de integración API, carga CSV y ejecución de jobs Spark

Refactoricé los settings y .gitignore para compatibilidad multiplataforma

🧪 Testing automatizado y cobertura total

Construí una suite completa con pytest y pytest-django

Validé casos límite con fixtures JSON que simulan respuestas reales de API

Alcancé cobertura del 100% en módulos críticos: cargador CSV, integración API, excepciones personalizadas

Documenté la estrategia de testing lista para auditoría en README bilingüe

⚙️ Integración CI/CD con GitHub Actions

Configuré workflow para ejecutar tests y cobertura en cada push y pull request

Gestioné secretos (SECRET_KEY, CODECOV_TOKEN) de forma segura vía GitHub

Integré Codecov para reporte visual de cobertura

Añadí badges de estado de tests y cobertura al README

🌐 Presentación profesional y portafolio

Actualicé README bilingüe con branding técnico

Publiqué avances en LinkedIn destacando reproducibilidad y trazabilidad

Portafolio en vivo disponible en nicolasandrescl.pythonanywhere.com

🎯 ¿Qué sigue?

Mi objetivo es liderar proyectos backend con testing robusto, integración de APIs y pipelines CI/CD que escalen globalmente. SparkTrace es ahora una vitrina técnica de reproducibilidad, cobertura y auditoría—lista para entrevistas, colaboraciones y contribuciones open-source.

A Fresh Launch: My Developer Portfolio Is Production Ready

Nicolás Andrés Cano Leal — Wed, 23 Jul 2025 16:25:33 +0000

After a comprehensive refactor across both backend and frontend, my personal portfolio is now fully modular, scalable, and ready to go live.

🔧 Backend: Django + DRF

Migrated from monolithic to domain-based modular architecture
RESTful endpoints for projects, skills, and contact functionality
API documentation with Swagger via drf_spectacular
Direct email dispatch via custom contact endpoint
Consistent routing under /api/, prepared for deployment

🎨 Frontend: React + Vite

Refactored components for visual consistency (ProjectCard, ContactCard, FooterCard)
Connected contact form to backend with dynamic user feedback
Added CV download functionality
Unified styles and hover states with centralized index.css
Interactive menu with Material UI icons for GitHub, LinkedIn, and Dev.to

📁 All code is available on GitHub via the dev branch, and will soon replace my current portfolio version.

📎 Live preview: https://nicolasandrescl.pythonanywhere.com

This project reflects not just code improvements, but an intentional evolution in architecture, documentation, and developer experience. It’s built to be shared, scaled, and showcased — and will be my new technical identity moving forward.

🔖 Tags
text

SoftwareEngineering #ReactDeveloper #BackendEngineer #DjangoREST #FrontendRefactor #APIDesign #ModularArchitecture #GitWorkflow #PortfolioLaunch #ProductionReady #OpenSource #LinkedInDev

Migrating My Portfolio from Django Templates to React + Vite + TailwindCSS

Nicolás Andrés Cano Leal — Mon, 14 Jul 2025 01:00:37 +0000

After years of building robust backend systems with Django, I’ve decided to give my personal portfolio a frontend makeover. The new version is built using React and Vite for a lightning-fast development experience, with TailwindCSS v4 (plus Shadcn/UI) for clean and flexible styling.

This transition reflects a shift not only in tech stack but in how I present my work as a Backend Developer — embracing modular architecture and focusing on user experience across devices.

🛠️ Core Stack and Setup

React + Vite: Fast dev server, intuitive routing, and modular component design.

Tailwind v4: Manually integrated via @tailwindcss/postcss to support Shadcn/UI.

Shadcn/UI: Powerful UI components with headless accessibility.

🔧 Tailwind Setup Summary

npm install @tailwindcss/postcss

With config files:

postcss.config.cjs using @tailwindcss/postcss

Tailwind purging content from src/*/.{js,ts,jsx,tsx}

Global styles defined in index.css for consistent theming

📁 Component Highlights

ProjectCard.jsx, ContactCard.jsx, SkillCard.jsx, TituloCard.jsx — each crafted with purpose to highlight key areas of my portfolio

Responsive layout powered by Tailwind utility classes

ESLint and Vite configuration for clean code and optimized builds

🌐 Going Live Soon!

The project will be deployed soon, but until then feel free to check out the current progress and explore my portfolio [insert your link here].

Thanks for reading — if you’re working on frontend transitions or integrating Tailwind v4 in your own setup, let’s connect!

🔗 #React #Vite #TailwindCSS #ShadcnUI #FrontendDev #PortfolioUpgrade #WebDevelopment #CleanArchitecture #Django #BackendToFrontend

🚀 Building a Flask RESTful API: From Jinja2 Views to a Scalable Backend

Nicolás Andrés Cano Leal — Wed, 02 Jul 2025 08:57:32 +0000

In this post, I’ll walk you through how I transitioned my Flask project from a classic Jinja2-based web app to a modular, production-ready backend with a RESTful API, full test coverage, and Swagger documentation.

🧠 Motivation: I wanted to go beyond basic templating and learn how to build backends that scale, integrate with frontend frameworks, and support proper testing and documentation.

🔧 Technologies Used

Python 3.12
Flask with Blueprint architecture
SQLite + SQLAlchemy ORM
Flasgger (Swagger UI integration)
Jinja2 for server-rendered views
Pytest for automated testing
Postman for manual endpoint verification
Git for version control

💡 What I Built

🔄 A full RESTful API for task management
🧩 Clean code structure with an app factory (create_app) and Blueprint registration
🧪 Unit tests using Pytest with in-memory SQLite
📘 Interactive API docs with Swagger
🧼 Better endpoint handling using unique endpoint= values to resolve route conflicts
🧠 JSON-based error responses and safe exception management

✅ Results

Swagger now correctly renders all documented endpoints.
All tests pass reliably across isolated app instances.
The backend is ready to be consumed by frontend frameworks like React.
All source code and documentation are publicly available via my portfolio.

🔗 Check it out: nicolasandrescl.pythonanywhere.com 🧪 The code is already deployed as a static asset and will soon go live as a full API service.

🎯 Next Steps

Add JWT authentication
Connect a React frontend
Enable pagination and filtering
Deploy to production with metrics

If you're learning Flask or building your first API, feel free to check out the repo and reach out—happy to collaborate and grow with the community!

Python #Flask #RESTAPI #Swagger #Pytest #DeveloperJourney #WebDevelopment #Backend #SQLAlchemy #PortfolioProject

🚀 Evolving My FastAPI Project: Modular Architecture, Testing & MySQL Integration

Nicolás Andrés Cano Leal — Mon, 30 Jun 2025 05:55:28 +0000

Over the past few hours, I've been deep into refactoring one of my FastAPI projects with a clear goal: make it production-ready and showcase it live through my portfolio at nicolasandrescl.pythonanywhere.com 💡

Here’s what I accomplished:

✅ What Changed

Refactored the entire project structure into clearly separated layers:

routers/ for endpoints
repository/ for data access logic
schemas/ for Pydantic models
models/ for SQLAlchemy models
services/ for business logic
core/ for configuration and DB connections
Integrated a MySQL database using SQLAlchemy and PyMySQL for full persistence.
Switched to Pydantic v2, updating all .dict() references to .model_dump() to stay aligned with the latest standards.
Added error handling and validation, including custom messages and constraints (e.g. rejecting names under 3 characters).
Wrote an integration test for user creation using pytest + TestClient, and installed httpx, email-validator, cryptography, and other missing dependencies.
Resolved merge conflicts cleanly and pushed the finalized version to GitHub.
Updated the README.md with architecture overview, setup instructions, and feature highlights.

🔧 What’s Next?

I’m preparing to deploy the API backend publicly so that visitors to my portfolio can see it in action. The /user/ endpoint will be testable directly from Swagger UI.

Live site: 🌐 nicolasandrescl.pythonanywhere.com Repo: 📁 github.com/NicolasAndresCL/FastAPI

🛠️ Stack

FastAPI, SQLAlchemy, PyMySQL
MySQL, Pydantic v2, Uvicorn
Pytest, TestClient, HTTPX

🧵 Let’s Connect

If you're working on API design, backend structure, or transitioning to production, I'd love to exchange ideas!

FastAPI #BackendDevelopment #Python #SQLAlchemy #MySQL #TDD #CleanArchitecture #pytest #DevJourney #Pydantic #PythonBackend #PortfolioDev #APIDesign #OpenSource #PythonAnywhere

🚀 My Developer Portfolio Is Live and Now Fully Responsive!

Nicolás Andrés Cano Leal — Sat, 28 Jun 2025 01:05:15 +0000

Bringing your work into production is thrilling—until something breaks and you don’t know why. That’s exactly what I faced while deploying my Django-based portfolio.

Despite making all the right changes in my HTML and CSS, nothing was updating on the live site. Turns out, the answer was hidden in a single command:

bash
python manage.py collectstatic --noinput

🎯 What I Built

A full portfolio site running on PythonAnywhere, styled with custom CSS (nude color palette for minimalist elegance)

Built with Django and Django REST Framework, showing off real API endpoints and dynamic content

Responsive design using Flexbox, Grid, and media queries

Deployment-ready, including secure admin access and custom favicon

📸 Key Win: Debugging in Production

The image in my header was overlapping the page title on mobile. After reviewing my layout and adding all the right media queries… the issue persisted 😩 But the problem wasn’t layout—it was the old static files being served by Django. Once I re-ran collectstatic inside my virtual environment, everything fell into place.

🎨 See It for Yourself

🌐 nicolasandrescl.pythonanywhere.com Feel free to check it out and explore my featured projects. Feedback is always welcome!

Django #Python #BackendDeveloper #WebDevelopment #ResponsiveDesign #PortfolioSite #ProductionDebugging #PythonAnywhere #DevJourney #OpenToWork

🚀 Successfully Deployed: My Django Portfolio is Now Live on PythonAnywhere

Nicolás Andrés Cano Leal — Fri, 27 Jun 2025 19:08:01 +0000

After weeks of focused development, troubleshooting, and iteration, I’m proud to share that my Django-based portfolio project — MiPortafolioDjango — is now fully deployed and live in production!

🔗 Check it out here: nicolasandrescl.pythonanywhere.com

This deployment involved much more than pushing code — it was a comprehensive hands-on learning experience covering configuration management, static and media file handling, security, and debugging in a real-world production environment.

⚙️ Key Improvements and Configurations

I. Django Configuration (settings.py & wsgi.py)
🔐 Secure Key Management with python-decouple

Sensitive data like SECRET_KEY and EMAIL_HOST_PASSWORD were externalized using the python-decouple package.

A .env file was created at the root of the project to store these secrets securely.

The wsgi.py file was modified to explicitly load environment variables using pathlib.Path and config() from decouple.

📁 Static Files Configuration

Set STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') in settings.py.

Ran python manage.py collectstatic to collect and serve static files on the server.

🖼 Media Files Configuration

Configured MEDIA_URL and MEDIA_ROOT to handle uploaded files using Django’s ImageField.

This enabled uploaded images to be visible through the admin and rendered on the frontend.

🌍 Production Settings

ALLOWED_HOSTS was updated to include nicolasandrescl.pythonanywhere.com.

Set DEBUG = False for security in production.

Confirmed that portfolio_project/wsgi.py contains necessary .env loading logic to work independently of PythonAnywhere’s default.

II. Server Setup on PythonAnywhere

✅ Repository Sync: Cleaned and re-pushed the latest repo to GitHub, then pulled it into PythonAnywhere.

🐍 Virtual Environment: Activated the virtualenv properly using workon MiPortafolioDjango_env.

🛠 Migrations & Superuser: Ran migrate and created a superuser for admin access.

🗂 Static & Media Files Web Config: Added /static/ and /media/ mappings in the Web > Static Files section.

🔁 App Reloads: Performed necessary web app reloads after every major change.

🧠 Advanced Debugging: Inspected error.log and server.log for resolving tricky deployment issues.

🐛 Critical Fixes Before Production Launch
🔄 GitHub URL Redirection Bug

Fixed a bug where all project cards linked to the same (wrong) GitHub repo.

Root cause: hardcoded URLs in the HTML template.

Solution: replaced with {{ project.github_link }} to dynamically fetch the correct link.

🖼 Project Image Display Issues

Solved the problem where project images didn’t render on the frontend.

Verified correct use of ImageField and ensured MEDIA_URL and MEDIA_ROOT were properly configured.

Now images uploaded via Django Admin appear seamlessly on the site.

🧩 Conclusion

This deployment marks a significant step forward in my journey as a backend developer. The process not only strengthened my understanding of Django and server-side deployment, but also gave me real DevOps exposure by working directly with environment variables, file systems, and web server configurations.

🔍 Every issue resolved and each configuration tweaked is now a new skill in my toolkit.
Check it out, and feel free to leave feedback!

Django #Python #Deployment #PythonAnywhere #BackendDevelopment #DevOps #PortfolioProject #WebDevelopment #DjangoTips #FullStackJourney #OpenToWork

Taking My Django Portfolio to Production – Key Milestones Achieved 🚀

Nicolás Andrés Cano Leal — Thu, 26 Jun 2025 03:45:58 +0000

After weeks of development and iterations, I’m excited to share the latest progress on my personal portfolio, built with Django and Django REST Framework. Here's a breakdown of the key improvements I've implemented before deploying the project to production.

🔐 1. Fully Functional Contact Form with Secure Email Integration
One of the core features I prioritized was enabling visitors to contact me directly from the website. I implemented a working contact form that sends emails securely using a Google App Password, protecting my credentials while ensuring deliverability.

🎨 2. Enhanced UI/UX – Visual and Structural Polish
To make the user experience smoother and more visually coherent, I refined the CSS styling, improved background color contrast, and reorganized image placements. These changes make the navigation feel more intuitive and professional.

📘 3. Embedded API Documentation (Swagger & ReDoc)
Since the backend is powered by Django REST Framework, I integrated auto-generated API documentation using Swagger UI and ReDoc, accessible directly from the site’s main interface. This allows other developers to explore all endpoints with ease.

⚙️ 4. Production-Ready Configuration
I’ve fine-tuned the project settings for deployment:

DEBUG=False to secure the environment

Proper configuration of STATICFILES and MEDIA handling

Optimized the settings.py file to separate development and production environments

🚀 5. Preparing for Deployment on PythonAnywhere
The final step is to host both frontend and backend on PythonAnywhere, which will allow seamless access and easier management under one domain. This transition is already in progress.

🔍 What’s Next?
Soon, I’ll announce the complete deployment and share the final hosted version. Until then, you can preview the current progress and code here:
👉 https://nicolasandrescl.github.io

Thanks for following along in my journey! If you have feedback, ideas, or just want to connect — I’m always open to learning from the community.

Tags:

Django #Python #Portfolio #WebDevelopment #APIDocumentation #SoftwareEngineering #PythonAnywhere #FullStack

🚀 Strengthening My Django Portfolio: Security, Contact Integration, and Optimization

Nicolás Andrés Cano Leal — Wed, 25 Jun 2025 07:48:39 +0000

🔐 1. API Security with Token Authentication
One of the key updates was reinforcing the security of my Django REST API.

I've implemented TokenAuthentication along with IsAuthenticatedOrReadOnly permissions. This means:

Visitors can freely read and explore public endpoints.

Only authenticated users (in this case, myself) with a valid token can perform write operations (POST, PUT, DELETE).

Why it matters:
This approach ensures that my API remains accessible and transparent while protecting against unauthorized modifications. It's a great foundation for future scaling or integration with frontend frameworks.

📬 2. Functional Contact Form
I added a functional and stylish contact form to the main page of my portfolio.

It uses Django’s form handling and CSRF protection, and sends messages securely via email or saves them to a database for future reference.

Why it matters:
A direct and professional communication channel is essential for networking, job opportunities, and collaborations. This adds a serious layer of usability to my site.

🧱 3. Optimized Static File Management
Previously, my static files (like CSS and images) were scattered and unorganized.

I restructured them using Django’s STATICFILES_DIRS and collectstatic system, keeping all assets organized inside the app directories and ensuring they’re properly served in production.

Why it matters:
A clean static structure avoids conflicts, speeds up deployment, and improves maintainability of the project as it grows.

📝 4. Clean Git Commit History
Every change has been tracked using clear and descriptive Git commits, following best practices like:

Atomic commits

Useful commit messages (add, fix, refactor, etc.)

Grouped by functionality

You can review the repository here 👉 GitHub Repo

Why it matters:
A well-documented Git history reflects professionalism and helps collaborators (or future-me!) understand the project’s evolution.

✅ What’s Next?
Production deployment on a custom domain.

More automation using CI/CD.

Deployment of a full-featured blog using Django CMS or a headless approach with DRF + React.

Live site 👉 nicolasandrescl.github.io

Thanks for reading, and feel free to connect or leave suggestions! 🙌
Let’s keep learning and building 💪

django #python #webdev #portfolio #api #backend #devjournal #fullstack #restapi #programming

🚀 Migrating from SQLite3 to MySQL in My Django REST API – Step by Step

Nicolás Andrés Cano Leal — Mon, 23 Jun 2025 08:14:13 +0000

🛠️ Step-by-step Migration Process
✅ 1. Install MySQL Driver
Inside my virtual environment:

pip install mysqlclient

(Alternatively, you can use pymysql if you face issues with mysqlclient.)

✅ 2. Create a New MySQL Database
Using MySQL Workbench or CLI:

CREATE DATABASE myproject_db CHARACTER SET UTF8MB4;

✅ 3. Update settings.py
I replaced the default SQLite configuration with MySQL:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'myproject_db',
        'USER': 'root',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '3306',
        'OPTIONS': {
            'init_command': "SET sql_mode='STRICT_TRANS_TABLES'",
        },
    }
}

✅ 4. Apply Migrations

python manage.py makemigrations
python manage.py migrate

✅ 5. Create a New Superuser
Since the database is clean, I recreated the admin user:

python manage.py createsuperuser

✅ 6. Test Functionality

All API endpoints were tested via Postman.
Admin panel access was verified.
Existing unit tests were re-run to confirm stability.

✅ 7. Optional: Migrate data from SQLite to MySQL

python manage.py dumpdata > data.json
# after switching DB
python manage.py loaddata data.json

🔗 My Work Online
🔹 Portfolio: https://nicolasandrescl.github.io/

🔹 GitHub Repo: https://github.com/NicolasAndresCL/API_con_DRF

💬 Final Thoughts
This migration helped me take my backend to the next level. Whether it's for performance, structure, or readiness for deployment, using MySQL brings me closer to a professional production setup.

Would love to hear your thoughts – which DB do you prefer for your Django projects?

Mastering Full-Stack Authentication with Django REST Framework and React ⚙️🔐

Nicolás Andrés Cano Leal — Sat, 21 Jun 2025 01:24:35 +0000

From a blank screen to a fully functional login flow — this has been one of the most rewarding challenges in my personal project.

🚀 Introduction
Not long ago, I tackled one of the most classic challenges in modern full-stack development: implementing user authentication.
With Django REST Framework (DRF) powering the backend and React + Vite on the frontend, the journey was packed with misconfigured routes, unexpected 405 errors, and the occasional blank screen.

In this post, I’ll share my experience, the bugs I faced, what I learned, and how I eventually solved everything.

🔍 The Problem: Unexpected Errors and Misleading Routes
After setting up the login form and connecting React to the API, I ran into this all-too-familiar message:

405 Method Not Allowed  
Unexpected non-whitespace character after JSON

Eventually, I discovered I was sending credentials to the wrong endpoint (/api/schema/swagger-ui/) instead of the actual auth route (/api/token/).
A small mistake… but it caused a lot of frustration.

✍️ Lesson Learned
Double-check your routes, HTTP methods, and urls.py configurations. And never underestimate console errors — they’re often trying to help you.

🧩 The Fix: Connecting the Dots, Managing State, and Redirecting
Once I got the token successfully, I stored it in localStorage and used React Router’s useNavigate() to redirect the user to the customer dashboard.

Along the way, I cleaned up and modularized the frontend:

Split key views (Login, Dashboard) into src/pages/

Used CSS Modules for component-scoped styling

Added loading indicators and error handling to the login form

if (response.ok) {
  localStorage.setItem('authToken', data.token);
  navigate('/customers');
}

The result: a smoother user experience and more maintainable code.

🛠️ Extras: React + CSS Modules
Beyond authentication, I also worked on the dashboard layout and organized my styles into .module.css files per page. This approach:

Makes teamwork easier

Prevents global style conflicts

Sets the stage for future scalability

🎯 Next Steps
Implement protected routes for authenticated users

Centralize authentication state management

Continue building CRUD functionality for Customers, Orders, and Products

🎉 Conclusion
Every bug taught me something new. This experience not only improved my logic and debugging skills, but also refined my approach to clean code and user-centered design.

👉 You can follow the full project here: nicolasandrescl.github.io

Have you faced similar authentication struggles in your full-stack projects? I’d love to hear your thoughts in the comments!