DEV Community: Olaleye Obidiya

Why I Want to Be a Front-End Developer and How HNG Will Help Me Achieve My Goals.

Olaleye Obidiya — Fri, 07 Feb 2025 14:51:46 +0000

Ever since I built my first static webpage in my first year in university, I’ve been captivated by the art of front-end development. The ability to blend creativity with technology—to transform code into interactive, visually appealing and engaging experiences—ignited a passion that continues to drive my learning journey today. As a junior front-end developer, my goal is to master the tools and frameworks that enable me to build intuitive and dynamic user interfaces that can make a real impact.

My motivation stems from a desire to make digital experiences more accessible and enjoyable. I have always admired websites that not only look great but also provide a seamless user experience. This admiration quickly evolved into a mission: to develop skills that will allow me to craft such experiences myself. I started with HTML and CSS, gradually moving to JavaScript to bring my ideas to life. However, I realize that to truly excel in this field, continuous learning and exposure to modern development practices are essential.

This is why I joined HNG. The HNG internship offers a vibrant ecosystem where aspiring developers can collaborate, learn from experienced mentors, and work on real-world projects. The exposure to current industry standards is invaluable, and HNG’s hands-on approach perfectly aligns with my learning style. For instance, I have been delving into modern libraries and frameworks such as React HIRE REACT.JS DEVELOPERS to understand how scalable and efficient web applications are built. Additionally, I am committed to strengthening my coding fundamentals by understanding how to build full-stack applications with resources like NextJS, which will give a better knowledge on how backend code works.

During my time at HNG, my goals are clear:

Master advanced front-end technologies: By actively engaging with mentors and collaborating on projects, I plan to build a strong foundation in modern frameworks.
Enhance design and user experience skills: I aim to translate creative ideas into intuitive designs that resonate with users.
Contribute to real-world projects: I am eager to apply my skills in practical scenarios, gaining experience that will set me apart in the competitive tech landscape.

With HNG’s supportive environment and industry insights, I am confident that my internship will be a launchpad for a successful career in front-end development. I look forward to growing, learning, and eventually contributing innovative solutions that make a positive impact on the digital world. And also if your software development is looking for expert software engineers, check the links below:

Deploying NGINX on Google Cloud: A Journey Through the First DevOps Track Task at HNG 12

Olaleye Obidiya — Thu, 06 Feb 2025 12:24:25 +0000

Introduction

Embarking on the DevOps Stage 0 task of setting up and configuring an NGINX web server on a fresh Ubuntu instance was an enlightening experience. This task allowed me to gain hands-on experience with web server deployment, cloud infrastructure, and troubleshooting various challenges along the way. This blog post documents my approach, the obstacles I encountered, and how this task contributes to my professional growth as an aspiring DevOps Engineer.

My Approach to the Task

To successfully complete this task, I followed a structured approach:

Setting Up a Virtual Machine on Google Cloud:

I created a new Compute Engine instance with Ubuntu 22.04 LTS.
I configured firewall rules to allow HTTP traffic.

Installing NGINX:

I updated system packages and installed NGINX using sudo apt install nginx -y.
I enabled and started the NGINX service.

Configuring a Custom HTML Page:

I replaced the default index.html with a custom message: "Welcome to DevOps Stage 0 - Olaleye Obidiya/Onyx_Oceanview".
I ensured proper file permissions for NGINX to serve the page.

Testing the Deployment:

I verified the setup by accessing the external IP of the VM via a browser and using curl http://localhost on the terminal.

Enhancing Security and Performance:

I configured firewall rules to allow only necessary traffic.
I ensured NGINX auto-starts on boot.

Challenges and How I Overcame Them

Firewall Configuration Issues

Initially, my NGINX setup was not accessible from the internet. After troubleshooting, I realized that Google Cloud’s default firewall rules block incoming HTTP traffic. To resolve this:

I created a new firewall rule allowing traffic on port 80.
I used sudo ufw allow 'Nginx Full' to enable local firewall rules.

Permission Errors on HTML File

NGINX was unable to read the updated index.html. I fixed this by adjusting file permissions:

sudo chmod 644 /var/www/html/index.html

Ensuring Persistent Server Availability

To prevent downtime, I enabled NGINX to start on boot:

sudo systemctl enable nginx

How This Task Contributes to My Learning and Career Goals

Completing this task has been a valuable step in my journey towards becoming a proficient DevOps Engineer. It reinforced my understanding of cloud-based infrastructure, NGINX configuration, and troubleshooting real-world deployment issues. Moreover, it aligns with my goal of mastering site reliability and automation by exposing me to key DevOps practices.

For those looking to hire skilled professionals in DevOps and cloud engineering, I highly recommend checking out these resources:

DevOps Engineers
Cloud Engineers
Site Reliability Engineers
Platform Engineers
Infrastructure Engineers
Kubernetes Specialists
AWS Solutions Architects
Azure DevOps Engineers
Google Cloud Engineers
CI/CD Pipeline Engineers
Monitoring/Observability Engineers
Automation Engineers
Docker Specialists
Linux Developers
PostgreSQL Developers

