DEV Community: Mesfin Tegegne

Make Your React App Shareable with URL State Management 🚀

Mesfin Tegegne — Thu, 27 Mar 2025 20:13:50 +0000

Hey Dev.to community!
I recently added URL state management to my Spotify-inspired music app, Moodify, and I’m blown away by how simple and powerful it is. If you’ve ever wanted your app’s state to be shareable, bookmarkable, and stateless without extra libraries, let me show you why URL state management is a game-changer. Let’s dive in with a quick example from my project!, but first.

✨Why URL State Management is Wonderful?

Imagine: you’re using a music app, and you filter songs by a “Happy” mood. You want to share that exact view with a friend. Without URL state, you’d need to manually tell them to select “Happy” after opening the app. But with URL state management, you can share a link like https://moodify-drab.vercel.app/?mood=Happy, and—bam!, they land on the same view instantly. Here’s why it’s awesome:

🔹 Shareable Links: Users can copy-paste URLs to share exact app states.

🔹 Bookmarkable: Refresh the page, and the state persists & no local state needed.

🔹 Stateless: Reduces reliance on Context or local state, minimizing re-renders.

I implemented this in Moodify using useSearchParams from react-router-dom, and the result is magical. Let’s see it in action!


✏️// MoodCategories.tsx (Before)
const MoodCategories = ({ moods }) => {
  const { selectedMood, setSelectedMood } = useMoodify();

  return (
    <div>
      {moods.map((mood) => (
        <button
          key={mood}
          onClick={() => setSelectedMood(mood)}
          className={selectedMood === mood ? 'active' : ''}
        >
          {mood}
        </button>
      ))}
    </div>
  );
};

🔗 URL: https://moodify-drab.vercel.app

Problem: Clicking “Happy” updated selectedMood in Context, but the URL stayed the same. Sharing the link wouldn’t preserve the “Happy” filter, and refreshing the page reset it to “All”.

🌐 URL State Management with useSearchParams

I refactored Moodify to use useSearchParams to store the selected mood in the URL. The state now lives in the the query param ?mood=, making it shareable and persistent. Here’s the updated flow:

Step 1: Read and Write URL State in Home.tsx
I used useSearchParams to manage the mood query param and sync it with MoodifyProvider.

✏️// Home.tsx
import { useSearchParams } from 'react-router-dom';
import { useMoodify } from '../hooks/useMoodify';
import { useEffect } from 'react';
import MoodCategories from '../component/MoodCategories';

const Home = () => {
  const { moods, setMood, thumbnailSongs } = useMoodify();
  const [searchParams, setSearchParams] = useSearchParams();

  const currentMood = (searchParams.get('mood') as Categories) || 'All';

  const HandleMoodSelect = (newMood) => {
    setSearchParams({ mood: newMood });
  };

  useEffect(() => {
    setMood(currentMood);
  }, [setMood, currentMood]);

  return (
    <div>
      <MoodCategories
        moods={moods}
        currentMood={currentMood}
        onMoodSelect={HandleMoodSelect}
      />
      ...
    </div>
  );
};

Step 2: Update MoodCategories to Use URL State

I passed the URL-derived currentMood and HandleMoodSelect to MoodCategories as props, removing the dependency on Context for category selection.

✏️// MoodCategories.tsx
const MoodCategories = ({ moods, currentMood, onMoodSelect }) => {
  return (
    <div className="flex gap-2">
      {moods.map((mood) => (
        <button
          key={mood}
          onClick={() => onMoodSelect(mood)}
          className={`border-1 rounded-full ${
            currentMood === mood ? 'bg-green-500 text-white' : 'bg-gray-200'
          }`}
        >
          {mood}
        </button>
      ))}
    </div>
  );
};

🔗 URL Before: https://moodify-drab.vercel.app

🔗 URL After: https://moodify-drab.vercel.app/?mood=Happy

🧩 Result: Clicking “Happy” updates the URL to ?mood=Happy. Share that link, and anyone can open the app with “Happy” songs pre-filtered. Refresh the page! it still works!

🎉 Bonus: Handling Invalid Moods
What if someone types ?mood=horror (not a valid mood)? I added validation to default to “All” and show a toast notification:

✏️// Home.tsx (Validation)
const urlMood = searchParams.get('mood') as Categories;
const currentMood = moods.includes(urlMood) ? urlMood : 'All';

