DEV Community: Birusha Ndegeya

Building a Dynamic Cat Facts API with Node.js and Express

Birusha Ndegeya — Thu, 16 Oct 2025 20:01:31 +0000

Introduction

In this HNG Stage Zero backend task, I built a simple RESTful API using Node.js and Express that serves user profile information combined with dynamic cat facts from an external API. The goal was to demonstrate API integration, error handling, and best practices in backend development.

Work Process

Planning: Outlined requirements for two endpoints (/ and /me), integrated cat facts API, and added features like rate limiting, CORS, and logging.
Setup: Initialized a Node.js project with Express, configured environment variables, and set up dependencies (express, cors, express-rate-limit, dotenv).
Implementation:
- Created the main index.js with Express app, middleware, and routes.
- Built a utility function get-fact.js for fetching cat facts with timeout and error handling.
- Added request logging and structured JSON responses.
Testing: Manually tested endpoints with curl, verified error scenarios, and ensured proper deployment on Vercel.
Deployment: Configured for Vercel serverless functions and added Docker support.

What I Learned

API Integration: Handling external APIs with proper error handling, timeouts, and fallbacks.
Middleware Usage: Implementing rate limiting and CORS for security and usability.
Environment Management: Using dotenv for configuration in different environments.
Serverless Deployment: Adapting code for Vercel with export default and conditional local server.
Best Practices: Structured code, JSDoc comments, and comprehensive README documentation.

Code Snippets

Main App Setup

import express from "express";
import cors from "cors";
import rateLimit from "express-rate-limit";
import dotenv from "dotenv";
import { getFact } from "./utils/get-fact.js";

const app = express();
app.use(cors());
const limiter = rateLimit({ windowMs: 15 * 60 * 1000, max: 100 });
app.use(limiter);
dotenv.config();

/me Endpoint

app.get("/me", async function (req, res) {
  try {
    const fact = await getFact(process.env.FUN_FACT_API || 'https://catfact.ninja');
    res.json({
      status: "success",
      user: { email: "birushandegeya@gmail.com", name: "Birusha Ndegeya", stack: "Node.js/Express" },
      timestamp: new Date().toISOString(),
      fact: fact,
    });
  } catch (error) {
    res.status(500).json({ status: "error", message: "Failed to fetch cat fact" });
  }
});

Utility Function

export async function getFact(baseURL) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000);
  const response = await fetch(`${baseURL}/fact`, { signal: controller.signal });
  clearTimeout(timeoutId);
  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  const data = await response.json();
  return data.fact;
}

Conclusion

This project reinforced my skills in building scalable APIs and integrating third-party services. The experience highlighted the importance of robust error handling and security measures in backend development. Check out the full code on GitHub and try the live API!

hng #nodejs #express #api #backend #hng-stage-zero

Mastering UI/UX Design Principles

Birusha Ndegeya — Fri, 07 Mar 2025 11:21:21 +0000

Mastering UI/UX Design Principles

Creating intuitive and user-friendly digital experiences requires a deep understanding of UI/UX design principles. This guide explores essential methodologies that will elevate your design skills and help you craft seamless user experiences.

1. Understanding UI vs. UX

User Interface (UI): Focuses on the aesthetics and interactive elements of a product (buttons, typography, colors, icons, etc.).
User Experience (UX): Encompasses the overall feel of the experience, including usability, accessibility, and user satisfaction.

2. Key UI/UX Design Principles

Consistency

Maintain uniform design elements across the interface (buttons, typography, spacing, colors, etc.).
Use design systems like Material Design or Apple’s Human Interface Guidelines to ensure consistency.

Simplicity & Clarity

Avoid unnecessary elements that could overwhelm users.
Ensure content is easy to read and understand.
Provide clear visual hierarchy to guide users naturally.

Usability & Accessibility

Design for all users, including those with disabilities.
Follow WCAG (Web Content Accessibility Guidelines) for better accessibility.
Ensure interactive elements are easily tappable/clickable.

Visual Hierarchy

Use contrast, size, and positioning to indicate importance.
Guide users’ attention to key actions (CTA buttons, forms, etc.).

Feedback & Response

Provide instant feedback for user actions (button clicks, form submissions, loading states, etc.).
Use microinteractions and animations to enhance user engagement.

Mobile-First & Responsive Design

Prioritize mobile usability before scaling to larger screens.
Implement fluid grids and flexible layouts for responsiveness.

User-Centered Design

Conduct user research to understand target audience needs.
Use wireframes and prototypes to test and iterate designs.

