#100DaysOfCodeChallenge

Diana_Farhat · 2025-02-09T19:00:54.646Z

Day 28: Unlocking the Digital World: A Closer Look at APIs

In today’s interconnected digital landscape, applications rarely operate in isolation. They communicate, exchange data, and enable seamless interactions—often without users even realizing it. At the heart of this connectivity lies a powerful yet often overlooked component: the API (Application Programming Interface).

APIs serve as digital bridges, allowing different software systems to interact. Whether it’s a mobile app fetching weather updates, an online store processing payments, or a social media platform sharing content, APIs make it all possible. These interfaces define the rules and protocols for communication, ensuring that systems can request and exchange data efficiently and reliably.

There are different types of APIs, each serving specific purposes. RESTful APIs, which rely on HTTP requests, are widely used for web applications, providing lightweight and scalable solutions. SOAP (Simple Object Access Protocol) APIs offer a more rigid, XML-based framework, often employed in enterprise environments requiring strict security. GraphQL, a relatively newer approach, enables clients to request only the data they need, optimizing performance and reducing unnecessary data transfer.

Beyond just connecting systems, APIs are catalysts for innovation. Businesses leverage APIs to integrate third-party services, enhance functionality, and create new digital experiences. Open APIs allow developers worldwide to build on existing platforms, fostering collaboration and technological growth. Companies like Google, Amazon, and Stripe have built entire ecosystems around APIs, empowering developers to create cutting-edge applications without reinventing the wheel.

However, API security remains a critical challenge. As these interfaces handle sensitive data, improper implementation can expose vulnerabilities. Encryption, authentication mechanisms, and rate limiting are essential safeguards against cyber threats. The rise of API security tools and best practices is helping organizations mitigate risks and ensure safe data exchanges.

From cloud computing to IoT devices and artificial intelligence integrations, APIs underpin modern technology. As businesses and developers continue to harness their potential, APIs will remain fundamental in shaping the digital future. As we move toward an increasingly interconnected world, APIs will be at the forefront, enabling smarter, faster, and more efficient digital interactions.

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-11T10:49:28.598Z

Day 29: Understanding React Props

When I first learned React, props confused me. Everyone kept saying, “Props let you pass data from one component to another,” but that explanation felt too abstract. I needed something more visual—something that clicked.

Then, someone compared it to a manager delivering task notes .

Imagine you’re working in business. You have a manager who hands out notes to different employees, telling them what to do. These employees don’t decide their own tasks—they simply follow the instructions they receive.

In React, props work the same way:

The parent component (the manager) passes information (props) to the child component (the employee).
The child component can only read the props—it can’t change them.
This keeps everything organized and predictable, just like in a well-run business.

Once I saw props this way, everything made sense. Let me show you how this works with a simple To-Do List example.

import React from "react";

// Child component receiving props
const ToDoItem = ({ task, completed }) => {
  return (
    <li>
      {task} - {completed ? "✅ Done" : "⏳ Pending"}
    </li>
  );
};

export default ToDoItem;

This component holds an array of tasks and passes each one to ToDoItem using props.

import React from "react";
import ToDoItem from "./ToDoItem"; // Import the child component

// Parent component passing props
const ToDoList = () => {
  const tasks = [
    { id: 1, task: "Read research paper", completed: true },
    { id: 2, task: "Write summary", completed: false },
  ];

  return (
    <ul>
      {tasks.map((item) => (
        <ToDoItem key={item.id} task={item.task} completed={item.completed} />
      ))}
    </ul>
  );
};

export default ToDoList;

How Props Work in This Example

Think of it this way:

The ToDoList (manager) writes down all tasks and delivers them to different ToDoItem (employees).
Each ToDoItem (employee) reads its instructions (props) and follows them exactly.
The employees cannot change the instructions—they can only display them.

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-12T21:48:00.676Z

Day 31: Mastering React: Understanding the useState Hook

If you’re starting with React or looking to strengthen your frontend development skills, understanding the useState hook is essential. It’s one of the most commonly used hooks that empowers developers to add state to functional components, making React applications more interactive and dynamic.

What is `useState`?

In React, state is used to manage data that can change over time. The useState hook allows you to add state to functional components, enabling them to “remember” values between renders. Whether you’re building a counter, form inputs, or toggles, useState is the go-to hook for managing component-level state.

How Does It Work?

When you call useState, it returns an array containing:

The current state value – This is the data you want to track.
A function to update the state – This function lets you modify the state value and triggers a re-render of the component.

The basic syntax looks like this:

js

CopyEdit

const [state, setState] = useState(initialValue);

state: Holds the current value.
setState: Function to update the state.
initialValue: The initial state value, which can be any data type (string, number, array, object, etc.).

Example: Building a Simple Counter

Let’s see how useState works with a basic example of a counter component:

js

CopyEdit

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

How It Works:

useState(0) initializes the state variable count to 0.
setCount(count + 1) updates the state when the button is clicked.
React automatically re-renders the component, displaying the updated count value.

Using Multiple State Variables

You can manage multiple pieces of state by calling useState multiple times:

js

CopyEdit

const [name, setName] = useState('');
const [email, setEmail] = useState('');

This approach keeps your state organized and makes it easier to maintain and debug your components.

Updating State Based on Previous State

In some cases, you might need to update state based on its previous value. React allows this by passing a function to the state updater:

js

CopyEdit

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

This is particularly useful in scenarios where multiple state updates depend on each other, ensuring the correct value is calculated.

Best Practices and Common Pitfalls

Always use the state updater function. Directly modifying state variables will not trigger a re-render:

js

CopyEdit

// Incorrect
count = count + 1;

// Correct
setCount(count + 1);

State updates are asynchronous. React batches state updates for performance, so changes might not reflect immediately in console logs.

When to Use `useState`

For managing component-specific state like form inputs, toggles, or counters.
When the state is only relevant to a single component and doesn’t need to be shared.
For simple state logic that doesn’t require complex reducers or context management.

If you need to share state across multiple components, consider using other hooks like useContext or state management libraries such as Redux.

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-13T16:17:19.804Z

