DEV Community: Baha Mustafa

Exploring a Simple Budget Tracker App

Baha Mustafa — Sat, 07 Oct 2023 07:58:43 +0000

Introduction

Managing money can be complicated. But it becomes easier when you can keep track of what you earn and spend. That's why I created a simple Budget Tracker App. This tool helps you understand where your money comes from and where it goes.

How It’s Made

I used React to build this app. React is a tool that helps make websites interactive and easy to use. With the help of React’s features, the Budget Tracker App updates in real time. That means the moment you input your income or expense, you can see the changes.

What It Does

Here’s what you can do with the Budget Tracker App:

Record Your Expenses: You can quickly add any costs and sort them into categories. This way, you can see exactly how you’re spending your money.
Track Your Income: You can also note down your earnings. This feature helps you see the whole picture of your money, both coming in and going out.
Get Insights Instantly: As soon as you enter your data, the app updates. You get immediate insights into your financial situation.

How It Works

The app uses React’s features to work quickly and show your financial data in real time. It's designed to be easy to use, with a clear layout and design.

For example, say you buy a book for $20 and record this expense in the app. The app immediately updates your total budget. This instant update is possible because of how the app is built, making tracking your money fast and easy.

What I Learned

Building this app taught me a lot. I learned more about coding and how to make an app user-friendly. The experience showed me how technology can make managing money simpler and more straightforward.

What’s Next

I plan to add more features to the app. Future versions might include automated insights to help you understand your money better, connections to bank accounts for automatic tracking, and visual tools to make your financial trends easy to see and understand.

Conclusion

Creating the Budget Tracker App was a valuable experience. It reinforced my skills and showed me the positive impact of technology on managing personal finances. This app is designed to make tracking income and expenses straightforward and hassle-free, helping users to better manage their financial lives.

Building a Movie Explorer with Google Cloud: Protecting API Keys and Enhancing Security

Baha Mustafa — Fri, 28 Jul 2023 03:56:06 +0000

Introduction

Hello and welcome to my technical blog! In this post, I'll go over the technical aspects of Protecting the API. Users can use this web application to search for movies and create favorites and watchlists. However, ensuring the security of sensitive information, such as the API key used to retrieve movie data, was a critical aspect of the project. To accomplish this, I used Google Cloud, a powerful cloud computing platform, to protect the API key and improve the application's overall security.
``
Understanding the Importance of Securing API Keys

Before we get into the technical details, let's talk about why it's so important to secure API keys. An API key functions similarly to a password, granting access to specific data or services provided by an external API. Exposing this key in client-side code may result in potential security risks such as unauthorized API access and misuse of the associated services. As a result, it's critical to keep the API key hidden from prying eyes and to put safeguards in place to protect it from malicious attacks.

Integrating Google Cloud to Secure the API Key

Google Cloud offers a comprehensive set of tools and services for securely handling sensitive data. To begin, I created a Google Cloud account and configured a Cloud Function to serve as a proxy for movie API requests. This proxy design keeps the API key hidden on the server side, preventing it from being exposed to client-side code.

Hiding the API Key in Google Cloud Function
Let's dive into the technical implementation. Below are the essential steps to hide the API key in the Google Cloud Function:

// Required dependencies for the Google Cloud Function
const fetch = require('node-fetch');

// Google Cloud Function to proxy movie API requests
exports.proxyMovieAPI = (req, res) => {
// Hide the API key securely using environment variables
const apiKey = process.env.MOVIE_API_KEY;

// Retrieve search term from the client request
const searchTerm = req.query.searchTerm;

// Ensure a valid search term is provided
if (!searchTerm) {
res.status(400).json({ error: 'Search term is missing.' });
return;
}

// Construct the URL for the movie API request
const url = https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${encodeURIComponent(searchTerm)};

// Perform API request with the hidden API key
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok.');
}
return response.json();
})
.then(data => {
// Return the API response to the client
res.status(200).json(data);
})
.catch(error => {
console.error('Error:', error);
res.status(500).json({ error: 'An error occurred while fetching movie data.' });
});
};

