DEV Community: jlo128456

Phase by Phase: How Academy XI Shaped My Final Project

jlo128456 — Fri, 06 Jun 2025 03:29:41 +0000

A personal reflection on the skills, challenges, and milestones from each phase of my Academy Xi journey, culminating in a full-stack web app.

Visual Overview of My Learning Journey

Here’s a snapshot of my Academy Xi dashboard, showcasing the structured phases I completed—from the fundamentals of coding to building a full-stack application.

Each card on the dashboard wasn't just a milestone; it was a leap in confidence. Every project and challenge stretched me a little more—and prepared me for the final capstone.

Phase 0: Prepare to Code

This was the “orientation phase,” but far more hands-on than I expected. I didn’t just watch tutorials—I:

Installed VS Code and customised my dev environment
Learned terminal basics like cd, mkdir, touch
Set up Git and pushed my first repo to GitHub

Key takeaway: I went from fearing the command line to using it daily.

# First Git push ever!
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/myusername/my-first-repo.git
git push -u origin main

Phase 1: JavaScript

This is where I started feeling like a “real” developer. I grasped:

Variables, functions, loops
DOM manipulation
Events and callbacks
Debugging with console logs and breakpoints

Project Highlight: A click-based counter app with like/dislike buttons and a reset function.

let count = 0;

document.getElementById("likeBtn").addEventListener("click", () => {
  count++;
  updateDisplay();
});

document.getElementById("resetBtn").addEventListener("click", () => {
  count = 0;
  updateDisplay();
});

function updateDisplay() {
  document.getElementById("countDisplay").textContent = count;
}

Reflection: Learning by doing was key. Seeing a button respond to my code was incredibly motivating!

Phase 2: React

React took things to a whole new level. Concepts like component trees, props, and state were game-changers. I also explored:

React Router for multi-page UIs
useEffect for lifecycle logic
useState for managing data
Lifting state up to manage shared data

Project: A Movie & TV Database Search App using the OMDb API.

function SearchResults({ results }) {
  return (
    <div className="movie-grid">
      {results.map(movie => (
        <div key={movie.imdbID} className="movie-card">
          <img src={movie.Poster} alt={movie.Title} />
          <h3>{movie.Title}</h3>
        </div>
      ))}
    </div>
  );
}

Refactoring Win: After receiving feedback, I modularised components and removed inline styles for a cleaner, more reusable codebase.

Phase 3: Python

Python was a breath of fresh air—elegant and readable. I learned:

Lists, dictionaries, sets
Writing functions with default and keyword arguments
Object-Oriented Programming (OOP)
Creating and managing files with Python

Mini Project: A simple CLI task manager.

tasks = []

def add_task(task):
    tasks.append(task)

def show_tasks():
    for i, task in enumerate(tasks, 1):
        print(f"{i}. {task}")

add_task("Finish blog post")
show_tasks()

Reflection: Python taught me how to write maintainable, scalable code.

Phase 4: Flask

Everything came together here. I built full REST APIs, connected to databases, and implemented CRUD operations using SQLAlchemy. Key topics included:

Flask Blueprints and Jinja templating
Authentication using Flask-Login
SQLAlchemy ORM and relationships
Fetching data via AJAX to update the frontend in real-time

Phase 4 Project: A Power Plan Comparison App

→ React frontend (Netlify) + Flask backend (Render)

# Flask route to fetch plans by postcode
@app.route('/api/plans/<postcode>')
def get_plans(postcode):
    plans = Plan.query.filter_by(postcode=postcode).all()
    return jsonify([plan.to_dict() for plan in plans])

// React: fetch plans and update state
useEffect(() => {
  fetch(`/api/plans/${postcode}`)
    .then(res => res.json())
    .then(data => setPlans(data));
}, [postcode]);

Challenge: Handling CORS, sessions, and syncing frontend/backend data

Win: Successfully deployed a full-stack app using free-tier cloud services.

Phase 5: Final Project – Job Management System

This is where it all comes together. For my final project, I’m developing a Job Management System designed to streamline the workflow between admins, contractors, and technicians.

Key Features:

Full authentication flow (register/login/logout with session handling)
Role-based dashboard views (admin, contractor, technician)
Job assignment and status tracking (e.g. pending, in-progress, completed)
Signature capture and job detail updates
Usage of modals for editing, reviewing, and job creation