Final Thoughts

This experience has strengthened my ability to deploy web applications on cloud infrastructure and troubleshoot network-related issues. It has also given me a greater appreciation for the role of cloud engineers, site reliability engineers, and DevOps professionals in maintaining high-availability systems.

As I continue my journey in cloud and DevOps engineering, I am excited to take on more complex challenges and deepen my expertise in automation, containerization, and cloud-native technologies.

Stay tuned for more insights into my DevOps learning journey
! 🚀

Luhn's Algorithm: Credit Card Validation

Olaleye Obidiya — Sun, 30 Jun 2024 07:58:28 +0000

The challenge

At some point in my backend journey, I was faced with the challenge to validate credit cards numbers, submitted by users on an application that processes subscription-based payment for a service.

Let’s imagine we are creating an e-commerce website. The site is looking good and we are ready to implement payments. The first step of the payment process is entering payment information. One of the possibilities is to pay with a credit card. We are using an external payment system to process the payments, and the external system has a limited number of payments it can process per time.

To reduce the strain on the external payment system (caused by incorrect credit card details being entered), we are supposed to implement a second validation system which runs on the server and is not limited. This system is intended to perform simple sanity checks of the credit card information and respond with either a success or failure.

The task is to implement a simple page with an input form to take in credit card information and send it to a Backend API for validation.

The Backend API should respond with either success or failure, and we should react appropriately in the Frontend (e.g. display a green check mark or a stop sign).

Here is an example of a validation algorithm that can be used:

The expiry date of the credit card (year and month) must be AFTER present time
The CVV (security code) of the credit card must be exactly 3 digits long

Unless it’s an American Express card, in which case the CVV must be exactly 4 digits long
American Express are cards whose PAN (card numbers) starts with either “34” or “37”

The PAN (card number) is between 16 and 19 digits long
Last digit of the PAN (card number) is checked using Luhn’s algorithm.

Solution

I implemented the Luhn's algorithm to validate the credit card information requests coming from the frontend. Here's my implementation in PHP, Laravel to be specific.

<?php

namespace App\Http\Controllers;

use Carbon\Carbon;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
use Illuminate\Support\Facades\Validator;

class CreditCardController extends Controller
{
    public function validateCreditCard(Request $request): JsonResponse
    {
        $validator = Validator::make($request->all(), [
            'creditCardNumber' => [
                'required',
                'numeric',
                'digits_between:16,19',
                function ($attribute, $value, $fail) {
                    $cardNumbers = array_map('intval', array_reverse(str_split($value)));
                    for ($i = 0; $i < count($cardNumbers); $i++) {
                        if (($i % 2) !== 0) {
                            $cardNumbers[$i] *= 2;
                            if($cardNumbers[$i] > 9)
                            {
                                $cardNumbers[$i] -= 9;
                            }
                        }
                    }
                    if (array_sum($cardNumbers) % 10 !== 0) {
                        $fail('The :attribute is incorrect or invalid.');
                    }
                },
            ],
            'expiryDate' => [
                'required',
                'regex:/^(0[1-9]|1[0-2])\/([0-9]{2})$/',
                function ($attribute, $value, $fail) {
                    $expiry = Carbon::createFromFormat('m/y', $value);
                    $currentDate = Carbon::now();

                    if (!$expiry || $expiry->lessThan($currentDate)) {
                        $fail('The :attribute is invalid or has already expired.');
                    }
                },
            ],
            'cvv' => [
                'required',
                'numeric',
                function ($attribute, $value, $fail) use ($request){
                    $cardType = $this->getCardType($request->input('creditCardNumber'));
                    if ($cardType === 'amex') {
                        if (strlen($value) !== 4) {
                            $fail('The :attribute must be a 4-digit number for American Express cards.');
                        }
                    } else {
                        if (strlen($value) !== 3) {
                            $fail('The :attribute must be a 3-digit number.');
                        }
                    }
                }
            ],
        ]);

        if ($validator->fails()) {
            return response()->json(['errors' => $validator->errors()], 422);
        }
        return response()->json([...$validator->validated(), 'validation_success' => 'true'], 200);
    }

    private function getCardType($cardNumber)
    {
        $cardTypeDigits = substr($cardNumber, 0, 2);

        if (str_contains($cardTypeDigits, '34') || str_contains($cardTypeDigits, '37')) {
            return 'amex';
        } elseif (str_starts_with($cardNumber, '4')) {
            return 'visa';
        } elseif (str_starts_with($cardNumber, '5')) {
            return 'mastercard';
        }

        return 'unknown';
    }
}

I was delighted with my solution.

Conclusion

After solving the task, it made me to want to learn more about backend engineering, and how complex systems work. I hope this HNG program will provide the opportunity I need to deepen my knowledge on advanced backend concepts and get me my desired job. Thanks.