useEffect(() => {
  if (urlMood && !moods.includes(urlMood)) {
    notify('Invalid category, defaulting to All');
    setSearchParams({ mood: 'All' });
  }
  setMood(currentMood);
}, [urlMood, moods, setMood, notify, setSearchParams]);

🔗 Complete Code: Github

🔄 Finally!
Url state management made Moodify feel more professional and user-friendly. It’s a small change with a big impact—your users will love being able to share and bookmark their app state. Plus, it reduces Context usage, which means fewer unnecessary re-renders.

Why Testing Shouldn’t Be an Afterthought: Key Principles for Effective Testing

Mesfin Tegegne — Fri, 21 Feb 2025 14:21:44 +0000

Testing is one of the most underrated practices in software development. While developers understand its benefits, it's often pushed to the final phase or skipped altogether. However, effective testing is essential for building reliable, maintainable, and bug-free software. In this post, we’ll explore key principles for writing meaningful, maintainable, and trustworthy tests.
Essential Terms

Unit Test :
Unit testing focuses on testing individual functions or components. Using modern frameworks, achieving 80–90% test coverage is expected. While 100% coverage is debated, it doesn't guarantee bug-free code but significantly reduces risks.
Integration Test :
This tests how different components interact within the application.
End-to-End (E2E) Test :
E2E testing simulates user interactions to ensure the application meets its overall goals.
TDD (Test-Driven Development) :
TDD involves writing tests before actual development. This approach ensures that the focus remains on the output of functions or components rather than specific implementations, leading to a more robust application.
Test Code Coverage :

Modern test result tools help visually assess test results and the amount of code covered. This is critical for identifying whether critical parts of the project are adequately tested.

Key Testing Principles

Don’t Test for the Sake of Testing:

Testing should contribute value to the development process. Avoid writing tests just for the sake of increasing coverage metrics. Two common pitfalls are False Positives and False Negatives.

False Positive :

A test passes even when the implementation is incorrect. This gives a false sense of security.
Example :

Issue : The test will pass even if add returns an incorrect value like 1 instead of 4.

False Negative :

A test fails even when the implementation is correct. This creates unnecessary confusion and debugging effort.

Example :

Issue : The function correctly returns false for 0, but the test expects true.

Solution : Strike a balance between being too loose or too strict.

Good Tests Are Maintainable, Robust, and Trustworthy

Maintainable :
Tests should be easy to update as the codebase evolves. Avoid tightly coupling tests to specific implementation details.

Example :
Tests should be easy to update as the codebase evolves. Avoid tightly coupling tests to specific implementation details.

Robust :
A robust test validates behavior, not implementation. Avoid overly general or specific assertions and strike a balance.

Example :

Trustworthy :
A trustworthy test accurately reflects the state of the code. If the test passes, the code works as expected. If it fails, the issue lies in the implementation, not the test.

Example :

3. Each Test Should Be Isolated
Tests should run independently to avoid cascading failures. Use mocks or stubs to isolate dependencies.

Example :

Conclusion
While no software can achieve 100% perfection through testing, implementing tests early and effectively is the easiest and cheapest way to catch bugs before they reach production. By focusing on writing meaningful, maintainable, and trustworthy tests, you can build robust applications that stand the test of time.

How SQL Enhances Your Data Science Skills

Mesfin Tegegne — Sat, 13 Jul 2024 13:36:18 +0000

Welcome to the third installment of my series on data science. Over the past two weeks, I explored some fundamental aspects of data science. In my first post, I discussed key concepts and tools in data science. Last week, I discussed into the power of Python for data analysis. This week, let’s dive into another critical skill for any data scientist: SQL (Structured Query Language).

Why SQL is Essential for Data Science

SQL is the backbone of data manipulation and retrieval in relational databases. Mastering SQL empowers data scientists to efficiently query, manipulate, and analyze data stored in databases. Here’s why SQL is indispensable:

1. Efficient Data Retrieval: SQL allows you to quickly retrieve data from large datasets using simple queries.

2. Data Manipulation: With SQL, you can perform complex data transformations such as filtering, aggregating, and joining data from multiple tables.

3. Data Cleaning: SQL helps in cleaning data by identifying and handling missing or inconsistent values.