Performance & Speed

Optimize images and assets to reduce loading time.
Ensure smooth interactions and avoid unnecessary animations that slow performance.

3. UI/UX Design Methodologies

Design Thinking

A human-centered approach to solving design problems through:

Empathize – Understand user needs.
Define – Identify user problems.
Ideate – Brainstorm solutions.
Prototype – Create interactive models.
Test – Validate with real users.

Lean UX

Focuses on rapid prototyping and testing with minimal effort.
Encourages collaboration between designers, developers, and stakeholders.

Agile UX

Integrates UX design within Agile development workflows.
Iterative design process with continuous feedback and improvements.

4. Tools for UI/UX Design

Wireframing & Prototyping: Figma, Sketch, Adobe XD, Balsamiq
User Testing: Hotjar, UsabilityHub, Maze
Design Systems & Libraries: Material UI, Tailwind CSS, Bootstrap

Conclusion

Mastering UI/UX principles ensures that digital experiences are not only visually appealing but also user-friendly and efficient. By applying consistency, simplicity, accessibility, and user-centered methodologies, designers can create impactful and meaningful products. Keep refining your skills, stay updated with trends, and always prioritize the end-user experience.

By mastering these principles, you can build designs that truly resonate with users and drive engagement.

Understanding the CNN Algorithm

Birusha Ndegeya — Mon, 20 Jan 2025 10:10:39 +0000

Understanding the CNN Algorithm (Convolutional Neural Networks)

Convolutional Neural Networks (CNNs) are a cornerstone of modern machine learning, particularly in computer vision tasks such as image recognition, object detection, and facial recognition. CNNs are inspired by the human visual system, designed to identify patterns and features in data hierarchically.

How CNNs Work

1. Convolutional Layers

The core component of a CNN, convolutional layers, applies filters to the input data to extract features like edges, shapes, and textures.
Each filter slides over the input, performing a mathematical operation (convolution) to produce feature maps.

2. Pooling Layers

Pooling layers reduce the dimensionality of feature maps, making the network computationally efficient and resilient to minor variations in input data.
Common pooling techniques include max pooling (selecting the maximum value in a region) and average pooling.

3. Fully Connected Layers

These layers connect all neurons and process extracted features to make final predictions.

4. Activation Functions

Functions like ReLU (Rectified Linear Unit) introduce non-linearity, enabling the network to learn complex patterns.

Applications of CNNs

Image Classification: Recognizing objects in photos (e.g., cats, cars).
Object Detection: Identifying and locating multiple objects in an image.
Medical Imaging: Detecting anomalies in X-rays or MRIs.
Natural Language Processing: Tasks like sentiment analysis or handwriting recognition.

Advantages of CNNs

Automatic feature extraction reduces the need for manual engineering.
Effective in handling large and complex datasets.

CNNs have revolutionized machine learning and continue to play a pivotal role in advancing AI-powered technologies. With ongoing research, they are becoming even more powerful and versatile.

Understanding TypeScript: A Friendly Guide

Birusha Ndegeya — Thu, 08 Aug 2024 10:03:07 +0000

Understanding TypeScript: A Friendly Guide

Hi there! I’m Birusha Ndegeya, a software developer passionate about building robust and maintainable applications. Today, I want to share some insights into TypeScript, a powerful tool that can transform the way you write JavaScript.

What is TypeScript?

TypeScript is a superset of JavaScript that adds optional static typing. This means you can add type annotations to your code, which helps you catch errors early and makes your code more readable and maintainable.

How Does TypeScript Work?

Compilation: TypeScript code isn’t directly executed by browsers. Instead, it’s compiled into plain JavaScript using a compiler like tsc. This compiler checks for type errors and generates JavaScript code that browsers can run.
Type System: The core of TypeScript is its type system. Types help define what kind of data a variable can hold. Some common types include:
- number: Represents numbers.
- string: Represents text.
- boolean: Represents true or false values.
- array: Represents a list of values of a specific type.
- object: Represents a collection of key-value pairs.
Type Inference: TypeScript is smart enough to infer types in many cases, so you don’t always need to explicitly specify them.
Interfaces & Classes: TypeScript provides interfaces to define the structure of an object and classes to create reusable components.
Generics: TypeScript allows you to create reusable components that can work with different types, making your code more flexible and efficient.

When to Use TypeScript

While TypeScript is a powerful tool, it’s not always the right choice. Here’s when you should consider using it:

Large Projects: TypeScript is ideal for large and complex projects where maintainability and code quality are crucial. The type system helps prevent bugs and makes the code easier to understand and modify.
Teams: When working in a team, TypeScript improves collaboration by enforcing consistent coding styles and ensuring everyone understands the codebase.
Code Reusability: TypeScript encourages code reuse through interfaces and generics, making it easier to build modular and maintainable applications.
Improved IDE Support: TypeScript integrates well with IDEs, providing features like autocompletion, type checking, and code navigation.

Alternatives to TypeScript

While TypeScript is popular, other alternatives exist:

Flow: A static type checker for JavaScript that aims to provide similar benefits to TypeScript.
ReasonML: A functional language that compiles to JavaScript and provides strong typing and other features like immutability.
PureScript: A functional language that compiles to JavaScript and focuses on immutability and strong types.

The Importance of TypeScript

Using TypeScript offers significant advantages:

Improved Code Quality: Type checking helps catch errors before runtime, reducing bugs and improving code reliability.
Increased Maintainability: TypeScript’s strong typing makes code easier to understand and maintain, especially in large projects.
Better Developer Experience: IDEs provide enhanced features like autocompletion and type checking, leading to faster development cycles.
Enhanced Collaboration: TypeScript enforces consistent coding styles and makes it easier for teams to work together.

When Not to Use TypeScript

Small, Simple Projects: The overhead of writing type annotations may not be worth it for small, simple scripts.
Projects with Tight Deadlines: The additional compilation step can slightly increase development time.
Projects with Limited Resources: TypeScript requires a steeper learning curve and may require additional tooling.

Conclusion

TypeScript is a powerful tool for building robust, maintainable, and scalable applications. However, it’s important to carefully consider the pros and cons before adopting it for your project. If you’re working on a large or complex application, or if you value code quality and maintainability, TypeScript can be a valuable asset. Ultimately, the decision to use TypeScript depends on the specific needs and constraints of your project. Carefully evaluate the pros and cons to make the best choice for your development environment.

I hope this guide helps you understand the basics of TypeScript and its benefits. Happy coding!

Feel free to reach out if you have any questions or need further clarification. I'm always here to help fellow developers on their coding journey!

My internship journey at HNG

Birusha Ndegeya — Tue, 02 Jul 2024 07:59:27 +0000

Hello everyone 👋 👋, I am Birusha Ndegeya, a software developer passionate about Node.js. Recently, I've been working on a project that involves authentication and authorization for a game designed to help students learn by having fun. The challenging part of this project was managing the authentication and authorization of students and ensuring the scalability of my database.

To start, I created user and course models with Prisma:

Created a model for users
Created a model for courses

In order to grow and become a competitive backend developer, being part of a community where I can share experiences with other developers is essential. That's why I started my journey with an internship at HNG. You can learn more about it hng-internship and hng-hire.

This internship is a step towards becoming more proficient in every job I take on, and I am eager to improve my backend development skills through this experience.

Thank you for reading about my journey!

Happy Coding... 🚚🚚🚚🚀🚀🚀🚀

My Journey Internship at Kali Academy

Birusha Ndegeya — Fri, 14 Jun 2024 08:08:55 +0000

I am Birusha Ndegeya, a student software developer specializing in web and mobile apps at Kadea Academy in Goma. During my three-month training at Kali Academy, I dedicated myself to an open-source project and was accepted to dive into the fascinating world of open source.

The internship started on May 11 and ended on June 11 in Goma, North-Kivu, Democratic Republic of Congo. The goal of this internship was to provide practical experience through concrete projects and to train participants on how to contribute to open-source projects and behave within a community.

The Progress of My Internship

The First Month: The Foundation

The first month of our internship was focused on establishing solid foundations. We followed a structured program to become "real" hackers, which included learning in public, using the Linux system, and mastering the command line interface (CLI). We also reviewed Git and GitHub, essential tools for any open-source developer. A highlight of this period was reading the book "Roads and Bridges: The Unseen Labor Behind Our Digital Infrastructure," which profoundly enlightened us about the importance and philosophy of open source.

The Second Month: Specialization in Wikimedia

The second month immersed us in the fascinating world of Wikimedia. We had a quick introduction to Wikipedia and Wikidata and learned how to customize Wikipedia by modifying themes, gadgets, and beta features. We deepened our skills in Wikicode and advanced editing, working on models and templates. We also learned how to create and use Wikidata tools such as the Wikidata REST APIs and SPARQL. This month was crucial for understanding how to effectively contribute to Wikimedia projects and become Mediawiki experts.