Day 32: The UseEffect Hook

The useEffect hook in React is a fundamental feature that allows you to perform side effects in function components. Side effects include operations like data fetching, subscriptions, or manually changing the DOM. Prior to hooks, such operations were handled in class component lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. The useEffect hook consolidates these functionalities into a single API, simplifying component logic.

Basic Usage:

javascript

CopyEdit

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Code to run on component mount

    return () => {
      // Cleanup code to run on component unmount
    };
  }, [dependencies]);
}

The first argument is a function containing the side effect code.
The optional second argument is an array of dependencies.
- If provided, the effect runs after the initial render and whenever any dependency changes.
- If omitted, the effect runs after every render.
- If an empty array is provided, the effect runs only once after the initial render.

Example: Fetching Data

javascript

CopyEdit

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Empty array means this effect runs once after the initial render

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>Data: {JSON.stringify(data)}</div>;
}

In this example, useEffect fetches data from an API when the component mounts and updates the state with the fetched data.

Cleanup Function:

The function returned from the effect callback serves as a cleanup function, which React calls when the component unmounts or before the effect runs again. This is useful for tasks like unsubscribing from services or clearing timers.

javascript

CopyEdit

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Timer running');
  }, 1000);

  return () => {
    clearInterval(timer);
    console.log('Timer cleaned up');
  };
}, []); // Empty array means this effect runs once after the initial render

In this example, a timer is set up when the component mounts, and the cleanup function clears the timer when the component unmounts.

For a more in-depth explanation and additional examples, you can refer to the official React documentation on the useEffect hook.

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-14T12:54:05.370Z

Day 33: The Importance of Efficient API Calls: Returning Only the Necessary Data

In modern web development, APIs are the backbone of communication between the frontend and backend. As applications grow and become more complex, optimizing API calls becomes increasingly important to ensure performance, security, and scalability. One common mistake that developers make is allowing the frontend to cherry-pick the data it needs from the API response. While this approach may seem flexible and easy to implement, it often leads to unnecessary overhead, poor performance, and increased complexity.

Why Returning Only Needed Data Matters
When building an API, one of the key principles to keep in mind is data minimization—return only the data that is required for the specific use case. Let’s dive into the reasons why this approach is crucial for a successful application:

Improved Performance
Imagine your API returns a large dataset with lots of extra fields that the frontend doesn’t actually need. The browser will have to download, parse, and process all that extra data. This leads to slower load times, more data transferred over the network, and a less responsive application.

By returning only the data that the frontend needs, you reduce the payload size, leading to faster API responses and quicker rendering of your application. The smaller the data, the faster the user experience, especially on mobile networks or slower devices.

Reduced Server Load and Cost
Every API request consumes server resources—whether it’s CPU, memory, or bandwidth. If you allow the frontend to cherry-pick data, it might request more information than necessary, causing your server to do more work than required. This extra load translates to increased server costs, especially when dealing with large-scale applications that handle thousands or millions of requests.

By streamlining your API to deliver only what’s needed, you help reduce unnecessary server load, which in turn can lower operating costs, improve scalability, and ensure your system runs smoothly.

Better Security
Allowing the frontend to cherry-pick data can inadvertently expose sensitive information. For example, if your API returns all user details, but only the username and email are needed, the frontend might unintentionally access and display private fields like passwords or security questions.

By carefully structuring your API to return only the relevant data, you ensure that sensitive or unnecessary information never reaches the client side, reducing the risk of data breaches or unintended leaks.

Simplified Maintenance
APIs that return unnecessary data are harder to maintain over time. As your backend and frontend evolve, keeping track of which fields are used in the frontend and which are not can become a complex task. Over time, unused data fields can accumulate, making the API more difficult to manage.

By returning only the data that’s needed, you make it easier to update, test, and maintain your API. A simpler, leaner API is always easier to manage than one that includes irrelevant fields and overcomplicated logic.

Avoiding Client-Side Complexity
If your frontend has to cherry-pick what it needs from a large dataset, you introduce unnecessary complexity in your client-side code. This can lead to extra logic for filtering, transforming, or processing data before it’s displayed to the user. This not only bloats the frontend code but also introduces more room for bugs or inconsistencies.

By having the backend return only the necessary data, you offload this responsibility to the server, keeping the frontend code clean, simple, and focused on presentation and user interaction.

Best Practices for Optimizing API Calls
So how can we implement the practice of returning only the necessary data in our API? Here are some best practices to keep in mind:

Use Query Parameters for Filtering: If a resource can be filtered or customized, allow clients to specify exactly what data they need using query parameters. For example:

GET /users?fields=username,email
This allows the frontend to specify the exact fields it wants, without burdening the server with returning unnecessary data.

Leverage API Endpoints for Specific Needs: Instead of building a generic, one-size-fits-all API endpoint, create separate endpoints for different use cases. For example:

/users for general user data
/users/profile for a user’s profile info
/users/summary for a quick overview of user details This way, each endpoint only returns the relevant data for the specific request.
Use GraphQL for Fine-Grained Control: If you need flexibility, consider using GraphQL, which allows clients to request exactly the fields they need. This can help prevent over-fetching and under-fetching data, giving your frontend complete control over the response structure.

Document Your API Efficiently: Ensure that your API documentation clearly defines what data is available and how to request it. If your API supports filtering or selecting specific fields, make sure to document it so that frontend developers know exactly what to expect.

Implement Data Caching: If your data doesn’t change frequently, consider implementing caching mechanisms (like HTTP caching or server-side caching) to reduce the load on your API and improve performance further.

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-15T00:00:18.958Z

Day 34: Know What to Cache: A Key to Optimized Web Performance

Caching is one of the best ways to speed up your website, but the trick lies in knowing what to cache. When used wisely, caching can save you from unnecessary database hits and repeated computations, improving overall performance. Here’s how to decide what to cache for optimal results.

Static Assets (CSS, JS, Images)
These files don’t change often, so caching them can provide a significant performance boost. By storing these assets locally or using a CDN (Content Delivery Network), your website can load faster and reduce the load on your server.