4. Integration with Other Tools: SQL integrates seamlessly with other data science tools and languages like Python, R, and BI tools, enabling smooth workflows.

Key SQL Concepts for Data Scientists

Here are some fundamental SQL concepts and how they enhance data analysis:

1. SELECT Statement:

The SELECT statement is the cornerstone of SQL, used to fetch data from a database.

Example.

SELECT * FROM employees;

This query retrieves all records from the employees table.

2. WHERE Clause:

The WHERE clause filters records based on specific conditions.

Example.

SELECT * FROM employees WHERE department = 'Sales';

3. JOIN Operations

Joins are used to combine rows from two or more tables based on a related column.

Example:

SELECT e.name, d.department_name
FROM employees e
JOIN departments d ON e.department_id = d.department_id;

This query retrieves employee names along with their corresponding department names.

4. Aggregate Functions

Aggregate functions perform calculations on a set of values and return a single value.

Example:

SELECT department, COUNT(*) AS employee_count
FROM employees
GROUP BY department;

This query counts the number of employees in each department.

Practical Examples and Visualizations

Let’s look at some practical SQL examples and how they can be visualized.

Example 1: Employee Distribution by Department
SQL Query:

SELECT department, COUNT(*) AS employee_count
FROM employees
GROUP BY department;

Visualization:

Example 2: Average Salary by Department
SQL Query:

SELECT department, AVG(salary) AS average_salary
FROM employees
GROUP BY department;

How SQL Enhances Data Science Skills

1. Data Exploration: SQL enables thorough data exploration by allowing you to query and understand data distributions, trends, and anomalies.

2. Data Preparation: Efficiently prepare data for analysis by cleaning and transforming datasets directly within the database.

3. Data Integration: Combine data from multiple sources and tables to create comprehensive datasets for analysis.

4. Performance Optimization: Learn to optimize queries for better performance, which is crucial when dealing with large datasets.

Conclusion

SQL is a powerful tool that complements other data science skills, making it easier to handle and analyze data effectively. By mastering SQL, you can enhance your ability to retrieve, manipulate, and analyze data, thereby improving your overall data science capabilities.

Stay tuned for next week’s post, where we’ll explore another exciting topic in our data science journey. Happy querying!

My Experience with Python for Data Analysis

Mesfin Tegegne — Tue, 02 Jul 2024 12:31:44 +0000

Hello, everyone! 🌟
Welcome back to the second installment of my journey into the world of Data Science and Machine Learning. Today, I want to delve deeper into my experience with Python for data analysis. This post will focus on the technical aspects of how Python and its libraries have empowered my journey in understanding and applying Data Science concepts.

Why Python for Data Analysis?
Python emerged as my language of choice for several reasons. Its versatility, extensive libraries, and readability make it ideal for handling complex data tasks. Here’s a closer look at how Python has been instrumental in my learning journey:

Key Python Libraries for Data Analysis

1. Pandas:

Functionality: Pandas provides powerful data structures like DataFrames, essential for handling and manipulating structured data efficiently.

Learning Experience: Mastering Pandas has been crucial for data cleaning, transformation, and analysis. Techniques such as handling missing values (df.dropna()), grouping data (df.groupby()), and merging datasets (df.merge()) have streamlined my workflow significantly.

2. NumPy:

Functionality: NumPy supports large multi-dimensional arrays and matrices, with a wide range of mathematical functions for operations.