Technologies Used:

Frontend: HTML, CSS, JSX, modular ES6 structure
Backend: Flask, SQLAlchemy, Flask-Login
Database: SQLite (with future migration to PostgreSQL possible)
Deployment: Render (backend) + cPanel (frontend hosting)

Code Highlight:

# Flask route to assign a job to a contractor
@app.route('/api/jobs/<int:job_id>/assign', methods=['POST'])
@login_required
def assign_job(job_id):
    data = request.get_json()
    job = Job.query.get_or_404(job_id)
    job.assigned_contractor = data.get('contractor_id')
    db.session.commit()
    return jsonify(job.to_dict()), 200

// JavaScript: assign job via fetch
async function assignJob(jobId, contractorId) {
  const res = await csrfFetch(`/api/jobs/${jobId}/assign`, {
    method: "POST",
    body: JSON.stringify({ contractor_id: contractorId }),
  });
  const updatedJob = await res.json();
  updateJobDisplay(updatedJob);
}

Challenge: Ensuring role-based logic stayed consistent across backend and frontend

Win: A complete end-to-end application that integrates everything I’ve learned—from routing and database logic to authentication and UI feedback.

Final Thoughts

Each phase was more than a skill checkpoint—it was a mindset shift.

I became more confident in debugging and documentation
I learned to refactor, not just build
I saw the power of integrating frontend and backend into something functional and real

Whether it’s deploying a full-stack app or writing a clean for loop, I now have the tools, mindset, and portfolio to step into the next phase: the professional developer world.

Getting Started with Flask: A Lightweight Framework for Building Web Apps in Python

jlo128456 — Sun, 11 May 2025 11:23:26 +0000

If you're learning Python and want to dip your toes into web development, Flask is one of the best frameworks to start with. It's lightweight, flexible, and easy to learn — making it perfect for building anything from simple websites to full-featured web applications.

In this post, you'll learn what Flask is, why it's popular, and how to get started with a working example.

What is Flask?

Flask is a micro web framework written in Python. It’s called “micro” not because it lacks features, but because it aims to keep the core simple and extendable.

"Flask gives you the tools, but you’re in charge of the architecture."

Flask doesn't come with built-in ORM, form validation, or authentication — but it integrates easily with extensions like SQLAlchemy, WTForms, and Flask-Login.

Why Choose Flask?

Minimal and Flexible – You decide how to structure your app.
Beginner-Friendly – Easy to read and learn, especially if you're already familiar with Python.
Extensible – Add only what you need via extensions.
Active Community – Tons of tutorials, docs, and third-party tools.

Installing Flask

First, set up a virtual environment (recommended):

python3 -m venv venv
source venv/bin/activate  # macOS/Linux
# OR
venv\Scripts\activate     # Windows

Then install Flask:

pip install Flask

Your First Flask App

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, Flask!"

if __name__ == "__main__":
    app.run(debug=True)

Save this as app.py and run:

python app.py

Visit http://127.0.0.1:5000/ in your browser, and you’ll see:

Hello, Flask!

Routing in Flask

@app.route("/about")
def about():
    return "This is the about page."

@app.route("/user/<username>")
def profile(username):
    return f"Hello, {username}!"

Live Demo: Flask + React Power Plan App

Want to see a real Flask app in action?

Try the live Power Plan Finder app here

This full-stack project uses Flask for the backend and React for the frontend. You can sign up, enter your usage history, and explore electricity plans — all built using the concepts discussed in this post.

Flask Folder Structure (Example)

Once your app grows, organize it like this:

myapp/
├── app.py
├── templates/
│   └── home.html
├── static/
│   └── style.css
└── requirements.txt

You can render templates using:

from flask import render_template

@app.route("/")
def home():
    return render_template("home.html")

Adding More: Extensions

Flask supports many extensions, such as:

Flask-SQLAlchemy – ORM for database access
Flask-WTF – Form validation
Flask-Login – User authentication

Install one like this:

pip install flask-sqlalchemy

When to Use Flask

Use Flask if:

You want full control over your app’s structure
You’re building a small-to-medium web app or API
You want to learn web development fundamentals without relying on a large framework

Final Thoughts

Flask is a great choice for developers who enjoy simplicity, clarity, and control. It’s especially well-suited for:

REST APIs
Admin dashboards
Personal projects
Prototyping MVPs

If you’re comfortable with Python and want to start building web applications, Flask is the perfect next step.

Python vs Other Programming Languages: What Sets It Apart?

jlo128456 — Sat, 03 May 2025 07:12:17 +0000

As someone who recently wrapped up a CLI project using Python and SQLAlchemy, I wanted to take a step back and reflect on why Python continues to be such a dominant language and how it compares to other popular programming languages.

Whether you're just getting into programming or deciding what language to use for your next project, here's a practical breakdown of how Python stacks up against JavaScript, Java, C++, and Go — with real code examples.

Why Python Is So Popular

Readable Syntax

Python’s syntax is so intuitive and close to natural English that it’s ideal for beginners and makes maintaining code over time significantly easier.

Huge Ecosystem

Libraries like pandas, SQLAlchemy, Flask, Django, scikit-learn, and click make Python extremely versatile.

Cross-Disciplinary Appeal

From data science and machine learning to automation and backend web development, Python is everywhere.

Syntax Comparison: Python vs Others

Python vs JavaScript

Python

# Define a function in Python
def greet(name):
    return f"Hello, {name}!"

print(greet("Alice"))

JavaScript

// Define a function in JavaScript
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice"));

As demonstrated above, Python is simpler and easier to read, with consistent indentation-based blocks.

Python vs Java

Python

class Book:
    def __init__(self, title):
        self.title = title

    def display(self):
        print(f"Book: {self.title}")

book = Book("1984")
book.display()

Java

public class Book {
    private String title;

    public Book(String title) {
        this.title = title;
    }

    public void display() {
        System.out.println("Book: " + title);
    }

    public static void main(String[] args) {
        Book book = new Book("1984");
        book.display();
    }
}

As demonstrated in the examples above, Python is significantly more concise, enabling developers to write less code to accomplish the same tasks. In contrast, Java is more verbose, but offers greater robustness and type safety through its strong static typing and structured syntax.

Python vs C++

Python

for i in range(5):
    print(i)

C++

#include <iostream>
using namespace std;

int main() {
    for (int i = 0; i < 5; i++) {
        cout << i << endl;
    }
    return 0;
}

As shown in the code above, Python handles memory management and data types automatically, which makes development easier and faster. In contrast, C++ requires the programmer to manage these details manually, offering more control but also adding complexity.

Python vs Go

Python

import threading

def print_hello():
    print("Hello from thread!")

thread = threading.Thread(target=print_hello)
thread.start()

package main
import (
    "fmt"
    "time"
)

func main() {
    go func() {
        fmt.Println("Hello from goroutine!")
    }()
    time.Sleep(1 * time.Second)
}

As shown in the example above, Go has built-in support for concurrency through goroutines, making it lightweight and efficient for parallel tasks. In contrast, Python relies on external modules like threading or asyncio to achieve similar functionality.

Feature Comparison Table

Feature	Python	JavaScript	Java	C++	Go
Syntax Simplicity	Very Simple	Flexible	Verbose	Complex	Clean
Speed	Slower	Fast (Node)	Faster	Native Fast	Compiled
Concurrency	async/threading	async	Threads	Manual	Goroutines
Use Cases	CLI, AI, Web	Web, UI	Enterprise, Android	Systems, Games	APIs, Cloud

Real-World Use: My Phase 3 CLI Project

In my Phase 3 project, I built a CLI-based personal library manager using Python, SQLAlchemy, and Click. Here's a simple example from that project:

@click.command()
def list_books():
    with get_db_session() as session:
        books = session.query(Book).all()
        for book in books:
            print(book.title)

It was quick, elegant, and highly maintainable — and Python made the process enjoyable.

When to Choose Python

Choose Python when you want:

Quick development
Clean, readable code
Access to powerful data or web libraries
Great community support

It's especially well-suited for:

CLI tools
APIs
Machine learning
Automation scripts

Final Thoughts

No language is "better" — it all comes down to the right tool for the job. But Python's balance of simplicity, power, and community makes it a reliable default for many developers.

If you're new to programming or building something quick and powerful, Python is a fantastic place to start.

Why You Should Hide Your API Key: Best Practices for Cybersecurity

jlo128456 — Wed, 18 Sep 2024 09:26:57 +0000