Images, stylesheets, and scripts are prime candidates for caching since they’re requested frequently but rarely updated.
2. Frequently Accessed Data
Think about data that your users often request, like:

Product listings on eCommerce sites.
Search results or user profiles in social media applications.
API responses that don’t change often, such as weather data or popular blog posts.
By caching this information, you can quickly serve users without having to repeatedly fetch it from a database or an external service.

HTML Pages (For Static Content)
If your website has content that doesn’t change often, like blog posts or news articles, caching full HTML pages can dramatically reduce page load times. For example, caching the home page or a category page where product listings are static for a few hours can save both database queries and time.

Avoid Caching Dynamic or Sensitive Data
While caching can be a powerful tool, there are things you should not cache:

User-specific data: This includes login credentials, shopping cart contents, or personal messages.
Real-time data: Live events like stock prices or social media feeds need to be refreshed regularly, so they shouldn’t be cached for long.
Caching sensitive information could expose private data to other users, and caching highly dynamic content could result in users seeing outdated or incorrect information.

How to Choose What to Cache?
Frequency of Access: If data is accessed regularly but doesn’t change often, it’s a good candidate for caching.
Size: Avoid caching large datasets that may take up unnecessary storage space.
Change Frequency: If the data changes frequently or depends on the user’s session, consider not caching it or setting a very short cache expiry time.
By understanding what to cache, you can dramatically improve your website’s speed and scalability. Caching doesn’t just save time — it also reduces strain on your servers, allowing for more efficient use of resources.

Stay tuned for the next blog where we’ll dive into setting proper expiry times to make sure your cached data remains relevant!

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-17T21:05:40.790Z

Day 36: A Comprehensive Guide to Indexing in MongoDB

MongoDB is one of the most popular NoSQL databases, known for its flexibility, scalability, and ease of use. However, as your application grows, so does the volume of data, which can lead to slower query performance. This is where indexing comes into play.

Indexes in MongoDB are special data structures that store a small portion of the data set in an easy-to-traverse form. They significantly enhance query performance by reducing the amount of data MongoDB needs to scan. In this blog, we’ll explore the different types of indexes, how to create and manage them, and best practices to keep your MongoDB queries blazing fast.

Why Indexing Matters

Imagine searching for a word in a book without an index. You’d have to go through every page until you find the word. Similarly, without indexes, MongoDB must scan every document in a collection to fulfill a query, leading to slower performance. Indexes help MongoDB quickly locate documents, minimizing the number of scanned documents.

Types of Indexes in MongoDB

MongoDB offers a variety of indexes to accommodate different use cases:

1. Single Field Index

This is the most basic type of index, created on a single field. It speeds up queries that filter or sort by that specific field.

db.collection.createIndex({ fieldName: 1 })

The 1 denotes ascending order, while -1 denotes descending order.

2. Compound Index

Compound indexes are created on multiple fields, which is beneficial for queries that filter using more than one field.

js

CopyEdit

db.collection.createIndex({ field1: 1, field2: -1 })

The order of fields is crucial, as MongoDB can use the index to support queries that use a prefix of the indexed fields.

3. Multikey Index

This index is used for fields that hold array values. MongoDB creates an index entry for each element in the array.

js

CopyEdit

db.collection.createIndex({ tags: 1 })

4. Text Index

Text indexes allow for efficient searching of string content within text fields. They’re ideal for search functionalities.

db.collection.createIndex({ description: "text" })

5. Geospatial Index

Geospatial indexes support queries of geospatial data, such as finding documents within a certain radius.

db.collection.createIndex({ location: "2dsphere" })

6. Hashed Index

Hashed indexes are used to distribute data evenly across shards in a sharded cluster.

db.collection.createIndex({ _id: "hashed" })

100daysofcode lagos-mug

Diana_Farhat · 2025-02-20T21:54:19.383Z

Day 36: Majorana 1 chip

In a groundbreaking announcement, Microsoft has unveiled the Majorana 1 chip, a quantum processing unit (QPU) that leverages a newly discovered state of matter known as topological superconductivity. This advancement marks a significant milestone in the quest for practical and scalable quantum computing.

Understanding Topological Superconductivity

Traditional quantum computing relies on qubits—quantum bits that can exist in multiple states simultaneously. However, qubits are highly susceptible to errors due to their sensitivity to environmental disturbances. Topological superconductivity offers a promising solution by creating qubits that are inherently more stable and resistant to such errors. This stability arises from the unique properties of topological materials, which are less affected by local disturbances.

The Majorana 1 Chip: A Leap Forward

Microsoft’s Majorana 1 chip is the first QPU to utilize a topological core architecture. By incorporating topoconductors—a class of materials that enable topological superconductivity—the chip aims to achieve higher qubit stability and scalability. This innovation could potentially allow for the integration of up to a million qubits on a single chip, a feat that would significantly enhance computational power and efficiency.

Business Insider

Implications for Quantum Computing

The development of the Majorana 1 chip could accelerate the timeline for achieving commercially viable quantum computers. Microsoft envisions that this breakthrough will enable the creation of practical quantum computers within years, not decades. Such advancements have the potential to revolutionize various fields, including drug discovery, materials science, and complex system simulations.

Business Insider

Challenges and Future Outlook

While the Majorana 1 chip represents a significant step forward, experts advise cautious optimism. The scalability and practical implementation of topological qubits remain subjects of ongoing research. Further experiments and validations are necessary to confirm the chip’s capabilities and to address the challenges associated with scaling up quantum systems.

In conclusion, Microsoft’s unveiling of the Majorana 1 chip signifies a pivotal moment in quantum computing. By harnessing the unique properties of topological superconductivity, this innovation brings us closer to realizing the full potential of quantum technologies.

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-24T16:28:10.577Z

Day 37: How Quantum Algorithms Could Disrupt Cryptography