The Third Month: Final Projects

In the last month, we were divided into two groups to work on final internship projects. I had the opportunity to participate in an exciting project called "Wiki Data Query AI." This open-source software is designed to help users perform queries on Wikidata without needing to know the SPARQL language. Working on this project allowed me to apply all the skills acquired during the first two months and contribute to a truly innovative tool.

Impact and Reflection

This internship at Kali Academy was a transformative experience. I not only acquired valuable technical skills but also gained a better understanding of the importance of open source. Collaboration with my fellow interns and our mentors also helped me develop essential interpersonal skills, such as teamwork and communication.

I personally thank our mentors Abel Mbula, Delord, and other mentors for dedicating their time and efforts to our training. Along the way, I am truly grateful to my friends who were there to answer my questions. It was a great experience to be among those students. I truly thank them and am ready for other exciting challenges.

CLASSES | TS

Birusha Ndegeya — Wed, 12 Jun 2024 06:58:53 +0000

TypeScript Classes

TypeScript adds types and visibility modifiers to JavaScript classes.

Members: Types

The members of a class (properties & methods) are typed using type annotations, similar to variables.

class Person {
  name: string;
}

const person = new Person();
person.name = "Jane";

Members: Visibility

Class members also be given special modifiers which affect visibility.

There are three main visibility modifiers in TypeScript.

public - (default) allows access to the class member from anywhere
private - only allows access to the class member from within the class
protected - allows access to the class member from itself and any classes that inherit it, which is covered in the inheritance section below

class Person {
    private name: string;

    public constructor(name: string) {
        this.name = name;
    }
    getName(): string {
        return this.name;
    }
}

const person = new Person('Jane');
console.log(person.getName());
// console.log(person.name);  person.name isn't accessible from outside the class since it's private

Parameter Properties

TypeScript provides a convenient way to define class members in the constructor, by adding a visibility modifiers to the parameter.

class Person {
    public constructor(private name: string) {
        this.name = name;
    }
    getName(): string {
        return this.name;
    }
}

const person = new Person('Birusha');
console.log(person.getName());
// console.log(person.name); Property 'name' is private and only accessible within class 'Person'

Readonly

Similar to arrays, the readonly keyword can prevent class members from being changed.

class Person {
    readonly name: string;
    public constructor(name: string) {
        this.name = name;
    }
    getName(): string {
        return this.name;
    }
}

const person = new Person('John');
console.log(person.getName());
// person.name = 'Jill'; // Cannot assign to 'name' because it is a read-only property.

Inheritance: Implements

interface Shape {
    getArea: () => number;
}

class Rectangle implements Shape {
    public constructor (
        private readonly width: number,
        private readonly height: number
    ) {}

    getArea(): number {
        return this.width * this.height;
    }
}


const r = new Rectangle(4, 3);
console.log(r.getArea());

Inheritance: Extends

interface Shape {
    getArea: () => number;
}


class Rectangle implements Shape {
    public constructor(
        private readonly width: number,
        private readonly height: number
    ) {}

    getArea(): number {
        return this.width * this.height;
    }
}


class Square extends Rectangle {
    public constructor(width: number){
        super(width, width);
    }

    // getArea function is inherited
}

const s = new Square(40);
console.log(s.getArea());

Override

When a class extends another class, it can replace the members of the parent class with the same name.

Newer versions of TypeScript allow explicitly marking this with the override keyword.

interface Shape {
    getArea: () => number;
}


class Rectangle implements Shape {
    public constructor(
        public readonly width: number,
        private readonly heigth: number
    ) {}

    getArea(): number {
        return this.width * this.heigth;
    }

    public toString(): string {
        return `Rectangle[width=${this.width}, height=${this.heigth}]`;
    }
}


class Square extends Rectangle {
    public constructor(width: number) {
        super(width, width);
    }

    // get area function inherited here

    public override toString(): string {
        return `Square[width=${this.width}]`;
    }
}


const rectangle = new Rectangle(20, 4);
const square = new Square(30);
console.log(rectangle.toString());
console.log(square.toString());

Abstract Classes

Classes can be written in a way that allows them to be used as a base class for other classes without having to implement all the members. This is done by using the abstract keyword. Members that are left unimplemented also use the abstract keyword.

abstract class Polygon {
    public abstract getArea(): number;

    public toString(): string {
        return `Polygon[area=${this.getArea()}]`;
    }
}


class Rectangle extends Polygon {
    public constructor (
        private readonly width: number,
        private readonly heigth: number
    ) 
    {
        super();
    }