As businesses and developers increasingly rely on APIs (Application Programming Interfaces) to connect various services and applications, API keys have become a vital part of modern software development. These keys allow developers to access data, resources, and third-party services, enabling seamless communication between different systems. However, while API keys are essential, they can also pose a significant security risk if not handled correctly in the code.

This is why hiding your API keys is crucial to ensuring the security of your applications. In this post, I’ll explain what API keys are, why securing them is so important, and share some of the best practices, including why I hide my API keys to protect them from unauthorised access.

What Are API Keys?

API keys are unique random strings of characters provided by a service or platform. These keys are used to authenticate a user or application making a request to an API. When a user or application requests data or services from another platform through an API, the API key acts as a form of identification that proves the request is authorised.
For example, if your front-end application uses a weather API to pull real-time data, the request will include a unique key to authenticate your access to the weather services. Without the correct key, the API will deny access, much like how a password works.

The Risk of Exposing API Keys

API keys often hold elevated permissions within systems. If someone gains access to your API key, they could exploit it in multiple ways. Below are some examples of potential risks:

1.Unauthorised Access: A malicious user could use your exposed API key to gain access to data, services, and other resources that the key permits. This could lead to unauthorised access to sensitive information, or actions meant only for authorised users.

2.Data Theft: If your API key grants access to sensitive data, such as customer information or financial details, an exposed key could be used to steal this data, leading to a significant security breach.

3.Rate Limiting Violations: Most APIs impose rate limits, restricting the number of requests an application can make within a specific time period. An attacker could use your key to spam the API, exceeding the limit. This could result in costly outcomes, such as service suspension or additional charges.

4.Financial Loss: If you’re not using a free API, many APIs operate on a pay-per-request basis. An attacker abusing your key to make thousands or millions of requests could lead to significant financial costs.

Given these risks, hiding your API key from prying eyes is essential. But how can you keep your API keys secure? Below are some best practices to ensure the safety of your keys.
Best Practices for Hiding API Keys

1.Environment Variables: One of the best ways to secure API keys is by using environment variables. These allow developers, to store sensitive data outside of the codebase securely. This means you can reference the key without hardcoding it directly into the script, keeping sensitive information safe from exposure. In Node.js, for example, you can use the dotenv package to load environment variables from a .env file.
Example of .env file

SERPSTACK_API_KEY="**************"
replace "****" with actual API key

Setting up Sever.js for use of environment Variable after installing dotenv packing

require('dotenv').config();
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;

app.use(express.static('public')); // Serve static files from the 'public' directory

app.get('/api/search', async (req, res) => {
    const query = req.query.q || 'html, javascript, css, react, programming, coding';
    const apiUrl = `http://api.serpstack.com/search?access_key=${process.env.SERPSTACK_API_KEY}&query=${query}&engine=google&type=web&device=desktop&location=new york&google_domain=google.com&gl=us&hl=en&page=1&num=25&output=json`;

    try {
        const response = await axios.get(apiUrl);
        res.json(response.data);
    } catch (error) {
        res.status(500).send('Error fetching data');
    }
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

By adding your .env file to .gitignore, you ensure that your API key doesn’t get pushed to your version control system, such as GitHub.

After creating .env file, you must create another file called 
.gitignore and first line code must look like this
1 .env

2.Server-Side Calls: Another way to reduce the risk of exposing your API key is to move the API call to your backend server rather than making it directly from the client-side code. By doing this, the API key is kept hidden from the user's browser, reducing the chance of exposure through client-side code inspection.

3.Use OAuth Instead of API Keys: In some cases, switching to an alternative authentication method like OAuth may be beneficial. OAuth provides a more secure and flexible way to manage access by using token-based authentication, allowing for more granular permissions and expiry options. Additionally, tokens can be scoped to specific permissions, meaning an attacker cannot access everything if a token is compromised.

4.Rotate API Keys Regularly: API key rotation is the practice of periodically generating new API keys and deactivating old ones. This limits the potential damage if a key is compromised. While frequently updating API keys may be inconvenient and time-consuming, doing so significantly reduces the window of opportunity for attackers to exploit a leaked key.

Conclusion
Hiding your API key is not just a best practice; it’s essential for maintaining the security and integrity of your application. Exposing your API key invites unauthorised access, potential data breaches, and even financial losses. I hope this post encourages you to take the necessary steps to secure your API key and protect your application.