Praport

Version 1 – Learnings

Version 1 of Praport was not just a product — it was a learning experience from end to end. I had no prior background in web development, no experience in backend logic, no clue about hosting, and only a basic grasp of HTML. Everything I know now started with building this version.

From writing the first line of HTML to deploying a live Flask web app with user authentication, real-time tracking data, and Excel exports — this version taught me every fundamental piece of how a modern web tool is built.

First landing page screenshot
Praport V1 landing page — basic, functional, and the foundation for everything that followed.

What I Built

At its core, V1 was a working DHL shipment tracking dashboard built from scratch with no frameworks that users could:

  • Register and log in securely (with password hashing).
  • Enter tracking numbers and receive live status updates.
  • See a dashboard table with filters, pagination, and counters.
  • Export data to Excel with one click.
  • Read an integrated onboarding guide directly in the UI.

Technical Skills Gained

Along the way, I learned how to:

  • Use HTML, CSS, and vanilla JavaScript to build interactive user interfaces.
  • Leverage DataTables.js to enhance static HTML tables with dynamic behavior.
  • Use Flask to create Python-powered web servers, define routes, handle requests, and manage templates.
  • Implement password encryption with Werkzeug to protect user data.
  • Store and retrieve data using SQLite, including schema design and SQL queries.
  • Build API endpoints to receive and process JSON, and return structured responses.
  • Deploy a live site using PythonAnywhere, including file management, domain linking, and HTTPS setup.

Mindset Shifts

I also learned something more important than syntax: how to release something before it's perfect. How to test real functionality instead of chasing pretty designs. And how to solve problems by first-hand debugging, not just watching tutorials.

Every frustrating error or broken page helped me better understand how things fit together: how the frontend talks to the backend, how the backend talks to the database, and how the browser talks to everything via HTTP.

What I’d Do Differently

While V1 achieved its goals, I now see its limitations:

  • Structure the frontend with a modern framework like React or Next.js.
  • Use a real production-grade database like PostgreSQL or no-code/web based database, such as Supabase.
  • Integrate proper logging and error monitoring tools.
  • Separate logic more clearly between views, models, and controllers.

Conclusion

Praport V1 was raw, hand-written, and lightweight — but it was real. It helped me learn everything from how to structure HTML to how to respond to a user’s POST request on a live server.

Intro (v2)