    public getArea(): number {
        return this.width * this.heigth;
    }
}

const r = new Rectangle(43, 34);
console.log(r.getArea());

TypeScript Function

Birusha Ndegeya — Wed, 22 May 2024 06:27:45 +0000

TYPESCRIPT FUNCTIONS

TypeScript has a specific syntax for typing function parameters and return values.

Return Type

function getTime(): number  {
   return new Date().getTime();
};

// with arrow function
const getFullYear = (): number => {
   return new Date().getFullYear();
}

const time: number = getTime();
const year: number = getFullYear();
console.log(time);
console.log(year);

Void Return Type

The type void can be used to indicate a function doesn't return any value.

function main (): void {
   console.log('Hello world');
}

// arrow functions

const bye = (): void => {
   console.log('Good bye! Crual World!');
}

main();
bye();

Parameters

Function parameters are typed with a similar syntax as variable declarations.


function multiply (a: number, b: number): number {
   return a * b;
}

// arrow function

const mult = (a: number, b: number): number => a *b;

const product: number = mult(148, 48);
const prod: number = multiply(5, 6);
console.log(product);
console.log(prod);

If no parameter type is defined, TypeScript will default to using any, unless additional type information is available as shown in the Default Parameters and Type Alias sections below.

Optional Parameters

By default TypeScript will assume all parameters are required, but they can be explicitly marked as optional.


function add (a: number, b: number, c?:number): number {
   return a + b + (c || 0);
}

// Arrow function

const addition = (a: number, b:number, c?:number): number => a + b + (c || 0);

const s: number = add(10, 38);
const sum: number = addition(12, 48, 39);
console.log(s);
console.log(sum);

Default Parameters

For parameters with default values, the default value goes after the type annotation:

function pow (value: number, exponent: number = 10): number {
   return value ** exponent;
}

// arrow function

const power = (value: number, exponent: number = 2): number => value ** exponent;

const resp: number = power(24, 3);
const result: number = pow(20);
console.log(result);
console.log(resp);

TypeScript can also infer the type from the default value.

Named Parameters

Typing named parameters follows the same pattern as typing normal parameters.


function divise({ dividend, divisor}: {dividend: number, divisor: number}): number{
   return dividend / divisor;
};

console.log(divise({ dividend: 20, divisor: 4}));

// or we can do this - long way

type ParameterType = {
   dividend: number;
   divisor: number;
};

const diviseN = ({ dividend, divisor }: ParameterType): number => dividend / divisor;

const args: ParameterType = {
   dividend: 204,
   divisor: 24,
};
console.log(diviseN(args));

Rest Parameters

Rest parameters can be typed like normal parameters, but the type must be an array as rest parameters are always arrays.

function add(a: number, b: number, ...rest: number[]) {
   return a + b + rest.reduce((p:number, c:number) => p + c, 0);
}

// arrow function

const addition = (a:number, b: number, ...rest: number[]): number => {
   return a + b + rest.reduce((ac: number, cv:number) => ac + cv, 0);
}
const arr = [1, 2, 3];
console.log(add(5, 3, ...arr));
console.log(addition(2, 3, ...arr));

Type Alias

Function types can be specified separately from functions with type aliases.

type Negate = (value: number) => number;

// in this function, the parameter `value` automatically gets assigned the type `number` from the type `Negate`
const negateFunction: Negate = (value) => -Math.abs(value);

console.log(negateFunction(48));

No-Primitives data type in TypeScript

Birusha Ndegeya — Wed, 24 Apr 2024 10:58:14 +0000

No-Primitive Type in TypeScript

Hello there 👋! I am Birusha Ndegeya.

Now you feel comfortable with those number, string and boolean data. now it time to move to some complex data types which are:
✅ arrays,
✅ object,
✅ tuples,
✅ enums,
✅ type,
✅ interface &
✅ enums.

I you want to play around the starter code you can visit my github project learn-typescript-data-type and switch to branch array-object-tuple-enum.

ARRAY

To create an array we need to create a variable that hold the data

// to create an empty array to takes any values
const arr: any [] = [10, true, "banana"];

console.log(arr); // output: 10, true, banana

String Array


const names: string[] = [];
names.push("Dylan"); // no error
// names.push(3); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

Readonly

The readonly keyword can prevent arrays from being changed.

const names: readonly string[] = ["Dylan"];
names.push("Jack"); // Error: Property 'push' does not exist on type 'readonly string[]'.
// try removing the readonly modifier and see if it works?