`
By using environment variables in the Google Cloud Function, we can safely store the API key without exposing it in the codebase. Additionally, this approach allows for easy management of multiple keys and enhances security.

Ensuring API Key Security with Authentication and Authorization
Beyond hiding the API key, I further enhanced security by implementing authentication and authorization mechanisms in the Cloud Function. This ensured that only authenticated users could access the movie data and that they had the appropriate permissions for specific actions, such as adding movies to their favorites or watchlists.

Conclusion
Building the Movie Explorer project was an exciting journey, especially when it came to ensuring the security of the API key and user data. By leveraging the powerful capabilities of Google Cloud, I successfully protected sensitive information and enhanced the overall security of the application. As developers, it is crucial to prioritize security in our projects, and Google Cloud provides a robust and reliable solution for achieving that goal.

I hope this technical blog post inspires you to explore Google Cloud's capabilities and motivates you to prioritize security in your own web development projects. Remember, implementing robust security measures not only safeguards user data but also builds trust among your audience.

Thank you for joining me on this technical journey! Feel free to leave your comments and questions below. Happy coding!

Most frequent JavaScript symbols and what they perform.

Baha Mustafa — Mon, 10 Apr 2023 02:40:30 +0000

JavaScript is a sophisticated and adaptable programming language that can be used to develop interactive websites, online applications, and mobile apps. To become proficient in JavaScript, it is necessary to comprehend the numerous symbols and keywords used in the language, as these are the building blocks of JavaScript programming.

Let's look at some of the most frequent JavaScript symbols and what they do.

Addition (+)

The addition symbol in JavaScript is used to add two values together or concatenate two strings. For example, 1 + 2 would return 3, while "Hello" + "world" would return "Helloworld".

Subtraction (-)

The subtraction symbol in JavaScript is used to subtract one value from another. For example, 3 - 1 would return 2.

Multiplication (*)

The multiplication symbol in JavaScript is used to multiply two values together. For example, 3 * 2 would return 6.

Division (/)

The division symbol in JavaScript is used to divide one value by another. For example, 6 / 2 would return 3.

Modulus (%)

The modulus symbol in JavaScript returns the remainder of a division operation. For example, 7 % 3 would return 1.

Equality (==)

The equality symbol in JavaScript is used to compare two values for equality (without type checking). For example, "3" == 3 would return true.

Strict Equality (===)

The strict equality symbol in JavaScript is used to compare two values for equality (with type checking). For example, "3" === 3 would return false.

Inequality (!=)

The inequality symbol in JavaScript is used to compare two values for inequality (without type checking). For example, "3" != 2 would return true.

Strict Inequality (!==)

The strict inequality symbol in JavaScript is used to compare two values for inequality (with type checking). For example, "3" !== 2 would return true.

Greater Than (>)

The greater than symbol in JavaScript is used to check if one value is greater than another. For example, 3 > 2 would return true.

Greater Than or Equal To (>=)

The greater than or equal to symbol in JavaScript is used to check if one value is greater than or equal to another. For example, 3 >= 3 would return true.

Less Than (<)

The less than symbol in JavaScript is used to check if one value is less than another. For example, 2 < 3 would return true.

Less Than or Equal To (<=)

The less than or equal to symbol in JavaScript is used to check if one value is less than or equal to another. For example, 3 <= 3 would return true.

Logical AND (&&)

The logical AND symbol in JavaScript returns true if both expressions are true. For example, true && true would return true.

Logical OR (||)

The logical OR symbol in JavaScript returns true if at least one expression is true. For example, true || false would return true.

Logical NOT (!)

The logical NOT symbol in JavaScript inverts the truth value of an expression. For example, !true would return false.

Dot notation (.)

The dot notation symbol in JavaScript is used to access a property or method of an object. For example, object.property would return the value of the property.

"typeof" (Type Operator) - Used to return the data type of a value.

"instanceof" (Instance Operator) - Used to check if an object is an instance of a particular class or constructor function.

"new" (New Operator) - Used to create a new instance of an object or constructor function.

"this" (This Keyword) - Refers to the current object or context.

"try...catch" (Try Catch Statement) - Used to handle errors and exceptions in code.

"switch" (Switch Statement) - Used to perform different actions based on different cases.

"NaN" (Not a Number) - A value representing an undefined or unrepresentable mathematical value.

"undefined" (Undefined) - A value representing an undefined or non-existent value.

"null" (Null) - A value representing a null or empty value.

"$" (Dollar Sign) - Used in many JavaScript libraries as a shorthand to access and manipulate HTML elements.

"async" (Async Function) - Used to define an asynchronous function that returns a promise.

"await" (Await Operator) - Used to pause the execution of an asynchronous function until a promise is resolved or rejected.

Finally, the dot notation symbol (.) is used to access a property or method of an object. For example, object.property would return the value of the property.

My Journey Learning to Code: Reflections on My First Month

Baha Mustafa — Fri, 31 Mar 2023 02:58:14 +0000

Hello everyone, my name is Baha Mustafa and I am currently working at Amazon while taking the career choice program in software engineering at Flatiron School. I wanted to share my experience with learning to code and reflect on my first month of studying.

Learning to code can be daunting, especially for beginners like me. But after a month at Flatiron School, I can confidently say that it's a challenge worth taking on. Not only did I gain a solid foundation in HTML, CSS, and JavaScript, but I also discovered a supportive community of fellow learners and developers.

What surprised me the most was how accessible coding has become. With online resources and meetups, there are countless opportunities to learn and grow. It's amazing to see how willing people are to share their knowledge and help each other out. This kind of support system made me feel like I was part of a community, rather than just a lone learner.

Of course, learning to code isn't all about theory and syntax. Putting what I learned into practice was crucial to my success during my first month. I challenged myself to build a simple website, which not only helped me see how far I had come but also gave me a tangible result to showcase my skills.

Looking back, I'm proud of my progress and excited to see where this journey takes me. I encourage anyone interested in learning to code to take the leap and give it a try. With determination, a willingness to learn, and a supportive community, anything is possible