DEV Community

Cover image for How I Accidentally Built a Full-Stack Portfolio While Completing a Google IT Certification Project
AbdulGoniyy Adeleke Dare
AbdulGoniyy Adeleke Dare

Posted on

How I Accidentally Built a Full-Stack Portfolio While Completing a Google IT Certification Project

#python #showdev #webdev #beginners

Welcome! 👋
After finishing the Google IT Support Professional Certificate 🎉, I wanted to put my new skills to work — not just to tick a box, but to actually build something that could speak for me.
I planned some projects to bridge the gap between theory and practice. After publishing three practical IT projects (Personal IT Lab and Troubleshooting Documentation - Windows and Linux) on Dev.to, I turned to my fourth — a seemingly simple ‘static website’ assignment. But then curiosity took over, and the project snowballed into a full-stack build.

🚀 Set Up a Home Server with a Static Website ← This is where things got interesting.

The fourth project was supposed to be a straightforward assignment: install a LAMP/NGINX stack, serve a basic HTML/CSS site, and make it public with Ngrok. Simple, right?

Well, I accidentally built a full-stack web application with a React frontend, a FastAPI backend, and a MongoDB database. Let me walk you through how "scope creep" became the single best learning experience of my journey so far.

💭 From “What If?” to “Why Not?”

After setting up the basic NGINX server in a few hours, I had a thought that many of you might find familiar: "This is cool, but... what if I made it actually useful?"

A static site felt like checking a box. I wanted to build something that would:

  • Showcase my skills beyond the certification requirements.
  • Force me to learn the modern web technologies I see in job descriptions.
  • Create a real platform to host my other projects and blog about my learnings.
  • Demonstrate a problem-solving mindset to potential employers.

That "what if" moment was the starting pistol for a deep dive into full-stack development.

🔧 Tech Stack Evolution: Hello Full-Stack World

What started as a simple plan...

The Original Plan:
HTML + CSS + NGINX = A simple static page

...quickly evolved into a much more ambitious reality.

What I Actually Built:
React + Tailwind CSS + FastAPI + MongoDB + NGINX = A complete web application

Project Architecture Diagram
(A high-level overview of the application architecture.)

Why I Chose This Stack:

  • Backend (FastAPI): As an IT Support grad, I had a foundation in Python. FastAPI was the perfect next step. It's modern, incredibly fast, and the automatic API documentation (/docs) is a lifesaver for learning API design.

  • Frontend (React): I had zero experience with frontend frameworks, but React is the industry standard. Thinking in components felt like a natural extension of the problem-solving and troubleshooting mindset I'd been developing. I paired it with Tailwind CSS and shadcn/ui to build a professional-looking UI without getting lost in CSS from day one.

  • Database (MongoDB): I chose MongoDB over a traditional SQL database because its flexible, JSON-like document structure felt more intuitive for a beginner building a portfolio with varied content types (blog posts, project descriptions, user info).

The Technical Journey: Code, Sweat, and "Aha!" Moments

Here are some code moments that made it click — the ones where I started to feel like a real developer 😊.

My first React component was a simple card to display my projects. The basic structure looked something like this, and getting it to render felt like magic