Type inference

TypeScript can infer the type of an array if it has values.

const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error
// comment line below out to see the successful assignment
numbers.push("2"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.
let head: number = numbers[0]; // no error

TypeScript Tuple

Known as Typed Arrays

A tuple is a typed array with a pre-defined length and types for each index.
Tuples are great because they allow each element in the array to be a known type of value.
To define a tuple, specify the type of each element in the array:


// define our tuple
let ourTuple1: [number, boolean, string];

// initialize correctly
ourTuple1 = [5, false, 'Coding God was here'];
S
// define our tuple
let ourTuple2: [number, boolean, string];

// initialized incorrectly which throws an error
ourTuple2 = [false, 'Coding God was mistaken', 5];

Readonly Tuple


// define our readonly tuple
const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, 'The Real Coding God'];
// throws error as it is readonly.
ourReadonlyTuple.push('Coding God took a day off');


let tuple: readonly [number, boolean];
/*
tuple.push(10);
tuple.push(true);

Throws an error
*/

// tuple = [10, true];

console.log(tuple);

If you have ever used React before you have worked with tuples more than likely.

useState returns a tuple of the value and a setter function.

const [firstName, setFirstName] = useState('Dylan');

Because of the structure we know our first value in our list will be a certain value type in this case a string and the second value a function.

Named Tuples

Named tuples allow us to provide context for our values at each index.


const graph: [x: number, y: number] = [55.2, 41.3];

console.log(graph);

Destructuring Tuples

Since tuples are arrays we can also destructure them.
Example

const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;
console.log(x, y);

TypeScript Object Types


const car: { type: string, model: string, year: number } = {
  type: "Toyota",
  model: "Corolla",
  year: 2009
};

TypeScript can infer the types of properties based on their values.


const car = {
  type: "Toyota",
};
car.type = "Ford"; // no error
car.type = 2; // Error: Type 'number' is not assignable to type 'string'.

Index signatures can be used for objects without a defined list of properties.

const nameAgeMap: { [index: string]: number } = {};
nameAgeMap.Jack = 25; // no error
nameAgeMap.Mark = "Fifty"; // Error: Type 'string' is not assignable to type 'number'.

Now, if you need a starter code, you can visit my GitHub profile.

Thanks for keeping up with the reading.

Happy coding! 🚀🚀🚚🚚🚚

Learn Primitives Types in TypeScript

Birusha Ndegeya — Thu, 11 Apr 2024 19:03:27 +0000

Learn Primitives Types in TypeScript

Hello there 👋! I am Birusha Ndegeya.

Learning TypeScript is crucial to understanding programming languages. TypeScript, being a superset of JavaScript, can be easily learned if you're familiar with JavaScript fundamentals. You can even choose TypeScript as your first programming language.

In this tutorial, we'll cover the basics of TypeScript, starting with data types. For those new to programming, knowing how to print something on a computer using TypeScript is essential. Let's start with a basic command:


console.log("Hello World"); // Output: Hello World

Let's dive deeper into understanding TypeScript primitive types.

To create a variable, we use the keywords let or const.

let name: string = "Jill";
const ID: number = 1;

To display these variables, we use the function:


console.log(name); // Output: Jill
console.log(ID); // Output: 1

We use const for values that never change, and by convention, we write them in uppercase. let is used when the value can change.

Now, let's explore the basic data types widely used in TypeScript:

string : Represents a chain of characters enclosed in double or single quotes.


let firstName: string = "Jimmy";
let lastName: string = 'Elijah';
// We can print them to the screen:
console.log(firstName); // Output: Jimmy
console.log(lastName); // Output: Elijah

// Checking the type:
console.log(typeof firstName); // Output: string
console.log(typeof lastName); // Output: string

boolean : Represents true or false values.


const isMale: boolean = true;
const isFemale: boolean = false;

// Printing them to the screen:
console.log(isMale); // Output: true
console.log(isFemale); // Output: false

// Checking the type:
console.log(typeof isMale); // Output: boolean
console.log(typeof isFemale); // Output: boolean

number Represents any numeric value, including whole numbers or decimal numbers.


let age: number = 30;
const GPA: number = 3.1;

// Printing them to the screen:
console.log(age); // Output: 30
console.log(GPA); // Output: 3.1

// Checking the type:
console.log(typeof age); // Output: number
console.log(typeof GPA); // Output: number

Additionally, a variable can hold multiple types:


let ID: number | string;
// Assigning it a number value:
ID = 1;
console.log(ID); // Output: 1
// Checking the type:
console.log(typeof ID); // Output: number

