#100DaysOfCodeChallenge

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

Diana_Farhat · 2025-03-10T17:18:53.960Z

Day 49: Setting Up the MERN Stack – The Right Way with Vite!

The MERN stack (MongoDB, Express, React, Node.js) is one of the most powerful full-stack combinations. But setting it up right is key! And let’s face it—Create React App is dead . The best way to set up React now is with Vite .

Here’s a step-by-step guide to setting up a full MERN stack project from scratch.

Step 1: Installing Node.js & npm

First, install Node.js from nodejs.org (choose the latest LTS version).

Once installed, check if it’s working by running:
node -v
npm -v

If both return version numbers, you’re good to go .

Step 2: Setting Up the Backend (Express.js)

Now, let’s set up Node.js & Express.

Create a new project folder:
mkdir mern-app && cd mern-app

Initialize a Node.js project:
npm init -y

Install Express:
npm install express

Create a new file called index.js and add this:

javascript

CopyEdit

const express = require('express');  
const app = express();  

app.get('/', (req, res) => {  
    res.send('MERN Backend is running!');  
});  

app.listen(5000, () => {  
    console.log('Server is running on port 5000');  
});

Start the server:
node index.js

If you see “Server is running on port 5000”, your backend is working!

Step 3: Connecting MongoDB

Now, let’s connect MongoDB. You can use MongoDB Compass (local) or MongoDB Atlas (cloud-based).

Install Mongoose:
npm install mongoose

In index.js, connect MongoDB:

javascript

CopyEdit

const mongoose = require('mongoose');  

mongoose.connect('mongodb://localhost:27017/mernapp', {  
    useNewUrlParser: true,  
    useUnifiedTopology: true  
})  
.then(() => console.log('MongoDB Connected'))  
.catch(err => console.error(err));

If it logs “MongoDB Connected”, your database is now linked!

Step 4: Setting Up React with Vite

Forget Create React App—Vite is faster and better.

Inside mern-app, create a React app with Vite:
npm create vite@latest client -- --template react

Navigate into the client folder:
cd client

Install dependencies:
npm install

Start the React app:
npm run dev

Your frontend should now be running at localhost:5173!

Step 5: Connecting Frontend & Backend

To allow React to communicate with Express, you need to set up a proxy.

Open client/vite.config.js and add this:

php

CopyEdit

export default defineConfig({  
  server: {  
    proxy: {  
      '/api': 'http://localhost:5000'  
    }  
  }  
});

Now, React can make API calls to Express without CORS issues!

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-11T20:21:33.602Z

Day 50: Structuring a MERN Project for Scalability

The MERN stack (MongoDB, Express.js, React, Node.js) is great for building full-stack apps, but if your project is poorly structured, it will lead to bugs, messy code, and maintenance nightmares.

A well-structured backend makes your code more scalable, readable, and secure. This post will guide you through structuring your MERN backend properly using the MVC (Model-View-Controller) pattern.

Why Structure Your Backend Properly?
Separation of concerns → Business logic is separate from database & routes
Scalability → Adding features is easy
Better collaboration → Multiple developers can work efficiently
Recommended Folder Structure

/server
├── controllers/ → Handles logic
├── models/ → Defines data structure
├── routes/ → API endpoints
├── middleware/ → Security & validation
├── config/ → Database & environment variables
├── utils/ → Reusable helper functions
├── index.js → Main server file

Models: Defining Data Structure
Models define how data is stored in MongoDB.
Example: User Model (models/User.js)
Defines user schema
Encrypts passwords
Adds timestamps automatically

const mongoose = require(‘mongoose’);
const UserSchema = new mongoose.Schema({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
password: { type: String, required: true },
role: { type: String, enum: [“user”, “admin”], default: “user” }
}, { timestamps: true });
module.exports = mongoose.model(“User”, UserSchema);

Controllers: Handling Business Logic
Controllers process requests and interact with models.
Example: User Controller (controllers/userController.js)
Registers a user
Hashes passwords
Handles login authentication

const User = require(‘…/models/User’);
const bcrypt = require(‘bcrypt’);
const jwt = require(‘jsonwebtoken’);
exports.registerUser = async (req, res) => {
try {
//Code Logic Here
} catch (error) { res.status(500).json({ error: error.message }); }
};