Quantum computers have the potential to upend modern cryptography, thanks to their ability to process information in fundamentally different ways. At the heart of this disruption is Shor’s algorithm, which can efficiently factor large numbers—a task that classical computers struggle with. Since most encryption systems, including RSA, Diffie-Hellman, and ECC (Elliptic Curve Cryptography), rely on the difficulty of factoring or discrete logarithms, a sufficiently powerful quantum computer could render them obsolete.

If Shor’s algorithm were to crack encryption, secure communications across the internet—including banking transactions, government secrets, and private messages—could be exposed. Passwords protected by encrypted hashes could also be reversed, leaving vast amounts of personal and corporate data vulnerable to attacks.

To counter this, researchers are racing to develop post-quantum cryptography—new encryption methods that remain secure even against quantum attacks. Some promising approaches include lattice-based cryptography, which relies on mathematical problems that remain hard for quantum computers, and hash-based signatures, which do not depend on factorization or discrete logarithms.

While large-scale quantum computers capable of running Shor’s algorithm effectively are not yet a reality, the cryptographic community is already preparing for a post-quantum world, ensuring that security measures evolve before quantum threats become practical.

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-24T18:41:30.315Z

Day 38: Why Every Aspiring Developer Should Build an eCommerce Platform

In the world of software development, not all projects are created equal. Some teach syntax, some focus on algorithms, but few provide the full-stack experience that an eCommerce platform does. Whether you’re a beginner looking to level up or an aspiring entrepreneur, building an eCommerce platform is a powerful way to strengthen your technical skills and problem-solving mindset.

1. Full-Stack Development in Action

An eCommerce platform isn’t just a frontend project or a backend API—it’s both. You’ll work with:
Frontend (React, Next.js, or Vue) for the UI
Backend (Node.js, Django, or .NET) for handling business logic
Database (MongoDB, PostgreSQL) for product and user management
Authentication & Security (OAuth, JWT) for user sign-ins
Payments & Transactions (Stripe, PayPal) to process orders

This project forces you to think beyond code—you’re designing an entire system that interacts with real users.

2. Real-World Problem Solving

An eCommerce platform isn’t just a website; it’s a digital storefront that deals with inventory management, checkout flows, order processing, and customer authentication. Handling these complexities teaches you to:

Optimize database queries for fast product retrieval
Implement secure payment handling
Design intuitive user experiences

3. Understanding Business & Scalability

Developers often focus solely on code, but an eCommerce project introduces business logic. You’ll think about:

How to optimize conversions through UI/UX
Handling high traffic loads and performance tuning
Managing inventory efficiently with dynamic filtering and metadata

4. Portfolio-Worthy & Monetizable

If you’re job hunting, an eCommerce project is an eye-catching portfolio piece. It demonstrates skills in API development, security best practices, and working with third-party services. Plus, who says you can’t monetize it? Build a niche store and launch it!

Final Thoughts

Building an eCommerce platform is more than just another coding exercise—it’s a complete software development journey. Whether you plan to work at a tech startup, freelance, or build your own business, this project will give you hands-on experience with real-world challenges.

Would you consider building one? Let’s discuss!

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-25T19:52:45.507Z

Day 39: The Hidden Pitfalls of Cart Testing in E-commerce

When building an eCommerce platform, it’s easy to assume that if a simple cart action works, the entire cart system is bug-free. I learned the hard way while working on my latest project, Sheldon’s Spot, a furniture store, that cart testing requires thinking beyond the obvious.

The Bug That Went Unnoticed

Initially, adding a single product to the cart worked perfectly—no issues. But when I tested a more complex scenario, I uncovered a serious bug:

Adding a single product worked fine.
Adding the maximum inventory of a product with a bundle that included the same product caused a negative inventory issue.
Re-ordering a previous order resulted in the same bug.

At first, it seemed like an isolated case, but in reality, it pointed to a fundamental flaw in how inventory was being deducted.

Why This Happened

Inventory Deduction Logic Was Too Linear

The system correctly deducted stock when an item was added individually.
However, it didn’t account for bundles that included the same product, leading to an excess deduction.

Re-ordering Didn’t Account for Inventory Checks

When a customer reordered a past purchase, the system didn’t validate stock levels, assuming that the previous order’s data was still valid.

Edge Cases Were Overlooked

Standard cart flows were tested, but combinations of actions (bundles, max stock, and reorders) weren’t rigorously checked.

Concurrency Issues Were Ignored

When multiple users attempted to add the same product simultaneously, the system failed to properly synchronize inventory updates, causing discrepancies.

The Key Lesson: Think in Scenarios, Not Steps

One of the biggest takeaways from this experience is that just because a simple action works doesn’t mean the system is reliable. Testing should not be limited to basic workflows but should cover edge cases, dependencies, and real-world usage patterns.

How to Approach Cart Testing More Effectively

Map Out All Possible User Actions

Add single items
Add max inventory
Combine products with bundles
Reorder past purchases
Apply discounts or promotions
Modify cart contents mid-checkout

Simulate High-Load Scenarios

What happens if multiple users order at the same time?
Does the system handle concurrent stock updates correctly?
Are API rate limits or performance bottlenecks being hit?

Test Inventory Deduction in Multiple Contexts

Ensure that individual and bundled purchases deduct stock correctly.
Reordering should trigger a fresh stock validation.
Test edge cases where stock levels fluctuate dynamically.

Check for Negative Stock Values

Any scenario that results in negative inventory is a red flag that needs immediate fixing.

Automate Testing for Edge Cases

Implement automated tests for scenarios like maximum cart capacity, bundle purchases, and past order reordering.
Introduce stress tests to see how the system behaves under a heavy load.

Review Data Consistency Across Systems

Ensure that stock updates are reflected accurately across databases, caching layers, and external warehouse management systems.

Conclusion

What seemed like a minor issue—negative inventory—revealed a major flaw in the logic behind inventory handling. The biggest mistake in cart testing is assuming it works just because a simple test passed. Instead, think holistically about how users interact with the cart and anticipate every possible scenario.

E-commerce testing isn’t just about functionality—it’s about preventing real-world failures before customers experience them. By expanding test cases and covering complex interactions, we can ensure a seamless shopping experience and avoid costly inventory mishaps.

