Posts

Featured post

Ionic app with a Django backend: Part 2 - The Ionic app

Image
In this post, I will continue from where we left in Part 1 of this series.  In part 2, I will talk more about the front-end side of things. Ahh, I have a background in web development, hence I call this front-end, but that's not the most accurate thing to say in these modern times. So the right way to say this is, I will talk about the Ionic app in this Github repository(IonicAppWithRestBackend) in more details in this post. So what did we do in part 1? In part 1, we got to the point of running our backend on the web server that ships with Django . To refresh your memory, this is how we got the backend server running, Clone the repo git clone https://github.com/cptdanko/IonicAppWithRestBackend Navigate to the backend project directory cd IonicAppWithRestBackend/backend/python_django/restBackend/ Note: if you are using Windows, you may want to change "/" to "\" in the above command. Once there you can run the backend server with the follow...

Getting Started with Vue.js — A Lightweight Framework for Building Modern Web Apps

If you’re looking for a fast, flexible, and easy-to-learn front-end framework , look no further than Vue.js . In this guide, we’ll explore what makes Vue.js one of the most popular tools for building dynamic, modern web applications , how to get started with it, and how it compares to other frameworks like React and Angular . Whether you’re a beginner or a professional front-end developer, this article will help you understand why Vue.js stands out in the modern web development landscape. What is Vue.js? Vue.js is an open-source JavaScript framework used for building user interfaces and single-page applications (SPAs) . Created by Evan You , Vue focuses on being progressive , meaning you can adopt it gradually — from adding interactivity to an existing web page to building full-scale applications. What makes Vue.js special is its lightweight nature — the entire framework is just around 20 KB gzipped , which ensures fast load times and excellent performance , even on low-end...

Getting Started with Angular 18 (2025): A Complete Beginner’s Guide to Directives, Two-Way Data Binding, and How It Compares with React and Vue

Introduction If you’re stepping into modern front-end development in 2025, you’ve probably heard of Angular , React , and Vue — the three giants powering the web today. Angular, built and maintained by Google , remains a top choice for scalable enterprise applications and robust single-page apps (SPAs). This tutorial is your step-by-step beginner’s guide to getting started with the latest version — Angular 18 (as of 2025). We’ll cover how to set up your first project, create custom directives , understand two-way data binding , and compare Angular with ReactJS and VueJS. 🧭 What Is Angular? Angular is a TypeScript-based front-end framework designed for building dynamic, modular, and reactive web applications. Unlike React (a library) or Vue (a progressive framework), Angular provides a complete solution — including routing, forms, HTTP communication, and dependency injection — right out of the box. Some standout Angular features include: 🧩 Modular architecture using co...

Build a React Shopping Cart with MUI & Tailwind CSS (2025 Guide)

Image
In the competitive landscape of e-commerce, a fast, responsive, and visually appealing shopping cart is crucial. For developers, building such an interface efficiently is key. React provides the foundation for dynamic user interfaces, but its true potential is realized when paired with powerful component and styling libraries. This comprehensive tutorial will walk you through building a modern React shopping cart application from the ground up. We will harness the power of **Material-UI (MUI)** for its rich set of ready-to-use components and **Tailwind CSS** for its incredible utility-first styling workflow. To create a truly modern and performant app, we will extensively use **React Hooks** to manage state, side effects, and memoized computations. By following this guide, you'll gain a practical understanding of how to architect a core e-commerce feature, resulting in a scalable and professional looking React application that excels in both performance and user experience. Why MUI...

Build a Local Train Journey Planner App Using React.js — Manage State with Hooks and Context API

Image
Planning daily and weekend city commutes can be frustrating — especially when juggling multiple train routes or frequent schedule changes. In this guide, we’ll build a simple Local Train Journey Planner App using React.js , where users can create, view, and manage their train journeys. You’ll learn how to use React Hooks to manage state , share state across components using the React Context API , and understand how React compares to other modern front-end frameworks like Angular and Vue.js. This tutorial focuses purely on the front-end , so you can easily integrate it with your backend later if you choose to extend it. 🚀 What We’ll Build We’re going to create a React app that allows users to: Add new train journeys (source, destination, and date). View a list of planned journeys. Delete or update existing trips. Manage the state locally using React Hooks and Context API. This app will simulate a real-world journey planner UI , ideal for local train commutes duri...

Upload to AWS S3 from Java API

In this post, you will see code samples for how to upload a file to AWS S3 bucket from a Java Spring Boot app. The code you will see here is from one of my open-source repositories on Github, called document-sharing. Problem Let’s say you are building a document sharing app where you allow your users to upload the file to a public cloud solution. Now, let’s say you are building the API for your app with Spring Boot and you are using AWS S3 as your public cloud solution. How would you do that? This blog post contains the code that can help you achieve that. Read more below,  Upload to AWS S3 bucket from Java Spring Boot app - My Day To-Do (mydaytodo.com)

Spring Boot, MongoDB and reactive API

If you are a Java programmer chances are that you have worked with Spring Boot and you may or may not have heard of project reactor, WebFlux etc. In case you haven’t, then Spring Project Reactor is a spring library with which you can build Spring Reactive systems i.e. asynchronous or non-blocking APIs. This post will avoid getting into too many details for reactive systems as that topic deserves it’s own dedicated blogpost. I will write that sometime in the future. Hence, this post will focus on integration with Spring via frameworks and other implementation details. In this post you will build a reactive Spring API using WebFlux that saves data in MongoDB and manages it using Spring data-mongodb-reactive. You can read the full article below How to build a Spring Reactive API - My Day To-Do (mydaytodo.com)

Adding JWT Security to Java Spring Boot API

  JSON Web Token (JWT) pronounced “jat” is an authentication and authorization widely used in modern apps. In this mechanism, when the user logs in with their credentials, the server generates a unique key called the JWT token that it sends to the client. The client would then include the JWT token in the header when it sends a request to a protected endpoint on the server. The server would then verify the JWT token before sending a response to the client. In this tutorial, you will see code samples for how to add JWT security to Java Spring Boot API. The code samples provided here are from a sample project on Github, the link for which will be included in this post. Before starting with the code samples, it would be beneficial to understand JWT in a bit more. You can read more here How to add JWT security to Java Spring Boot API - My Day To-Do (mydaytodo.com)