Routes: Managing API Endpoints
Routes define API paths and call controllers.
Example: User Routes (routes/userRoutes.js)
Links API endpoints to controllers
Keeps routing separate from business logic

const express = require(‘express’);
const { registerUser, loginUser } = require(‘…/controllers/userController’);
const router = express.Router();
router.post(‘/register’, registerUser);
router.post(‘/login’, loginUser);
module.exports = router;

Bringing It All Together: The Main Server File (index.js)
Loads environment variables
Connects to MongoDB
Sets up routes

image22000×1500 41.5 KB

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-12T17:34:24.181Z

Day 51: Securing Your Node.js Application: Best Practices for Environment Variables, Authentication, and Middleware Security

In today’s digital landscape, security is non-negotiable. Whether you’re building a small side project or an enterprise-level application, securing your Node.js application should be a top priority. Exposing sensitive credentials, neglecting authentication protocols, or ignoring middleware security can lead to devastating consequences, including data breaches and unauthorized access.

In this guide, we’ll explore three crucial aspects of Node.js security:

Environment Variables: Keeping Credentials Safe

One of the most common security mistakes developers make is hardcoding sensitive credentials directly into their source code. Exposing database connection strings, API keys, or secret tokens in your codebase is a major security risk.

Use .env Files to Store Secrets

A better approach is to use environment variables. The dotenv package allows you to load environment variables from a .env file into process.env.

Install dotenv:

npm install dotenv

Configure dotenv in your application:

require(‘dotenv’).config(); const mongoURI = process.env.MONGO_URI;

This ensures that sensitive data is never exposed in your repository. Best practice: Add .env to .gitignore to prevent it from being committed.

Secure Authentication & Authorization with JWT

Authentication ensures that users are who they claim to be, while authorization determines what they can access. A widely used method for secure authentication in Node.js applications is JSON Web Tokens (JWT).

Install JWT:

npm install jsonwebtoken

Generate a JWT Token

When a user logs in, issue a signed token that can be used for subsequent requests. const jwt = require(“jsonwebtoken”); const token = jwt.sign({ userId }, process.env.JWT_SECRET, { expiresIn: “7d” });

Middleware to Verify JWT

To protect routes, use a middleware function to validate JWTs before processing requests. Check the picture for relavent code.

Protecting Routes

Use the authentication middleware to secure sensitive routes.

Middleware Security: Helmet & CORS

Middleware plays a crucial role in securing your Node.js application by protecting it from common web vulnerabilities.

Helmet: Secure HTTP Headers

Helmet helps protect your app by setting various HTTP headers that prevent cross-site scripting (XSS), clickjacking, and other attacks.

Install Helmet:

npm install helmet

Use Helmet in Your App:

const helmet = require(“helmet”); app.use(helmet());

CORS: Controlling Cross-Origin Requests

Cross-Origin Resource Sharing (CORS) determines how your web app handles requests from different domains. By default, browsers block cross-origin requests, but in some cases, you may need to allow them.

Install CORS:

npm install cors

Configure CORS:

const cors = require(“cors”); app.use(cors({ origin: “https://yourfrontend.com” }));

auth726×632 32.7 KB

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-13T13:33:02.819Z

Day 52: Microsoft’s TypeScript Gets a Go-Powered Upgrade!

Microsoft is rewriting the TypeScript compiler in Go (codenamed Corsa)—and the performance gains are massive:
10x faster builds
8x faster project load times
AI-powered developer tools

If you’ve ever felt frustrated by slow TypeScript builds, this could be a game-changer. But wait… why is Microsoft moving away from JavaScript?

Why Not Just Speed Up JavaScript?
JavaScript is fantastic for UI and web apps, but when it comes to compute-heavy workloads like compilers, it hits a major roadblock: single-threading.

JS runs on a single core and lacks true multi-threading support. While features like Shared Structs are in development, they’re not ready yet. On the other hand, Go and Rust have native multi-threading. They can fully utilize multiple CPU cores, massively improving performance. That’s why Microsoft had to look beyond JavaScript.

Why Go? Not Rust? Not C++?
Many expected Rust (like Deno, Turbo, and Rolldown), but Microsoft chose Go for three key reasons:
Ease of porting – Go allows a structured, line-by-line conversion from the existing TypeScript codebase.
Garbage collection – Unlike Rust, Go’s memory management is automatic, simplifying implementation.
Simplicity – Go is easy to write, read, and maintain.

What This Means for Developers
Blazing-fast TypeScript compilation – Say goodbye to long build times.
Lower memory usage – The Go-based compiler will use ~50% less memory than today’s JS version.
AI-powered coding assistance – Faster TypeScript means smarter dev tools.

The JS-based TypeScript (6.x) will continue, but TypeScript 7.0 (native Go) is the future. Expect a preview by mid-2025 and a full rollout by year-end.

v2-12a098a6b26a424672b55a3d756a06e4_720w720×405 155 KB

100daysofcode lebanon-mug typescript

Diana_Farhat · 2025-03-14T18:29:57.516Z

Day 53: Axios vs. React Query, Which One Should You Use in Your React App?

When building a React app, fetching data is a must. But how do you do it efficiently? Two popular options are Axios and React Query. While both can get the job done, they serve different purposes. Let’s break it down for beginners.

Axios: The Classic Choice
Axios is a promise-based HTTP client that simplifies making requests to APIs. It’s widely used for sending GET, POST, PUT, DELETE requests and handling responses.

Why use Axios?
Simple API for making HTTP requests (like axios.get(url))
Supports request/response interception
Allows setting global headers (like authentication tokens)
Works with Node.js as well

What it lacks:
No built-in caching or data synchronization
You need to manually manage loading, error states, and retries
Doesn’t handle automatic background refetching
Example usage:
import axios from ‘axios’;

const fetchData = async () => {
try {
const response = await axios.get(‘url’);
console.log(response.data);
} catch (error) {
console.error(error);
}
};

React Query: The Smart Choice?
React Query is a data-fetching and state management library that abstracts away the complexity of handling API requests. It makes working with server-side data more powerful and efficient.
Why use React Query?
Built-in caching (reduces unnecessary API calls)
Auto-refetching when data becomes stale
Background updates (users always get fresh data)
Error handling & retries out of the box
Infinite scrolling & pagination support

What it lacks:
Slightly steeper learning curve for beginners
Adds extra dependencies (though lightweight)
Might be overkill for simple projects
Example usage:
import { useQuery } from ‘react-query’;
import axios from ‘axios’;

const fetchData = async () => {
const { data } = await axios.get(‘LinkedIn’);
return data;
};

const MyComponent = () => {
const { data, isLoading, error } = useQuery(‘myData’, fetchData);

if (isLoading) return

Loading…

;
if (error) return

Error: {error.message}

;

return

{JSON.stringify(data)}

;
};

Which One Should You Use?
It depends on your needs! Here’s a quick comparison:
FeatureAxiosReact QuerySimple API Requests:white_check_mark:Global Headers:white_check_mark: (but can be set via Axios)Caching:x:Auto-Refetching:x:Error HandlingManual:white_check_mark: Built-inBackground Sync:x:Pagination Support:x:

Use Axios if:
You just need to fetch data without advanced state management.
Your app is small, and you don’t need caching or auto-refetching.
You want full control over API requests and responses.

Use React Query if:
You want automatic caching, retries, and background refetching.
Your app relies on real-time or frequently updated data.
You need built-in pagination or infinite scrolling.

And as always, happy coding!

100daysofcode lebanon-mug

image501×185 5.59 KB

Diana_Farhat · 2025-03-15T12:28:40.934Z

Day 54 | Understanding CORS: Why Your API Might Be Rejecting Requests

Ever tried to fetch data from an API, only to see a frustrating error in the console—something about “CORS policy” blocking your request? If you’re developing web applications, you’ve likely encountered this issue. Let’s break it down.

What is CORS?
Cross-Origin Resource Sharing (CORS) is a security mechanism implemented by web browsers that controls which domains can access resources on a server. By default, browsers enforce the Same-Origin Policy (SOP), which blocks requests between different origins to prevent malicious attacks.

Origin? In the web context, an “origin” is defined by three components:
Protocol (HTTP or HTTPS)
Domain (e.g., example.com)
Port (e.g., :3000 for development)

If any of these differ between the frontend and backend, the request is considered cross-origin and may be blocked unless explicitly allowed.

How CORS Works
When a browser sends a cross-origin request, it checks whether the server allows such requests by including special CORS headers in the response.

If the response contains Access-Control-Allow-Origin: * (or the specific requesting domain), the browser permits the request.
Otherwise, the request is blocked, leading to the infamous CORS error.

Types of CORS Requests
Simple Requests – Directly sent without a preflight check (e.g., GET requests without custom headers).
Preflight Requests – When using POST, PUT, DELETE, or custom headers, the browser first sends an OPTIONS request to check if the actual request is allowed.

Fixing CORS Issues
If you’re dealing with CORS errors, here are some common solutions:
Server-Side Configuration: Modify the backend to allow cross-origin requests using appropriate headers, e.g.,
Access-Control-Allow-Origin: [your frontend url]
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

Use a Proxy: If modifying the backend isn’t an option, configure a proxy on your frontend (e.g., in webpack.config.js or API Gateway).

CORS Middleware: If using Express.js, add:
javascript
const cors = require(‘cors’);
app.use(cors({ origin: '[your frontend url] });

Final Thoughts
CORS isn’t a bug—it’s a security feature. Understanding how it works helps in designing secure, scalable web applications without unnecessary headaches.
Have you run into CORS issues before? Let’s discuss your workarounds in the comments!

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-16T20:59:02.894Z

Day 55: RTK Query & Store.js: Simplifying API State Management in Redux Toolkit

Modern React applications need efficient data fetching and caching. Instead of manually managing API calls with useEffect and useState, RTK Query simplifies this by integrating API state directly into Redux Toolkit.

What is RTK Query?
RTK Query is a data-fetching and caching tool within Redux Toolkit. It automates caching, refetching, and state updates, making API interactions more efficient.

Configuring Redux Store (store.js)
To integrate RTK Query, the Redux store is configured with configureStore, where the API service is added to the reducers and middleware.
Example: The store includes authApi.reducerPath in the reducers and appends authApi.middleware to handle caching and async requests efficiently.

Defining an API Service
A typical RTK Query API service uses createApi, specifying a base URL and defining API endpoints. These endpoints can be queries (for fetching data) or mutations (for sending data).
For example, an authentication API service might have:
A mutation for logging in (loginUser) that sends a POST request.
A query for fetching user details (getUserProfile).
RTK Query automatically generates React hooks for these, such as useLoginUserMutation and useGetUserProfileQuery, making it easy to interact with APIs in components.

Using RTK Query in Components
Once the API service is set up, these hooks can be used in React components. Calling useLoginUserMutation triggers a login request, while useGetUserProfileQuery automatically fetches user data and handles loading and error states.

Why Use RTK Query?
Reduces Boilerplate: No need for managing state, useEffect, or additional API handling.

Automatic Caching & Re-fetching: Avoids redundant API calls and keeps data fresh.

Built-in Error Handling: Simplifies network request management.
By structuring the Redux store with RTK Query, applications become more scalable, maintainable, and performant, ensuring a better developer and user experience.

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-18T22:03:45.419Z

Day 56 | Mastering React Router: Navigating the Web Like a Pro

Building a seamless single-page application (SPA)? Then React Router should be your best friend. It’s the go-to library for managing navigation in React apps, ensuring users move between views effortlessly without full-page reloads.

But here’s the catch—many developers underutilize or misconfigure React Router, leading to sluggish performance, broken navigation, or confusing user experiences. Let’s break down some key insights:
React Router: The Core Features You Need to Know
Dynamic Routing: Unlike traditional static routing, React Router uses component-based routing, meaning routes are determined at runtime, adapting dynamically.
Nested Routes: Components can have child routes, keeping your UI structured and your code organized. Example:

jsx
<Route path=“/dashboard” element={}>
<Route path=“settings” element={} />

Protected Routes: Need authentication before accessing certain pages? Wrap your routes in a higher-order component (HOC) to check for user permissions.
URL Parameters & Query Strings: Fetch dynamic data based on URL parameters.
jsx
Copy code
<Route path=“/profile/:userId” element={} />
Then access userId using useParams().
Lazy Loading with Suspense: Speed matters. Load components only when needed using React.lazy().

jsx
const Dashboard = React.lazy(() => import(“./Dashboard”));

Common Mistakes That Slow You Down
Using Hash Routing When You Don’t Need It
Unless you’re building for legacy browsers, stick with BrowserRouter for clean URLs.
Forgetting Instead of in v6+
If you recently upgraded, remember Switch is deprecated—use Routes instead.
Not Handling 404s Properly
Always include a wildcard route for unmatched paths:

jsx
<Route path=“*” element={} />

The Bottom Line
React Router is more than just “links and paths”—it’s a powerful tool that can make or break user experience. Optimize routing logic, leverage performance boosters, and avoid common pitfalls to build apps that feel fluid and intuitive.

What are your biggest challenges with React Router? Drop your thoughts below!

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-19T20:43:19.743Z

Day 57 | The Problem with Vibe Coding: Why Students Should Still Learn to Code

There’s a growing narrative that students shouldn’t bother learning to code because AI can do it for them. This idea, often disguised as “vibe coding” (where people rely on AI-generated code without understanding how it works), is dangerous. The reasoning? Just as calculators perform math, kids don’t need to learn arithmetic, right? Wrong.

Learning to Code is Not About Typing Code

People misunderstand the purpose of coding education. It’s not about memorizing syntax—it’s about problem-solving, logic, and breaking down complex tasks. Great developers aren’t just code generators; they are problem solvers who understand system design, efficiency, and optimization.

Just because an AI can generate code snippets doesn’t mean it can build maintainable, scalable, and secure software on its own. If students rely on AI without understanding the underlying logic, they become copy-paste engineers, not actual software engineers.

The Future of Software Engineering is Changing—But Not in the Way You Think

Yes, AI is evolving. Yes, AI-assisted coding (GitHub Copilot, ChatGPT, etc.) is making development faster. But rather than replacing programmers, AI is augmenting them.

AI is great at: Generating boilerplate code Suggesting fixes for common errors Speeding up development workflows

But it’s terrible at: Understanding the business logic behind software Debugging complex, system-wide issues Writing code that is reliable and secure without human oversight

Andrew Ng, one of the most respected AI researchers and professors, shares this viewpoint: AI isn’t replacing programmers—it’s making them 10x more effective. But to take advantage of this, developers need strong fundamentals.

Telling Students “Don’t Learn to Code” is Bad Advice

Imagine telling an aspiring writer not to learn grammar because spellcheck exists. Or telling a surgeon they don’t need anatomy because robotic assistants exist. It’s the same logic when people argue students shouldn’t learn to code.

Yes, AI-generated code is impressive. But without foundational knowledge, how do you know if that code is efficient, secure, and actually works?

The best engineers of the future won’t just know how to code. They’ll know how to think in code—leveraging AI as a tool, not a crutch.

The bottom line? Students should absolutely keep learning to code. But they should also learn how to code with AI, not instead of AI.

What’s your take on AI-assisted coding? Is it making people better engineers or just making them dependent on AI? Let’s discuss!

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-20T20:44:59.252Z

Day 58: Mastering Backend Testing with Postman

One of the most powerful tools in a developer’s arsenal is Postman. It helps track down the source of issues by simulating API requests and verifying responses before integrating with the frontend. Let’s break down how Postman makes backend testing efficient and how to seamlessly transition from backend to frontend testing.

How Postman Simplifies Backend Testing
Postman is more than just an API testing tool—it’s a comprehensive platform that can be used to test endpoints, validate responses, and debug issues. Here’s how it helps identify the root cause of bugs:

Isolate Backend Issues Early
By directly hitting backend APIs, you can determine whether an issue is rooted in the backend or arises from frontend integration. For instance, if an API call fails in Postman but works on the frontend, the issue likely lies in how the frontend handles the response.
Test with Precision and Efficiency
Instead of blindly navigating the entire system, use Postman to make precise API calls with various inputs and observe how the backend responds. This saves time and gives clarity on where the problem originates.
End-to-End API Testing
Postman supports testing complete user flows by chaining multiple API requests. This is particularly useful when simulating multi-step processes such as user registration and login.

Best Practices for Effective Testing
To make your testing organized and effective, here are some essential practices:

Organize Endpoints with Collections
Group your endpoints into collections based on functionality:
User Management Collection: Test all user-related endpoints like registration, login, and profile updates.

Product Management Collection: Group product CRUD operations.
Order Processing Collection: Include endpoints related to placing and tracking orders.

By structuring your collections this way, you’ll maintain clarity and make it easier to test related endpoints in bulk.

Follow the Happy Path First
Start by testing the happy path—the optimal scenario where everything works as intended. Once validated, move on to edge cases and negative testing to see how the system handles unexpected inputs.
Use Environment Variables
Instead of hardcoding URLs or credentials, use environment variables. This makes it simple to switch between development, staging, and production environments without manually editing every request.
Automate with Test Scripts
Postman’s scripting feature allows you to run assertions after every request. For instance:
javascript
pm.test(“Status code is 200”, function () {
pm.response.to.have.status(200);
});

This simple script checks that the response status is 200 OK and alerts you if it’s not, making error tracking more manageable.

Document Your Tests
Good documentation not only helps you but also your team. Add descriptions to your requests and collections to explain their purpose and how to use them.

100daysofcode lebanon-mug

postman762×926 55.4 KB

Diana_Farhat · 2025-03-21T13:05:51.591Z

Day 59 | Understanding Different SWE Career Paths

Breaking into software engineering can be overwhelming, especially with roles like backend, frontend, full-stack, DevOps, mobile, and data engineering. Understanding the differences early on can set you up for success in interviews and unlock better opportunities.

Why Does It Matter? Imagine preparing for a backend engineering role by mastering frontend frameworks—sounds counterproductive, right? Knowing the differences helps you focus your learning and prep strategically. Each role demands unique skills and coding practices, and understanding them can save you time and effort.

Backend Engineers: Leetcode Kings Backend engineers handle logic and data management. They master algorithms and data structures (Leetcode is essential) and work with languages like Python, Java, or Go. System design and scalability are crucial skills. Focus on complex problem-solving and competitive programming.

Frontend Engineers: UX Artists Frontend engineers bring visual elements to life and ensure smooth user interaction. They excel in HTML, CSS, JavaScript frameworks (React, Angular), and UI/UX design. Interviews often test dynamic interfaces and DOM manipulation.

Full-Stack Engineers: Versatile Builders Full-stack engineers handle both frontend and backend tasks. They know frameworks like MERN or LAMP, API design, and integration. Interviews cover building full applications and bridging client-server logic.

DevOps Engineers: Deployment Experts DevOps engineers maintain smooth software deployment and CI/CD processes. They master tools like Docker, Jenkins, and cloud platforms (AWS, GCP). Be ready to discuss automated testing and server reliability.

Mobile Engineers: App Builders Mobile engineers develop apps for iOS and Android using Swift, Kotlin, or cross-platform frameworks (Flutter, React Native). Key topics include performance optimization and hybrid vs. native approaches.

Final Thoughts Understanding software engineering roles early on gives you a major edge. Target your learning, build relevant projects, and practice role-specific interview questions. Master the right skills to become the software engineer you aspire to be!

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-22T16:39:37.731Z

Day 60 | Boost Performance Without Breaking the Bank: Server Optimization Tips for SWE

When your application starts slowing down, the knee-jerk reaction is to pay for more server space. But why not first squeeze every bit of performance out of your existing setup? Here’s a technical deep dive into some crucial optimizations that can make a world of difference before you open your wallet.

Indexing Matters
Poor indexing is one of the primary culprits behind sluggish database queries. Before investing in bigger servers, take a close look at your database schema:
Create Indexes on Frequently Queried Fields: Identify columns that are frequently involved in WHERE, JOIN, and ORDER BY clauses.
Composite Indexes: Combine multiple columns when they are commonly used together.
Clustered vs. Non-Clustered: Choose wisely based on your data retrieval patterns.
Regularly Update Statistics: Keep the query optimizer informed about data distribution.
Optimize Your Queries
Even well-indexed databases can struggle if your queries are inefficient.
Use Query Profiling Tools: PostgreSQL’s EXPLAIN, MySQL’s EXPLAIN ANALYZE, or SQL Server’s Query Analyzer are invaluable.
Minimize Select Statements: Instead of SELECT *, specify only the columns you need.
Avoid Subqueries When Possible: Use joins or common table expressions (CTEs) instead.
Batch Your Updates: Instead of executing multiple small updates, combine them into one.
Prepared Statements: Leverage them to improve performance and security.
Caching Is Your Best Friend
If your application constantly retrieves the same data, you’re wasting server resources. Implement caching at multiple levels:
In-Memory Caching: Use Redis or Memcached for rapid data retrieval.
HTTP Caching: Leverage response caching and cache headers for static resources.
Application-Level Caching: Cache expensive computations and frequently accessed data.
Database Query Caching: Store the results of common queries.
Efficient Data Storage
Bloated databases can drastically slow performance. Keep your data lean and mean:
Archive Old Data: Move less frequently accessed data to cheaper storage solutions.
Partitioning: Split large tables to reduce the scanning effort.
Data Compression: Compress old logs and rarely accessed datasets.
Garbage Collection: Periodically clean up temporary tables and expired data.
Load Balancing and Traffic Distribution
If your application is highly trafficked, distributing the load can significantly improve performance:
Reverse Proxying: Use NGINX or HAProxy to balance incoming requests.
Horizontal Scaling: Add more instances rather than increasing individual server specs.
Content Delivery Networks (CDN): Serve static assets from edge locations for quicker delivery.

Stay tuned for a part 2!

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-23T19:14:19.145Z

Day 61 | The Common Mistake of Newbies

When building web applications, many developers implement role-based access control (RBAC) to ensure that only authorized users can access certain pages or features. However, a common mistake among newbies is hiding protected routes only on the frontend without properly securing them on the backend. This creates a serious security vulnerability, allowing unauthorized users to bypass client-side restrictions and access sensitive data or functionality. Let’s explore why this happens, the risks involved, and how to fix it properly.

The Mistake: Frontend-Only Protection
Many developers rely on frontend frameworks to handle routing and conditionally display content based on user roles. While this may seem like an effective way to restrict access, it only prevents unauthorized users from seeing certain UI elements. It does not actually prevent them from accessing restricted resources or performing actions directly on the backend.
The frontend is fully accessible to users, meaning they can inspect and modify it using developer tools. If the backend does not have proper role-based authorization, attackers can bypass frontend restrictions and make direct requests to restricted endpoints.

The Risks: Why This Is Dangerous
Direct API Access: Without backend authorization, an attacker can send requests to restricted endpoints using external tools, even if they cannot access them through the UI.

Client-Side Tampering: Since frontend logic runs in the browser, users can modify it to remove restrictions and gain unauthorized access.
Security Through Obscurity Is Not Security: Just because something is hidden on the frontend doesn’t mean it is protected. Sensitive operations remain exposed if the backend does not enforce security.
Unauthorized Data Exposure: If the backend does not validate user roles, attackers may access confidential data intended only for specific roles.

The Fix: Proper Backend Authorization
The correct way to secure protected routes is to enforce RBAC on the backend as well. This means ensuring that every request to sensitive resources is verified against user roles before granting access.

Enforce Role-Based Authorization on Every Request
The backend should check the user’s role before processing any request to protected resources. Simply preventing access through the UI is not enough.
Use Centralized Role-Based Access Control
Instead of implementing role validation separately for each action, a centralized mechanism should handle access control across the application. This reduces redundancy and ensures consistency in security policies.
Secure API Calls with Authentication and Permissions
Authentication mechanisms such as token-based authentication should be used to verify user identity and role. This ensures that only authorized users can access certain functionalities, even if they attempt to bypass frontend restrictions.

100daysofcode lebanon-mug

Diana_Farhat · 2025-03-24T20:57:03.715Z

Day 62 | Kickstarting My SQL Series: The Foundation of Data Modeling with the ER Model!

Hey #LinkedInCommunity! Excited to launch my SQL series with a deep dive into one of the most fundamental concepts in database design—the Entity-Relationship (ER) Model!

Where It All Began

The ER model was introduced in 1976 by the brilliant Professor Peter Chen (Chen Pin-Shan) . His groundbreaking paper laid the foundation for how we visualize and structure data relationships today. Before ER, database design was more abstract—Chen gave us a clear, graphical way to map entities, attributes, and relationships.

Why Does the ER Model Matter?

Visual Clarity : It turns complex data structures into easy-to-understand diagrams.

Blueprint for Databases : Serves as the first step before writing SQL schemas.

Improves Efficiency : Helps spot design flaws early, saving time and headaches later.

Key Components

Entities → Real-world objects (e.g., Customer, Product)

Attributes → Properties of entities (e.g., CustomerID, ProductName)

Relationships → How entities interact (e.g., Customer buys Product)

Stay tuned for Part 2, where we’ll translate ER diagrams into SQL tables!

Discussion Time!

How has the ER model helped you in your projects?

Any database design challenges you’ve faced?

#sql 100daysofcode lebanon-mug