The next time you test an eCommerce cart, remember: a working cart is not necessarily a reliable cart. Take the time to break it in creative ways before your customers do.

100daysofcode lebanon-mug

shop1867×942 112 KB

Diana_Farhat · 2025-02-27T08:47:42.022Z

Day 40: Automating Invoice Generation from WhatsApp Orders: A Technical Deep Dive

For businesses using WhatsApp as a primary channel for customer orders, manually processing these orders into invoices can be time-consuming and error-prone. However, with advancements in automation tools, it’s now possible to transform text-based orders on WhatsApp into detailed invoices without requiring customer support intervention. In this article, we’ll take a deep dive into the technical workings of these automation apps, using WaBill as an example, to understand how they seamlessly convert WhatsApp orders into invoices.

1. WhatsApp Business API Integration

The core functionality of any app that automates WhatsApp orders into invoices begins with integrating with the WhatsApp Business API. The WhatsApp Business API allows businesses to connect to WhatsApp programmatically, enabling them to send and receive messages at scale. This is particularly useful for businesses with high volumes of orders.

In the case of WaBill, the app uses this API to listen for incoming orders sent via WhatsApp. When a customer sends a message, the API captures that message and feeds it into the app’s backend for further processing.

How it works:

Message Parsing: WaBill connects to the WhatsApp Business API, receiving all incoming order data as text. Using a combination of natural language processing (NLP) and regex (regular expressions), the app parses the message to extract key pieces of information: product names, quantities, prices, and customer details.
Webhook Handling: When an order message is received, a webhook triggers the app’s internal systems to process the order. Webhooks are real-time HTTP callbacks that let the app instantly react to new data or changes—like a new order arriving.

2. Text Parsing and Order Extraction

Once the order data is captured from WhatsApp, the next step is parsing the message to identify and extract relevant details. Since WhatsApp orders are typically sent as text, the app needs to identify structured data within unstructured messages.

This is where the combination of NLP and regex becomes crucial. For instance, a typical order message might look like:

bash

CopyEdit

"Hi, I want to order 2 T-shirts (Red) and 1 Cap (Black). Total cost: $30."

The app needs to extract:

Product Names: “T-shirt”, “Cap”
Quantities: 2, 1
Colors: Red, Black
Total Price: $30

NLP in Action:

Natural Language Processing (NLP) allows the app to understand and extract data from free-form text. For example:

Entity Recognition: The system can identify “T-shirt” and “Cap” as product names, while “Red” and “Black” are tagged as product attributes (color).
Pattern Matching with Regex: Regular expressions help identify numeric data like quantities (2, 1) and prices ($30), as these elements usually follow a predictable structure within the text.

WaBill uses NLP libraries (such as spaCy or TensorFlow for machine learning) and regex to process incoming text orders in real-time, even when the order messages are not strictly formatted.

3. Invoice Template Generation

After extracting the necessary order information, the next step is generating an invoice. WaBill offers the capability to create customizable invoice templates, which are filled dynamically with the order data.

The invoice generation process involves:

Template Population: Using the extracted data (product names, quantities, prices), WaBill populates a predefined invoice template, which can be customized by businesses with their logo, terms, and conditions.
PDF Creation: After filling the template with order information, the app uses libraries such as PDFKit or jsPDF to generate a PDF invoice. These libraries provide an easy way to convert HTML data into a structured PDF document, ensuring the invoice looks professional.

Template Structure:

The invoice template might include the following fields:

Customer Details: Name, address, and contact information.
Order Details: List of products, their quantities, individual prices, and the total price.
Business Information: Company name, logo, tax identification number, and payment instructions.

By leveraging HTML-to-PDF conversion, businesses can create rich, well-designed invoices, reducing manual effort and ensuring consistency in the invoicing process.

4. Automated Invoice Delivery

Once the invoice is generated, the app needs to send it back to the customer without human intervention. WaBill automates this by using the WhatsApp Business API once again to send the invoice PDF back to the customer.

Delivery Process:

Message Formatting: The app formats a message like, “Thank you for your order! Your invoice is attached.”
Sending the Invoice: The app uses WhatsApp API’s media endpoint to send the generated PDF invoice as an attachment to the customer’s WhatsApp number.

With the integration of Twilio or MessageBird (common services for WhatsApp API communication), the app can reliably send invoices instantly, allowing for a seamless customer experience.

5. Real-Time Notifications and Updates

In addition to sending the invoice, the app can also notify customers about the status of their order. For example, WaBill can send a message when the order is processed, shipped, or ready for pickup.

These notifications are triggered by the app’s internal logic, which can integrate with backend systems like order management platforms, inventory tools, or CRM software. With real-time messaging, customers are kept informed throughout the order lifecycle without the need for customer support intervention.

6. Security and Compliance

For businesses dealing with sensitive customer data, security and compliance are paramount. WaBill ensures that:

Data Encryption: All customer data, including personal information and payment details, is encrypted using protocols like SSL/TLS to secure it during transmission.
GDPR Compliance: The app provides features to ensure that customer data is handled in compliance with regulations like GDPR (General Data Protection Regulation) in the EU.

By following industry standards, these automation tools help businesses meet their legal obligations and protect customer privacy.

Conclusion

By leveraging APIs, NLP, template engines, and PDF generation libraries, apps like WaBill transform WhatsApp orders into invoices with minimal manual effort. This automation drastically reduces the workload on customer support teams and allows businesses to focus on growth and customer satisfaction. The seamless integration with WhatsApp ensures a smooth user experience, while the ability to handle real-time data enables businesses to generate invoices and send them instantly, providing a frictionless process for both customers and the company.

In 2025, as more businesses move toward automation, such solutions will become essential for staying competitive and scaling efficiently.

100daysofcode lebanon-mug

Diana_Farhat · 2025-02-27T22:35:39.401Z

Day 41: What Are Microservices

Microservices are an architectural style for building software applications that divide a large, monolithic application into smaller, independently deployable services. Each microservice focuses on a specific business function and communicates with other microservices through well-defined APIs (usually HTTP or messaging queues).