// Assigning it a string value:
ID = '01';
console.log(ID); // Output: 01

// Checking the type:
console.log(typeof ID); // Output: string

Now, if you need a starter code, you can visit my GitHub profile.

Thanks for keeping up with the reading.

Happy coding! 🚀🚀🚚🚚🚚

Object Oriented Programming in JavaScript.

Birusha Ndegeya — Fri, 29 Mar 2024 18:52:05 +0000

Understanding the basics of object-oriented programming (OOP) in JavaScript is crucial for software developers, especially those focused on front-end web development. Before diving into that, allow me to introduce myself. Hi 👋!, I'm Birusha Ndegeya. I was born in Goma, DR Congo, and I'm incredibly passionate about software development.

Completing this tutorial will enable you to grasp the four fundamental pillars of object-oriented programming:

✅ Encapsulation,
✅ Inheritance,
✅ Polymorphism, &
✅ Abstraction.

Understanding these concepts is crucial for becoming proficient in object-oriented programming, as they provide the building blocks for designing and implementing robust, maintainable, and scalable software solutions.

If you'd like to follow along with this tutorial, let's start by organizing our file structure and creating the necessary files: index.html, index.css, and index.js. Here's how you can set it up:

Create a folder for your project:

object-oriented-programming-basic

│   index.html
│   index.css
│   index.js

index.html: This will be your HTML file where you'll include references to your CSS and JavaScript files.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object-Oriented Programming Tutorial</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>Object-Oriented Programming Tutorial</h1>
    <!-- Content goes here -->
    <script src="index.js"></script>
</body>
</html>

index.css: This will be your CSS file where you can style your HTML elements.

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

index.js: This will be your JavaScript file where you'll write your code for the tutorial.

console.log("Hello World");

Retrieve starter code from GitHub:
If you have starter code on your GitHub, you can clone the repository or download the files and place them accordingly in your project folder.

With this organization, you have separate files for HTML, CSS, and JavaScript, which helps maintain a clean and modular structure for your project. You can now start coding along with the tutorial, implementing the concepts of object-oriented programming in JavaScript within the index.js file and styling your HTML elements using the index.css file.

With object-oriented programming, we aim to express entities that are not inherently defined in JavaScript. While JavaScript provides native types like strings, numbers, and objects, it lacks built-in constructs for representing real-world entities such as a person, an animal, or an airplane. Object-oriented programming bridges this gap by allowing us to define custom types or classes to represent these entities.

When creating a class, it's essential to start with the keyword class, and the naming convention should follow PascalCase, where the first letter is uppercase. This convention helps distinguish classes from variables and functions, enhancing code readability and maintainability.

class Person {
}
console.log(Person) // output [Class Person]

To begin utilizing the class, we must instantiate an instance of it.

class Person {

}

const comedian = new Person();
const musician = new Person();
console.log(comedian); // Person {}
console.log(musician); // Person {}

Now, we can assign properties to each person as values held by a person once created.

class Person {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
}

const comedian = new Person();
const musician = new Person();
console.log(comedian); // Person { name: undefined, age: undefined}
console.log(musician); // Person { name: undefined, age: undefined}

Then, you'll notice that the output is currently undefined. Now, we'll proceed to instantiate instances with specific values assigned.


class Person {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
}

const comedian = new Person("Birusha", 20);
const musician = new Person("Jill", 18);
console.log(comedian); // output Person { name: "Birusha", age: 20} 
console.log(musician); // output Person { name: "Jill", age: 18 }

A method is a function or the ability, such as a person having properties like name "Jill" and being able to perform actions like "go right" or "speak Swahili".

class Person {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }

   greet () {
      return `Hello my name is ${this.name} and I have ${this.age}`
   }
}

const comedian = new Person("Birusha", 20);
const musician = new Person("Jill", 18);
console.log(comedian.greet()); // output: "Hello my name is Birusha and I have 20"
console.log(musician.greet()); // output: "Hello my name is Jill and I have 20"

1st core Fundamental | ENCAPSULATION

Encapsulation in object-oriented programming is like packaging data and the methods that operate on that data into a single unit, which we call an object. This encapsulated unit hides the internal state of the object, exposing only the necessary functionality to interact with it.


class Fruit {
   constructor(color, name) {
      this.color = color;
      this.name = name;
   }

   description () {
      return `${this.name} is ${this.color}`;
   }
}

const apple = new Fruit("red", 'apple');
const banana = new Fruit('yellow', "banana");

