DEV Community

jlo128456
jlo128456

Posted on

Phase by Phase: How Academy XI Shaped My Final Project

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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])
Enter fullscreen mode Exit fullscreen mode 
// React: fetch plans and update state
useEffect(() => {
  fetch(`/api/plans/${postcode}`)
    .then(res => res.json())
    .then(data => setPlans(data));
}, [postcode]);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
// 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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)