Here are the key characteristics of microservices:

Independent Deployment: Each microservice is a standalone unit that can be developed, tested, deployed, and scaled independently. This makes it easier to maintain and update individual components without affecting the entire application.
Focused on a Specific Function: A microservice is designed around a specific business capability (e.g., user authentication, payment processing, product catalog). This allows for better alignment with the organization’s needs and easier adaptation over time.
Loose Coupling: Microservices are loosely coupled, meaning changes in one service have minimal impact on others. This promotes flexibility and ease of updates and scalability.
Technology Diversity: Since microservices are independent, each service can be built using different technologies, frameworks, or programming languages, depending on the needs of that service. This allows teams to choose the best tool for each job.
Scalability: Microservices can be scaled individually, meaning you can allocate more resources to a specific service (e.g., payment processing) without affecting other services. This improves overall system performance and efficiency.
Resilience: If one microservice fails, it doesn’t bring down the entire system. This is often achieved through techniques like redundancy, failover mechanisms, and graceful degradation.
Data Management: Microservices often manage their own database, reducing dependency on a single, centralized database. This enables each service to control its data model and structure, making it easier to manage and scale.
Communication: Microservices communicate with each other through lightweight protocols like REST, gRPC, or messaging systems (e.g., Kafka, RabbitMQ). This ensures that services can share data and collaborate to perform more complex tasks.

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-01T18:52:01.907Z

Day 42: How to Reduce Latency in Web Applications: Best Practices for Faster Performance

Latency can make or break the user experience in web applications. A slow-loading website frustrates users and can negatively impact engagement, conversions, and SEO rankings. Whether you’re developing an eCommerce store, a SaaS platform, or a content-heavy site, reducing latency is crucial for success. In this blog, we’ll explore the best practices to minimize latency and improve web performance.

1. Optimize Server Response Time

Your server’s response time plays a critical role in how quickly your web application loads. Here’s how you can optimize it:

Use a Content Delivery Network (CDN) to serve static assets from edge locations closer to users.
Implement caching strategies (e.g., browser caching, server-side caching, and database query caching).
Reduce the number of database queries and optimize them using indexing and proper schema design.
Use faster backend technologies, such as upgrading to HTTP/3 or using efficient programming frameworks.

2. Minimize HTTP Requests

Each HTTP request adds overhead and increases latency. To minimize HTTP requests:

Combine and minify CSS and JavaScript files.
Use image sprites and inline SVGs for UI elements.
Reduce the number of third-party scripts and dependencies.
Implement lazy loading for non-essential images and scripts.

3. Optimize Frontend Performance

The frontend is just as important as the backend in reducing latency. Here are some key optimizations:

Use modern JavaScript frameworks and libraries that focus on performance (e.g., React with Server Components, Svelte, or Vue 3).
Reduce JavaScript execution time by optimizing code and using tree-shaking techniques.
Leverage asynchronous loading techniques like defer and async attributes for scripts.
Optimize images by using next-gen formats like WebP and AVIF.

4. Implement Efficient Networking Strategies

Network-related bottlenecks can significantly increase latency. Consider the following strategies:

Enable HTTP/2 or HTTP/3 for multiplexed, faster communication.
Use TCP/TLS optimizations such as session resumption and keep-alive connections.
Compress assets using Brotli or Gzip to reduce payload size.
Implement efficient data fetching techniques like GraphQL or gRPC.

5. Monitor and Analyze Performance

Continuous monitoring and performance analysis help identify and fix bottlenecks. Use these tools:

Google PageSpeed Insights and Lighthouse for frontend analysis.
WebPageTest for detailed network performance insights.
Application Performance Monitoring (APM) tools like New Relic or Datadog for backend monitoring.
Real User Monitoring (RUM) to track real-world user experience.

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-01T22:53:56.821Z

Day 43: The Power of ROS: Revolutionizing Robotics with Open-Source Innovation

Robotics is no longer the stuff of science fiction—it’s transforming industries, from autonomous vehicles to medical surgery. But behind the scenes, what powers these intelligent machines? Enter ROS (Robot Operating System), an open-source framework that has become the backbone of modern robotics development.

What is ROS?

Despite its name, ROS is not an operating system in the traditional sense. Instead, it’s a flexible middleware that provides a set of tools, libraries, and conventions for building and managing robotic applications. Think of it as the glue that connects different hardware and software components, allowing them to communicate seamlessly.

Developed by Willow Garage and later maintained by the Open Source Robotics Foundation (OSRF), ROS enables developers to focus on creating intelligent robot behavior rather than reinventing the wheel for every project.

Why is ROS a Game-Changer?

Modular & Scalable Architecture
ROS is built around a distributed computing system, where different components (or nodes) handle specific tasks. A robotic arm’s motor control, camera processing, and AI-based decision-making can all run independently yet communicate effectively.
Strong Community & Open-Source Ecosystem
With thousands of contributors worldwide, ROS boasts an extensive collection of pre-built libraries (or packages). Want to integrate LiDAR for obstacle detection? There’s a ROS package for that. Need SLAM (Simultaneous Localization and Mapping) for navigation? ROS has you covered.
Simulation with Gazebo
Testing robots in the real world can be expensive and risky. ROS integrates with Gazebo, a high-fidelity robot simulation tool that lets developers test algorithms in a realistic 3D environment before deploying them on physical robots.
Hardware Agnostic
Whether you’re working with Raspberry Pi, NVIDIA Jetson, or industrial-grade robotic arms, ROS provides compatibility across a wide range of hardware platforms.
Bridges AI & Robotics
Modern robots rely on AI for perception and decision-making. With ROS 2, developers can integrate machine learning models, deep learning vision systems, and reinforcement learning with ease. It even supports communication with frameworks like TensorFlow and PyTorch.

The Future with ROS 2

While ROS 1 dominated the robotics landscape for years, its successor, ROS 2, addresses critical limitations like real-time performance, security, and multi-robot support. Industries like autonomous vehicles, industrial automation, and healthcare robotics are rapidly adopting ROS 2 for building the next generation of intelligent machines.

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-04T18:50:14.648Z