console.log(apple.description()); // apple is red
console.log(banana.description()); // banana is yellow

In the example provided above, we observe encapsulation by defining the description method within a class definition.

2nd core fundamental | INHERITANCE

The inheritance skill is for reusing our code with other classes.
In order to show that a class belongs to a superclass, we use the extends keyword.

const Person = class {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
}

const Student = class extends Person {

}
const Teacher = class extends Person {

}

const student1 = new Teacher("Jill", 20);
console.log(student1); // output: { name: "Jill', age: 20 }

In these examples, we see how we can extend our superclass Person to Student or Teacher because a teacher or a student is still a person.

By adding the keyword extends, it will take everything that represents a person and append it to the new Student, Teacher, or normal Person.

const Person = class {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
}

const Student = class extends Person {

}

const Teacher = class extends Person {

}

const musician = new Person("Bob", 40);
const student1 = new Student("Tim", 10);
const teacher1 = new Teacher("Birusha", 20);

console.log(musician); // output: { name: "Bob", age: 33}
console.log(student1); // output: { name: "Tim", age: 10}
console.log(teacher1); // output: { name: "Birusha", age: 20}

With the power of inheritance, we can add other properties to the class


const Person = class {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
}

const Student = class extends Person {
   constructor(name, age, major) {
      this.name = name;
      this.age = age;
      this.major = major;
   }
}

const Teacher = class extends Person {
   constructor(name, age, subject) {
      this.name = name;
      this.age = age;
      this.subject = subject;
   }
}

const musician = new Person("Bob", 40, "CS");
const student1 = new Student("Tim", 10);
const teacher1 = new Teacher("Birusha", 20, "Chemistry");

console.log(musician, student1, teacher1); // error: must call super constructor before using this

The error described above shows that before using properties of the superclass, we must call the superclass constructor.

const Person = class {
   constructor(name, age) {
      this.name = name;
      this.age = age;
   }
}

const Student = class extends Person {
   constructor(name, age, major) {
      super(name, age);
      this.major = major;
   }
}

const Teacher = class extends Person {
   constructor(name, age, subject) {
      super(name, age);
      this.subject = subject;
   }
}


const musician = new Person("Bob", 40);
const student1 = new Student("Tim", 10, "CS");
const teacher1 = new Teacher("Birusha", 20, "Chemistry");

console.log(musician); // output: { name: "Bob", age: 40 }
console.log(student1); // output: { name: "Tim", age: 10, major: "CS" }
console.log(teacher1); // output: { name: "Birusha", age: 20, subject: "Chemisty" }

3rd core fundamental | POLYMORPHISM

In object-oriented programming, polymorphism refers to the ability of objects to take on multiple forms or to be used in various ways. The term "poly" means "many," and "morph" means "form," so polymorphism essentially means "many forms.

Polymorphism is a key concept in object-oriented programming that promotes code reuse, flexibility, and the ability to work with objects in a more generic and abstract manner.

const Fruit = class {
   constructor(name, color) {
      this.name = name;
      this.color = color;
   }

   description() {
      return `${this.name} : ${this.color}`
   }
};

const apple = new Fruit('apple', 'red');
const avocado = new Fruit('avocado', 'green');


console.log(apple.description()); // output: apple : red
console.log(avocado.description()); // output: avocado : green

With these concepts, we have the function "description()" which can display information in several ways depending on the instance created.

4th core fundamental | ABSTRACTION

The last key is abstraction. If we consider that we will need to pay each worker according to their data, we will need to abstract the method of calculating payment. Abstraction allows us to hide what does not matter and show only what is necessary, similar to a remote for a TV. We don't need to know what electronic devices are inside; we just need to click buttons like play.


const Worker = class {
   constructor(name, sup) {
      this.name = name;
      this.sup = sup;
      this.salaryPerHours = 50;
   }

   showSalary () {
      return `${this.name} : $${this.salaryPerHours * this.sup}`;
   }
};


const worker1 = new Worker("Jill", 3);
const worker2 = new Worker("Abel", 10);
const worker3 = new Worker("Jenny", 15);
console.log(worker1.showSalary())
console.log(worker2.showSalary());
console.log(worker3.showSalary());

In this tutorial, we learned about the four core fundamentals of object-oriented programming:

Encapsulation,
Inheritance,
Polymorphism, and
Abstraction.

I hope we will stay in touch for another tutorial. Thank you for giving your time.

Happy Coding... 🚚🚚🚚🚀🚀🚀🚀