Learning Experience: Understanding NumPy’s array operations (np.array(), np.mean(), etc. has enhanced my ability to perform numerical computations and data manipulations effectively.

3. Matplotlib and Seaborn:

Functionality: These libraries offer robust tools for creating visualizations, from basic plots to complex graphs.

Learning Experience: Visualizing data with Matplotlib (plt.plot(),plt.hist()) and Seaborn (sns.scatterplot(), sns.heatmap()) has been pivotal in gaining insights into data patterns and relationships.

Real-World Application

While I've used simplified sample data here for clarity, in real-world scenarios, datasets can be vast and sourced from diverse channels. However, the techniques and principles for data handling remain consistent, ensuring scalability and accuracy in analysis.

Example Visualizations

Let’s revisit some practical examples of visualizing data:

Histogram

import matplotlib.pyplot as plt
import pandas as pd

data = pd.Series([1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5])

plt.figure(figsize=(10, 6))
plt.hist(data, bins=5, color='skyblue', edgecolor='black')
plt.title('Histogram of Sample Data')
plt.xlabel('Value')
plt.ylabel('Frequency')
plt.show()

The plot generated from above code

Scatter Plot

import seaborn as sns
import pandas as pd

df = pd.DataFrame({
    'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    'y': [2, 3, 4, 5, 4, 3, 6, 7, 8, 9]
})

plt.figure(figsize=(10, 6))
sns.scatterplot(x='x', y='y', data=df, color='red')
plt.title('Scatter Plot of x vs. y')
plt.xlabel('x')
plt.ylabel('y')
plt.show()

The plot generated from above code

Box Plot


import seaborn as sns
import pandas as pd

data = pd.Series([1, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 6, 6, 7])

plt.figure(figsize=(10, 6))
sns.boxplot(data=data, color='lightgreen')
plt.title('Box Plot of Sample Data')
plt.ylabel('Value')
plt.show()

The plot generated from above code

Python for Data Analysis

Python for data analysis has been a journey filled with exploration and growth. Here’s how I approached mastering the technical aspects:

1. Data Cleaning:

Approach: Using Pandas, I tackled data cleaning challenges such as handling missing values and formatting inconsistencies (df.fillna(), df.drop_duplicates(), df.astype()).

Significance: Clean data is fundamental for accurate analysis. Mastering data cleaning techniques enabled me to prepare datasets for meaningful insights.

2. Exploratory Data Analysis (EDA):

Process: Leveraging Pandas and visualization tools, I performed EDA to uncover patterns, outliers, and correlations (df.describe(), df.corr(), visual plots).

Insight: EDA provided a foundation for understanding data characteristics and informed subsequent analysis and modeling decisions.

3. Statistical Analysis:

Application: Using NumPy and SciPy, I conducted statistical analyses to derive insights and validate hypotheses (np.mean(), hypothesis testing).

Impact: Statistical techniques enhanced the depth of my analysis and supported data-driven decision-making processes.

4. Data Visualization:

Utilization: Creating compelling visualizations with Matplotlib and Seaborn facilitated effective communication of findings (plt.plot(), sns.heatmap()).

Effectiveness: Visualization played a crucial role in presenting insights clearly and persuasively to stakeholders.

Practical Tips for Aspiring Data Analysts

Continuous Learning: Start with foundational Python skills and progressively explore data analysis libraries.

Hands-On Practice: Apply learning to real-world datasets to reinforce concepts and gain practical experience.

Community Engagement: Engage with online communities and forums to seek guidance, share insights, and stay updated with industry trends.

Conclusion
My journey with Python for data analysis has been transformative, equipping me with essential skills to navigate complex data landscapes effectively. Aspiring data analysts, embrace Python’s capabilities, hone your technical skills, and dive into the vast world of data insights.

Stay tuned for next week’s post, where I’ll explore the nuances of data collection and cleaning—the cornerstone of robust data analysis. Let's continue this exciting journey together! 🌟

My Journey to Learn Data Science and Machine Learning

Mesfin Tegegne — Wed, 26 Jun 2024 13:32:12 +0000

For Developers Looking to Add Machine Learning to Their Toolkit

Hello, fellow developers! 🌟

Are you already proficient in full-stack development, particularly with the MERN stack (MongoDB, Express.js, React, Node.js)? Have you ever wondered how integrating Data Science and Machine Learning could elevate your projects and career to new heights? If so, this blog post is for you. This blog is the first in a series documenting my journey to combine the two technologies. We'll explore the key concepts and tools in Data Science, discuss their significance, and provide you with a clear learning path to get started. Whether you're considering how to integrate Data Science into your projects or simply want to enhance your professional toolkit, read on to discover how accessible and valuable these skills can be.

Why and When Full-Stack Developers Should Learn Data Science and Machine Learning

Data Science and Machine Learning (ML) are not just buzzwords; they are powerful tools that can enhance the functionality and intelligence of your applications. Here are some compelling reasons why and scenarios when you, as a full-stack developer, should consider adding these skills to your toolkit:

1. Enhanced User Experience: Implementing ML algorithms can provide personalized user experiences, such as recommendation systems, dynamic content, and predictive search results.

Example: A recommendation engine for an e-commerce website that suggests products based on user behavior.

2. Data-Driven Decision Making: Data Science enables you to analyze large datasets, extract meaningful insights, and make data-driven decisions to improve application performance and user satisfaction.

Example: Analyzing user engagement data to determine the best time to send push notifications.

3. Solving Complex Problems: ML can solve complex problems that traditional programming might struggle with, such as natural language processing, image recognition, and predictive analytics.

Example: Using sentiment analysis to gauge customer feedback from reviews and social media.

4. Predictive Analytics: Forecasting trends or user behaviors by analyzing past data needs ML models to make accurate predictions.

Example: Predicting future sales based on historical data and market trends.

5. Natural Language Processing (NLP): Understanding and processing human language, such as chatbots or sentiment analysis, is best handled with ML techniques.

Example: Creating a customer support chatbot that can understand and respond to user queries.

6. Image and Video Analysis: Recognizing and categorizing images or videos, such as in security applications, requires ML algorithms.

Example: Implementing facial recognition for secure user authentication.

7.Anomaly Detection: Identifying unusual patterns or behaviors, often used in fraud detection or cybersecurity, relies on ML models to detect anomalies.

Example: Detecting fraudulent transactions in a financial application.

My Journey to Learn Data Science

As a developer, I started with traditional programming and full-stack development using the MERN stack. While it enabled me to build dynamic and interactive web applications, I realized there were limitations that traditional programming couldn't overcome. This led me to explore Data Science and Machine Learning.

Key Concepts in Data Science

1. Data Collection and Cleaning:

Data Collection: The process of gathering data from various sources, including databases, APIs, web scraping, and more.
Data Cleaning: Ensuring data quality by handling missing values, removing duplicates, and correcting inconsistencies.

2. Exploratory Data Analysis (EDA):

EDA: Analyzing datasets to summarize their main characteristics, often using visual methods. EDA helps in understanding the data's structure, detecting outliers, and identifying patterns.

3. Statistical Analysis:

Descriptive Statistics: Measures that summarize data (e.g., mean, median, mode, standard deviation).
Inferential Statistics: Techniques that allow us to infer trends about a population based on a sample of data.

4. Data Visualization:

Visualization Tools: Libraries and tools like Matplotlib, Seaborn, and Tableau help in creating visual representations of data to communicate insights effectively.

5. Machine Learning:

Supervised Learning: Algorithms that learn from labeled data to make predictions (e.g., linear regression, decision trees).
Unsupervised Learning: Algorithms that identify patterns in unlabeled data (e.g., clustering, dimensionality reduction).
Reinforcement Learning: Algorithms that learn by interacting with an environment to maximize cumulative reward.

6. Model Evaluation and Validation:

Evaluation Metrics: Metrics like accuracy, precision, recall, and F1-score to assess model performance.
Validation Techniques: Techniques like cross-validation to ensure model generalizability.

Essential Tools for Data Science

1. Programming Languages:

Python: The most popular language for Data Science, known for its simplicity and extensive libraries.
R: Another powerful language, particularly used for statistical analysis.

2. Libraries and Frameworks:

Pandas: For data manipulation and analysis.
NumPy: For numerical computations.
Scikit-Learn: For machine learning algorithms.
TensorFlow and Keras: For deep learning.

3. Data Visualization Tools:

Matplotlib and Seaborn: Python libraries for creating static, animated, and interactive visualizations.
PyCharm: A popular Python IDE with extensive features for professional developers.

How to Get Started

1. Learn Python:

Python is the lingua franca of Data Science. Familiarize yourself with its basics and then move on to data-specific libraries.

2. Take Online Courses:

Platforms like Coursera, edX, and DataCamp offer comprehensive courses on Data Science and Machine Learning.

3. Practice with Projects:

Apply your knowledge by working on real-world projects. Kaggle is a great platform for finding datasets and participating in competitions.

4. Join a Community:

Engage with the Data Science community through forums, meetups, and social media to stay updated and seek guidance.

Conclusion
Exploring Data Science and Machine Learning can open new horizons for full-stack and frontend developers. While the learning curve may seem steep, starting with the key concepts and essential tools can make the journey manageable and rewarding. Stay curious, practice regularly, and soon you'll be integrating powerful data-driven insights into your applications.

Stay tuned for more insights and practical tips on this exciting journey. Let’s embark on this learning adventure together! 🌟