Day 44: Quantum Computing in Drug Discovery: A Game Changer in Medicine

The process of discovering new medicines is notoriously complex, expensive, and time-consuming. Traditional computational methods, while powerful, often fall short when dealing with the intricate molecular interactions that define drug efficacy and safety. Quantum computing, with its ability to process massive amounts of information in parallel, offers a revolutionary approach to drug discovery.

The Challenge of Drug Discovery

Drug discovery involves identifying molecules that can interact with specific biological targets to treat diseases. This process requires extensive computational simulations to predict molecular behavior, binding affinities, and potential side effects. Current classical computing methods rely on approximations and brute-force calculations, which can take years and cost billions of dollars.

How Quantum Computing Enhances Drug Discovery

Quantum computing leverages the principles of superposition and entanglement to solve complex problems exponentially faster than classical computers. Here’s how it can revolutionize drug discovery:

1. Molecular Simulation Accuracy

Quantum computers excel at simulating quantum mechanical systems, making them ideal for accurately modeling molecular interactions at an atomic level. Unlike classical computers that rely on approximations, quantum algorithms like the Variational Quantum Eigensolver (VQE) and Quantum Phase Estimation (QPE) can precisely calculate molecular energy states, leading to better predictions of drug effectiveness.

2. Faster Screening of Drug Candidates

Currently, drug candidates are screened using high-throughput methods that require extensive computing resources. Quantum algorithms, such as quantum machine learning (QML), can rapidly analyze molecular structures and predict promising candidates, significantly reducing the time needed to identify viable drugs.

3. Optimizing Drug Formulation

Quantum optimization techniques can be used to refine drug formulations by analyzing numerous variables simultaneously, such as solubility, bioavailability, and interaction with biological environments. This leads to the creation of more effective drugs with fewer side effects.

4. Personalized Medicine

With its ability to analyze vast datasets efficiently, quantum computing can support the development of personalized medicine. By processing genetic and molecular data, quantum algorithms can predict how an individual’s body will respond to certain drugs, leading to more targeted and effective treatments.

Challenges and Future Prospects

While quantum computing holds immense promise, challenges remain. Current quantum hardware is still in its early stages, with limited qubits and error rates that need improvement. However, advancements in quantum error correction, hybrid quantum-classical algorithms, and quantum cloud computing are making practical applications increasingly viable.

Conclusion

Quantum computing has the potential to transform drug discovery, making it faster, more accurate, and cost-effective. As hardware and algorithms continue to evolve, we can expect quantum-driven breakthroughs in medicine, leading to better treatments and improved healthcare outcomes. The fusion of quantum computing and pharmaceutical research may very well redefine the future of medicine.

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-05T21:44:27.577Z

Day 45: Mastering Data Structures and Algorithms: A Guide for Computer Science Students

Data Structures and Algorithms (DSA) are fundamental to computer science. Whether you’re preparing for coding interviews, working on software projects, or aiming for a deep understanding of computational efficiency, mastering DSA is a crucial step. In this guide, we’ll explore the key concepts, why they matter, and how to effectively study them.

Why Are Data Structures and Algorithms Important?

Problem-Solving Efficiency – Understanding DSA helps you write optimized and scalable code, reducing time complexity.
Coding Interviews – Companies like Google, Amazon, and Microsoft emphasize DSA in their technical interviews.
Performance Optimization – Efficient algorithms ensure that applications run smoothly and scale well.
Competitive Programming – Platforms like LeetCode, Codeforces, and HackerRank test your ability to solve problems quickly using DSA.
Building Core Programming Skills – A strong grasp of DSA makes learning new programming languages and technologies easier.

Essential Data Structures

1. Arrays and Strings

Usage: Storing data in a contiguous memory space, fast access via indexing.
Common Problems: Sliding window problems, two-pointer techniques, searching, and sorting.

2. Linked Lists

Types: Singly, Doubly, and Circular Linked Lists.
Use Cases: Implementing stacks and queues, efficient insertion/deletion.

3. Stacks and Queues

Stack: Last In, First Out (LIFO) – Used for function calls, undo mechanisms.
Queue: First In, First Out (FIFO) – Used in scheduling, caching.

4. Hash Tables (Hash Maps)

Usage: Fast lookups, avoiding duplicate elements.
Common Problems: Anagrams, frequency counting, caching mechanisms.

5. Trees and Graphs

Binary Trees & Binary Search Trees (BSTs): Used for hierarchical data representation, fast searching.
Graphs: Useful for network routing, social media algorithms, pathfinding (Dijkstra’s, BFS, DFS).

Must-Know Algorithms

1. Sorting Algorithms

Bubble Sort, Selection Sort, Insertion Sort – Basic sorting, slow for large datasets.
Merge Sort, Quick Sort, Heap Sort – Efficient, commonly used in libraries.

2. Searching Algorithms

Linear Search – O(n) time complexity, used for unsorted data.
Binary Search – O(log n) time complexity, requires sorted data.

3. Recursion and Backtracking

Recursion: Solving problems by breaking them into subproblems (e.g., Fibonacci sequence, Tower of Hanoi).
Backtracking: Used in problems like N-Queens, Sudoku solver, and generating permutations.

4. Dynamic Programming (DP)

Usage: Solving complex problems by breaking them down into overlapping subproblems.
Examples: Fibonacci numbers, Knapsack problem, Longest Common Subsequence.

How to Study Data Structures and Algorithms Effectively

Pick a Programming Language – Stick with one (Python, Java, C++, etc.) and get comfortable with syntax.
Learn by Doing – Solve problems daily on platforms like LeetCode, CodeChef, and GeeksforGeeks.
Visualize Data Structures – Use tools like VisuAlgo and Algorithm Visualizer to understand concepts better.
Understand Time and Space Complexity – Use Big O notation to analyze and optimize algorithms.
Implement from Scratch – Writing your own implementations of sorting, searching, and trees reinforces concepts.
Join a Coding Community – Engage in coding competitions and discussions to stay motivated.