// The React component felt like a huge win!
function ProjectCard({ title, description, link }) {
  return (
    <div className="border rounded-lg p-4 hover:shadow-lg transition-shadow">
      <h3 className="text-xl font-semibold">{title}</h3>
      <p className="text-gray-600 mt-2">{description}</p>
      <a href={link} className="text-blue-500 hover:underline mt-4 inline-block">
        View Project
      </a>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

And here's how those cards look on the actual homepage, creating a clean, organised view of my projects:

project cards on the homepage
(The final rendered project cards in the browser.)

On the backend, creating my first FastAPI endpoint was the moment it all clicked. The Python I knew could now power a web API!

# This simple endpoint was the start of my entire backend
from fastapi import FastAPI

app = FastAPI()

@app.get("/api/v1/projects")
async def get_projects():
    # In the full version, this function queries the MongoDB database
    return {"message": "Hello from my projects API!"}
Enter fullscreen mode Exit fullscreen mode

One of FastAPI's best features is its automatic documentation. This became my single source of truth for testing and managing my API endpoints:

the auto-generated FastAPI docs page
(The interactive API documentation generated by FastAPI at the /docs endpoint.)

Where Theory Meets Reality: The Deployment Gauntlet

Building locally is one thing; deploying is where the real learning happens.

Challenge 1: The CGNAT Reality Check

My original plan was to use DuckDNS for a custom domain, but I hit a wall. My mobile internet provider uses CGNAT (Carrier-Grade NAT), which means no public IP and no way to port forward. This was a classic IT networking problem!

Solution: Ngrok. It creates a secure tunnel to your localhost, giving you a public URL instantly. It was the perfect tool for getting a live demo up and running.

# The simple solution that saved the day
ngrok http 80
Enter fullscreen mode Exit fullscreen mode

This command gave me a public URL, making my local server accessible to anyone in the world:

Ngrok terminal output showing a public URL
(Ngrok's terminal interface after successfully creating a public tunnel.)

Challenge 2: The Dreaded CORS Error

Once I separated my React frontend and FastAPI backend, I ran into the infamous Cross-Origin Resource Sharing (CORS) error. My frontend on localhost:3000 wasn't allowed to talk to my backend on localhost:8000.

Solution: A proper NGINX Reverse Proxy. This is a fundamental DevOps concept. Instead of having two separate servers, NGINX listens on port 80 and intelligently routes traffic: requests for the website go to the React app, and requests starting with /api/ are forwarded to the FastAPI backend.

# My NGINX reverse proxy configuration
server {
    listen 80;

    # Serve the React app
    location / {
        root /var/www/portfolio/frontend/build;
        try_files $uri /index.html;
    }

    # Forward API requests to the FastAPI backend
    location /api/ {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
Enter fullscreen mode Exit fullscreen mode

Here's a quick look at the NGINX configuration file in my editor. It's a small file, but it does a lot of heavy lifting:

NGINX config file in a code editor (The NGINX configuration that routes traffic to the correct application.)

Absolutely — the structure, clarity, and flow of this revised version are excellent. It's engaging, honest, and educational — perfect for a Dev.to audience.

Here’s a minor polish to tighten the language and enhance the emotional and technical punch just a bit more:

🧠 My Secret Weapon: AI-Assisted Development

Let me be transparent: I didn’t grind through endless tutorials or spend weeks copying boilerplate from YouTube videos. Instead, I leaned into AI-assisted development — what some call vibe coding.

Tools like Emergent and Cursor IDE became my coding partners. This wasn’t about “cheating”; it was about learning faster and building smarter.

  • I focused on architecture instead of syntax struggles.
  • When I hit an error, I didn’t just ask for a fix — I asked for understanding.

Here’s a real prompt that saved me hours of Googling:

“I'm getting a CORS error between my React app on port 3000 and my FastAPI backend on port 8000, both running locally. Explain why this happens and show me the correct NGINX configuration to fix it using a reverse proxy.”

That one query unlocked the NGINX config that finally made everything click.

💡 AI tools didn’t replace the learning — they accelerated it. I still had to debug, think critically, and design solutions. But with AI, I spent more time learning concepts and less time stuck in StackOverflow loops.

The Outcome: From IT Support Grad to Full-Stack Capable

This project completely transformed my skillset and confidence. The final result wasn't just a landing page; it was a feature-rich platform. I built an admin-only Markdown editor to write and publish articles, which immediately made the site a dynamic content hub.

the admin Markdown editor
(The split-view Markdown editor for creating and editing blog posts.)

The public-facing side includes a fully rendered blog detail page, complete with support for code blocks, images, and other formatting. To make it interactive, I implemented a comments system and tag-based filtering, allowing visitors to engage with content and find posts relevant to their interests.

A fully rendered blog post page
(The public-facing view of a finished blog post.)

The comments and related posts section
(The interactive elements: a comments section and links to related articles.)

Screenshot of the tag filtering UI in action
(Filtering blog posts by clicking on a specific tag.)

Before This Project:

  • Basic HTML/CSS knowledge.
  • Python scripting skills.
  • Theoretical understanding of servers and networking.

After This Project:

  • Practical experience with React and FastAPI.
  • Understanding of REST API design.
  • Knowledge of NoSQL databases (MongoDB).
  • Real-world experience with NGINX, reverse proxies, and CORS.
  • A live, full-stack portfolio to showcase my work.

Here's a look at the final homepage, bringing together all the elements into a clean, professional presentation:

Screenshot of the final application homepage
(The main landing page of the completed portfolio application.)

🧪 What This App Does:
This isn’t just a personal site — it’s a full-stack platform with:

  • A markdown-powered blog editor (admin-only)
  • Dynamic blog pages with comments and tag filtering
  • A portfolio showcase of my real-world IT & DevOps projects

Next Steps on My Journey

This project is a solid foundation, but I'm just getting started. My immediate goals are:

  • [ ] Implement JWT authentication for user accounts.
  • [ ] Deploy the application to a cloud provider like AWS or Oracle Cloud Free Tier.
  • [ ] Set up a proper CI/CD pipeline with GitHub Actions.
  • [ ] Containerise the application using Docker.
  • [ ] Implement monitoring and logging as part of my DevOps learning journey with the 3MTT Nigeria program.

My Advice for Fellow IT & Tech Beginners

  1. Embrace "Scope Creep": If a project excites you, don't be afraid to go beyond the minimum requirements. The detour is often where the most valuable learning happens.
  2. Your IT Fundamentals are Superpowers: My understanding of networking (CGNAT) and system administration (NGINX) from the Google course was invaluable for debugging real-world issues.
  3. Use Modern Tools: AI assistants are not a crutch; they are a powerful lever. Use them to learn faster and stay focused on the bigger picture.
  4. Build in Public: Share your journey, even the messy parts. The feedback is invaluable, and your struggles will help someone else who is on the same path.

showdev #webdev #react #python #3mttNigeria #growWithGoogle #fastapi #devops #beginner #fullstack

🔗 Check It Out

🤝 Let's Connect!

I'm actively preparing for my first IT role and would love to connect with other tech enthusiasts, especially fellow Google IT Support graduates and aspiring DevOps engineers.

🎙 What About You?
Have you ever started something small and ended up building way more than you planned? Share your story or drop a link to your favourite “accidental masterpiece.” I’d love to learn from your journey, too.

Top comments (3)

Collapse
 
agatha_louise_c3c91332b26 profile image
Agatha Louise •

For tasks involving password retrieval,Score upgrade , device access penetration, or data recovery, it is essential to collaborate with professionals who specialize in these areas. Their expertise can ensure effective and secure handling of sensitive information, ultimately leading to successful outcomes in your endeavors. ; Remotespyhacker (AT) G (m) a1l c 0m for such serviices

Collapse
 
richard_teng_5fbf32b4c7de profile image
Richard Teng •

good serviixes

Some comments may only be visible to logged-in visitors. Sign in to view all comments.