Conclusion

Mastering Data Structures and Algorithms is essential for any computer science student. It lays the foundation for efficient problem-solving and is a key skill for technical interviews and real-world applications. By consistently practicing, understanding core concepts, and participating in competitive programming, you can significantly improve your programming skills and career prospects.

Happy coding!

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-07T15:08:25.520Z

Day 46: Breaking Barriers in STEM—One Woman at a Time

Artificial Intelligence is one of the hottest fields in technology today, shaping everything from medicine to finance and beyond. As AI revolutionizes industries, the demand for skilled professionals continues to surge. Yet, women remain vastly underrepresented in this space, making up just 22% of AI professionals, 12% of AI researchers, and 16% of AI faculty members. The future of AI is being written now, and ensuring diverse voices contribute to its development is more critical than ever.

The Afghan Dreamers: A Story of Resilience

If there’s one story that embodies the power of women in STEM, it’s that of the Afghan Girls Robotics Team, known as the Afghan Dreamers. In a country where educational opportunities for girls remain scarce, these young women built robots with limited resources, teaching themselves engineering principles and problem-solving skills. They fought for visas, overcame countless obstacles, and made it to the FIRST Global Challenge, proving that talent and determination know no borders.

Their journey is not just about robotics; it’s about breaking barriers—ones that persist differently across the world. While some face systemic restrictions on education, others navigate industries where they are still vastly underrepresented. The challenge may look different, but the need for inclusion remains the same.

Changing the Narrative

Empowerment starts with access. That’s why Microsoft and Founderz have teamed up to launch a free, self-paced AI training program—an initiative designed to equip anyone, regardless of background, with the tools to thrive in AI. Whether you’re looking to upskill, pivot careers, or simply explore the technology reshaping our world, this course is your chance to step in. Because the future of STEM—and AI in particular—should be shaped by diverse minds.

Your Turn to Lead

AI is not just for the privileged few; it’s for those ready to learn, adapt, and innovate. If the Afghan Dreamers could break through unimaginable barriers, then every woman, everywhere, deserves the chance to do the same. With free training now at our fingertips, the path is open. The only question is: will we take the first step?

Start your AI journey today: https://lnkd.in/d69vGvQb

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-08T21:32:39.300Z

Day 47: Django vs Node.js: Which One Should You Choose?

In the ever-evolving landscape of web development, two back-end giants frequently dominate the discussion: Django and Node.js . If you’re a developer, startup founder, or CTO trying to decide which framework to adopt, this guide will help you understand the strengths, weaknesses, and best use cases of both technologies.

Technology Overview

Django - The Python Powerhouse

Django is a high-level Python web framework that emphasizes rapid development and clean, pragmatic design.

Language: Python

Architecture: MVT (Model-View-Template)

Key Features: Built-in authentication, ORM (Object-Relational Mapping), security-first approach, and scalability.

Used By: Instagram, Pinterest, Mozilla

Node.js - The JavaScript Juggernaut

Node.js is a runtime environment that allows JavaScript to run server-side, making it perfect for event-driven applications.

Language: JavaScript/TypeScript

Architecture: Event-driven, non-blocking I/O

Key Features: Asynchronous processing, microservices-friendly, high concurrency handling.

Used By: Netflix, PayPal, LinkedIn

When to Choose What?

Use Django If:

You need rapid development with built-in security features.
Your project requires complex relational databases.
You prefer Python and its extensive ecosystem.
You’re building an app that prioritizes data security (e.g., healthcare, banking).

Use Node.js If:

You need real-time applications (e.g., chat apps, live streaming).
You want to build highly scalable microservices.
Your team is already experienced in JavaScript.
You’re handling high concurrent requests.

Happy Coding!

Image preview502×203 21.8 KB

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-09T20:36:32.540Z

Day 48: Introduction to the MERN Stack

The MERN Stack (MongoDB, Express.js, React.js, Node.js) is one of the most powerful tech stacks for building modern full-stack web applications. It offers a seamless JavaScript-based development experience, making it a top choice for developers and businesses alike. But what makes MERN stand out? Let’s break it down.

Why is the MERN Stack So Popular?

JavaScript Everywhere: Developers can work with a single language across the frontend, backend, and database, reducing complexity and improving productivity.

Fast & Scalable: MongoDB’s NoSQL structure enables rapid data retrieval, Node.js handles thousands of requests efficiently, and React optimizes rendering performance.

Full Flexibility: MERN allows developers to create everything from small apps to enterprise-level solutions, from static sites to dynamic applications.

Huge Community Support: With an extensive ecosystem of libraries, tools, and frameworks, developers can find solutions, templates, and best practices easily.

How the MERN Stack Works

A MERN application follows a structured workflow where all components work together to handle frontend interactions, backend processing, and database management. Here’s how the data flows:

React Frontend – Users interact with the UI. React handles user input and makes API calls.

Express.js & Node.js Backend – Express processes requests, applies business logic, and interacts with the database.

MongoDB Database – Data is stored and retrieved in a flexible, JSON-like format.

API Response Cycle – Data is sent back to React, which dynamically updates the UI.

Real-World Applications of MERN

Many successful startups and enterprises use the MERN stack due to its efficiency. Some common use cases include:

E-commerce Platforms: MERN enables seamless shopping experiences with dynamic product catalogs, real-time inventory updates, and secure payment integrations.

Social Media Applications: Features like user authentication, live updates, and messaging can be efficiently managed using MERN.

SaaS Products: Subscription-based platforms rely on MERN for interactive dashboards and cloud-based functionalities.

Project Management & Collaboration Tools: MERN’s flexibility makes it perfect for building real-time apps like Trello and Notion clones.

Future of the MERN Stack

With JavaScript evolving and frameworks like Next.js and Remix gaining traction, MERN continues to adapt. The integration of serverless functions, GraphQL, and AI-driven automation will further enhance its capabilities.

Ready to start your MERN journey? Stay tuned for Part 2: Setting Up a MERN Project from Scratch!

100daysofcode lebanon-mug

MERN1920×1080 29.6 KB