DEV Community: Ihor Filippov

SendGate — self-hosted open-source alternative to ZeroBounce / MillionVerifier

Ihor Filippov — Thu, 05 Feb 2026 22:07:06 +0000

Hey everyone.

About a month ago I open-sourced Senlo. Right now the project has around 150 stars. Maybe not huge numbers, but for my first OSS experience it honestly feels great.

Lately I was spending most of my time working on an email validation package. But since i decided to focus Senlo more on transactional and product lifecycle emails, the need for this validation logic inside the main project kind of disappeared. so instead of letting that work just sit there, i decided to release it on github as a separate self-hosted service.

It’s basically a lightweight self-hosted email validation and risk analysis utility. You run it on your own server, no database or external accounts required.

It checks email syntax, looks up mx records, and inspects spf / dmarc configuration to understand how the domain is set up. It also tries to detect catch-all domains, disposable providers, and role-based addresses like info@ or support@ that usually behave differently in campaigns.

Instead of only returning valid / invalid, it gives a simple risk score based on multiple small heuristics — missing auth records, unusual mx setups, shared or suspicious infrastructure patterns, temporary-looking domains, and similar signals. Everything is processed in memory, no email lists are stored, and you can use it through a small rest api or run bulk csv checks locally. it’s more of a developer / internal utility than a full platform.

Here is the link to repo and to demo .

If you find it useful, a star or any feedback on github would mean a lot.

Got 120+ stars in just two weeks since my project was released.

Ihor Filippov — Tue, 20 Jan 2026 13:13:45 +0000

I recently open sourced Senlo and the response honestly surprised me. Hitting more than 120 GitHub stars in such a short time was a strong signal that the problem space resonates with others. It is motivating to see developers follow the project, open issues, and share thoughtful feedback, especially at an early stage.

Right now I am actively working on the next big step which is integrating AI directly into the email editor. The goal is to make everyday work with email content faster and more intuitive while keeping full control in the hands of the user. Still early days, but the momentum so far gives me a lot of energy to keep pushing forward.

Link to try and support me with ⭐️ - https://senlo.io/

I am building a self-hosted dnd email builder and campaign management platform

Ihor Filippov — Thu, 08 Jan 2026 12:26:38 +0000

Hi, everyone!

I’m building an open-source, self-hosted email builder and campaign management platform.

When I started this project, I had a clear flow in mind: I install the platform on my own server, connect Resend or another similar provider that is much cheaper than Brevo, Mailchimp, and others. After that, for example, people from the marketing team can create emails on their own, set up campaigns, and manage everything without developer involvement.

With this project you can:

Build emails in a visual editor without writing code, then export to MJML or plain HTML, or use them directly in the platform

Use a modern drag-and-drop editor

Manage email campaigns in one place

Extend and customize it to fit your product or workflow

The platform also supports personalization and transactional emails

Current status: MVP. Contributions and feedback are welcome.

Landing page - https://senlo.io/

Github - https://github.com/IgorFilippov3/senlo

Build tree view with react-arborist [part 1]

Ihor Filippov — Sun, 27 Jul 2025 17:46:01 +0000

If simply reading this tutorial isn't enough for you, you can go here and write code alongside it.

Introduction

React Arborist is a powerful React library designed for building interactive tree components with virtualization support. Unlike simple nested lists, react-arborist provides advanced features like drag-and-drop, multi-selection, inline editing, and most importantly - virtualization for handling large datasets efficiently.

In this tutorial series, we'll explore:

Part 1: Basic setup and simple tree rendering.
Part 2: Adding interactivity with selection, editing and deletion.
Part 3: Search and custom styling.

Why React Arborist?

Traditional tree implementations often struggle with performance when dealing with large datasets. React Arborist solves this by:

Virtualization: Only renders visible nodes, enabling smooth scrolling through thousands of items
Built-in interactions: Drag-and-drop, selection, and editing work out of the box
Flexible data structure: Works with any hierarchical data format
Customizable rendering: Full control over how nodes appear and behave

Setup local environment

npm create vite@latest my-arborist-app -- --template react-ts
cd my-arborist-app
npm install

npm install react-arborist

and run the project

npm run dev

Basic Tree Structure

Let's start with a simple file system example. React Arborist expects your data to have a specific structure with id, name, and optional children properties:

/src/types.ts

export type FileNodeType = "folder" | "file";

export interface FileNode {
  id: string;
  name: string;
  type?: FileNodeType;
  children?: FileNode[];
}

Here we added an additional type, FileNodeType, to distinguish a file from a folder. We will need it in the future.

Let's add some data to work with.
/src/data.ts

import type { FileNode } from "./types";

const data: FileNode[] = [
  {
    id: "1",
    name: "Documents",
    type: "folder",
    children: [
      {
        id: "2",
        name: "Projects",
        type: "folder",
        children: [
          { id: "3", name: "Website Redesign.pdf", type: "file" },
          { id: "4", name: "Mobile App Mockups.sketch", type: "file" },
        ],
      },
      { id: "5", name: "Resume.docx", type: "file" },
      { id: "6", name: "Cover Letter.pdf", type: "file" },
    ],
  },
  {
    id: "7",
    name: "Pictures",
    type: "folder",
    children: [
      { id: "8", name: "Vacation 2023", type: "folder" },
      { id: "9", name: "Family Photos", type: "folder" },
    ],
  },
  { id: "10", name: "Downloads", type: "file" },
];

export default data;

Now, it is time to create our first component with minimal configuration.
/src/FileExplorer

import React from 'react';
import { Tree } from 'react-arborist';
import data from './data';

const FileExplorer: React.FC = () => {
  return (
    <div>
      <Tree initialData={data}>
        {({ node, style, dragHandle }) => (
          <div style={style} ref={dragHandle}>
            {node.data.name}
          </div>
        )}
      </Tree>
    </div>
  );
};

export default FileExplorer;

And import it to App component.
App.tsx

import FileExplorer from "./src/FileExplorer";

export default function App(): JSX.Element {
  return <FileExplorer />;
}

By default, we only need to provide the initialData prop to render a functional Tree component.

If you've done everything correctly, a basic representation of our file tree should appear at the screen

Basic Styling, Icons and Configurations

Props enable us to manage how a component behaves. The Tree component provides a variety of useful props that we can use to customize it.

In our example, we'll pass the following props:

These settings are quite intuitive. The width and height define the size of the widget, while indent determines the spacing for nested items. The openByDefault prop determines whether the tree is expanded or collapsed when it first renders.

/src/FileExplorer.tsx

const FileExplorer: React.FC = () => {
  return (
    <div>
      <Tree
        initialData={data}
        width={500}
        height={500}
        indent={34}
        openByDefault={false}
      >
        {({ node, style, dragHandle }) => (
          <div style={style} ref={dragHandle}>
            {node.data.name}
          </div>
        )}
      </Tree>
    </div>
  );
};

Now let's add icons to visually distinguish files from folders.

/src/FileExplorer.tsx

import React from "react";
import { Tree } from "react-arborist";
import { File, Folder } from "lucide-react";
import data from "./data";

const FileExplorer: React.FC = () => {
  return (
    <div>
      <Tree
        initialData={data}
        width={400}
        height={500}
        indent={34}
        rowHeight={34}
        openByDefault={true}
      >
        {({ node, style, dragHandle }) => (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              ...style,
            }}
            ref={dragHandle}
          >
            <span style={{ marginRight: "8px" }}>
              {node.isLeaf ? <File /> : <Folder />}
            </span>
            <span>{node.data.name}</span>
          </div>
        )}
      </Tree>
    </div>
  );
};

Here we added icons from the lucide-react library. We also introduced a new prop, rowHeight, to ensure the icons don’t visually overlap with neighboring items. Additionally, we use the node.isLeaf property to determine whether a node is a file or a folder.

to be continued...

Deploy Next.js to Contabo VPS

Ihor Filippov — Tue, 23 Jan 2024 17:44:09 +0000

Introduction

A few days ago I experienced a significant increase users count on one of my web services.

The current server capabilities became insufficient, so I started thinking about scaling.

For hosting my service, I used PaaS (Platform as a Service) render.com

For those who are unfamiliar with PaaS - it's a service that helps you deploy your code in just a few clicks. All you need to do is connect your GitHub repository and add a few settings to your environment variables (host, port, database URL, etc.). On the other hand, such ease of setup comes at a relatively high cost for maintenance. Here are the pricing plans of render.com.

And here are the pricing plans of Contabo.

As you can see, the difference is huge!

I don't want to offend render.com in any case - if you need to quickly deploy an MVP and test the viability of your idea, it’s a great and very reliable service.

Getting started

In this tutorial, I will cover the following topics:

Setting VPS server with Contabo
Nginx and pm2
Installing a domain name with Namecheap and adding a SSL certificate to serve website through the HTTPS.

First of all, we need to visit Contabo, register and choose a pricing plan.

I chose the simplest one for $5.50. Next, select the term length and region. I chose US East, which cost me an additional $1.35. Default one Storage Type and raw Ubuntu OS for the image.

Then, choose a password for your root user. This information is essential to connect to your vps via ssh.

Next, visit the https://my.contabo.com/vps. You should see something like this.

Now, let’s connect to our server.

Open your terminal and type:

ssh root@<ip address>

your password.

Update your server

sudo apt-get update

Install Node.js and npm

sudo apt-get install nodejs
sudo apt-get install npm

And check actual version

node -v
npm -v

In my case, Node.js version 10 was installed, which was not suitable for my needs. You might encounter the same issue, so I will show you an alternative way to install Node.js.

First, you need to add the NodeSource repository to your system. NodeSource provides up-to-date versions of Node.js. To do this, we need first to install curl and then run this command followed by a bash script from NodeSource.

sudo apt-get install curl
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install nodejs

Instead of 18, you can chose any Node.js version you need.

Then, let’s add Next.js app to our VPS.

mkdir app && cd app
git clone <repository_name>
cd <repository_name>

Install dependencies, build and run our app.

npm install
npm run build
npm start

Now, by visiting http://<ip_address>:3000, you can see that your application is already running. The only issue is that we can't execute any other commands in the terminal. Also, if the terminal is closed, the application will stop working.

To resolve this issue, let's install pm2.

npm install -g pm2

PM2 is a popular process manager for Node.js applications. It's used to manage and keep Node.js applications online 24/7, ensuring they are kept running in the background even after the system reboots or crashes.

Then, let’s create a configuration file in our <repository_name> directory.

nano ecosystem.config.js

module.exports = {
  apps: [{
    name: "next-app",
    script: "npm",
    args: "start",
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: "8G",
    exec_mode: "cluster"
 }]
}

Here we define the name of our application for pm2. Number of instances to run. Also, we are setting that if the application uses more than 8 gigabytes of memory, pm2 will restart it automatically.

watch: false is need to tell the pm2 to not restart our app every time when the files in the current directory change.

Now, let’s start our app.

pm2 start next-app

To stop, reload or get current status of the app you can use following commands.

pm2 stop next-app
pm2 reload next-app
pm2 status

Setting up Nginx

Nginx is a powerful open-source web server software. It's known for its high performance, stability, rich feature set, scalability, and low resource consumption. Nginx is used not just as a web server but also as a reverse proxy, load balancer, and HTTP cache.

Install nginx

sudo apt-get install nginx

Add custom configuration file

cd /etc/nginx/conf.d
nano next_app.conf

server {
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass <ip_address>:<port>;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-For $scheme;
    }

    error_page 405 =200 $uri;
}

This configuration sets up a reverse proxy for a web application, directing traffic from yourdomain.com and www.yourdomain.com to a Next.js app.

Setting up domain

We need to visit a Namecheap, register and buy domain.

For simplicity, I will use yourdomain.com as a placeholder for your domain.

After purchasing a domain, you should see something like this.

Now, go back to the Contabo and navigate to the https://my.contabo.com/dns (DNS Zone Management).

Here we need to put yourdomain.com and select ip address.

Then, visit edit DNS Zone for yourdomain.com page. If everything is fine you will see something like this.

Now, go back to the Namecheap and press Manage button for yourdomain.com.

In the nameservers section, select Custom DNS and put following values into it.

Please note that after adding your domain name from Namecheap and pointing it to a Contabo VPS server IP address, it may take up to 48 hours to complete the propagation process. But in most cases, the domain propagation process can occur in a few minutes.

SSL Certificate

We are planning to serve our app over the HTTPS, so it is essential to setup an ssl certificate at our server.

It can be done in two ways.

Buy your own SSL certificate.
Obtain Let's Encrypt certificate, which is free and much easier to setup.

In this tutorial I will use the second approach.

sudo apt-get update
sudo apt-get install certbot python3-certbot-nginx
sudo certbot --nginx -d  yourdomain.com -d www.yourdomain.com

Certbot will modify your Nginx configuration automatically and obtain the certificate.

Now all we have to do is to test our nginx configuration

sudo nginx -t

and run the server

sudo service nginx start

Build a CRUD App in React with Tanstack Query and Material UI [Final]

Ihor Filippov — Sun, 21 Jan 2024 22:32:27 +0000

If simply reading this tutorial isn't enough for you, you can go here and write code alongside it.

Now, we are faced with a new challenge.

We need to implement the feature of editing existing users. Of course, we could use the AddUserForm component, but let's not complicate things and create a separate form for editing, which we will show under a certain condition.

First, let's start by adding a new field to our table, which will contain an edit button.

components/users-table.js

import { 
  ...other imports
  Button
} from "@mui/material";

export const UsersTable = () => {
  const { users, createEditUserTemplate } = useUsersContext();

  const handleEditUserAction = (user) => {
    createEditUserTemplate(user);
  }

  const renderUsers = (users) => {
    return users.map(user => {
      return (
        <TableRow key={user.id}>
          <TableCell>{user.name}</TableCell>
          <TableCell>{user.email}</TableCell>
          <TableCell>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <Button
                variant="contained"
                color="info"
                onClick={() => handleEditUserAction(user)}>
                Edit
              </Button>
            </div>
          </TableCell>
        </TableRow>
      );
    })
  }

  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Email</TableCell>
            <TableCell>Actions</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {renderUsers(users)}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Here, we have added a new Actions column to our user table. Now, each user has an Edit button, which, when clicked, passes the user's data to the editing template.

Let's now implement this in the UsersProvider.

components/users-provider.js

...code
export const UsersProvider = ({ data, children }) => {
  ...code
  const [editUserTemplate, setEditUserTemplate] = useState(null);

  ...code

  const createEditUserTemplate = (user) => {
    setEditUserTemplate(user);
  }

  const editUser = (userToEdit) => {
    setUsers(users => {
      return users.map(user => {
        if (user.id === userToEdit.id) {
          user.name = userToEdit.name;
          user.email = userToEdit.email;
        }
        return user;
      });
    });
    setEditUserTemplate(null);
  }

  return (
    <UsersContext.Provider value={{ 
      users,
      addUser,
      editUser,
      editUserTemplate,
      createEditUserTemplate
    }}>
      {children}
    </UsersContext.Provider>
  );
}

Here, we define two new functions:

editUser: finds the user that needs to be updated and returns a new list
createEditUserTemplate: simply adds data to the editing template that we are currently using further.

Now, let's implement form for user editing.

components/edit-user-form.js

import { useEffect } from "react";
import { useInput } from "../hooks/use-input";
import { useUsersContext } from "./users-provider";
import { Button, TextField } from "@mui/material";

export const EditUserForm = () => {
  const [nameProps, nameActions] = useInput('');
  const [emailProps, emailActions] = useInput('');

  const { editUser, editUserTemplate } = useUsersContext();

  useEffect(() => {
    const { name, email, company } = editUserTemplate;

    nameActions.update(name);
    emailActions.update(email);

  }, [editUserTemplate]);

  const onSubmit = (e) => {
    e.preventDefault();
    editUser({
      id: editUserTemplate.id,
      name: nameProps.value,
      email: emailProps.value,
    })
  }

  return (
    <form onSubmit={onSubmit} style={{ margin: '24px 0' }}>
      <TextField
        {...nameProps}
        fullWidth
        type="text"
        label="Name"
        variant="outlined"
      />
      <br />
      <br />
      <TextField
        {...emailProps}
        fullWidth
        type="email"
        label="Email"
        variant="outlined"
      />
      <div style={{ textAlign: 'right', marginTop: 12 }}>
        <Button
          variant="contained"
          color="primary"
          type="submit">
          Save
        </Button>
      </div>
    </form>
  );
}

This form has almost the same functionality as the AddUserForm, except that we update the input fields' state based on the data taken from the editUserTemplate.

The final touch is to tell the Users component which form we currently want to show the user.

components/users.js

import { Container } from '@mui/material';
import { UsersTable } from './users-table';
import { AddUserForm } from './add-user-form';
import { EditUserForm } from './edit-user-form';
import { useUsersContext } from './users-provider';

export const Users = () => {
  const { editUserTemplate } = useUsersContext();

  return (
    <Container 
      maxWidth="md" 
      sx={{ margin: '20px auto' }}>
      {editUserTemplate ? <EditUserForm /> : <AddUserForm />}
      <UsersTable />
    </Container>
  );
}

Finally, we are on the home stretch. We've become a bit familiar with how to build a user-friendly layout using Material UI. We've learned how to effectively fetch data from an API using React Query, and we've also set up the overall architecture for our application, small as it may be.

Now it's time to implement user deletion to wrap things up.

First off all, let's add a Delete button for each row in UsersTable.

components/users-table.js

...imports

export const UsersTable = () => {
  const { users, createEditUserTemplate, deleteUser } = useUsersContext();

  ...code

  const handleDeleteUserAction = (user) => {
    deleteUser(user);
  }

  const renderUsers = (users) => {
    return users.map(user => {
      return (
        <TableRow key={user.id}>
          <TableCell>{user.name}</TableCell>
          <TableCell>{user.email}</TableCell>
          <TableCell>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <Button
                variant="contained"
                color="info"
                onClick={() => handleEditUserAction(user)}>
                Edit
              </Button>
              <Button
                variant="contained"
                color="error"
                onClick={() => handleDeleteUserAction(user)}>
                Delete
              </Button>
            </div>
          </TableCell>
        </TableRow>
      );
    })
  }

  ...code
}

The logic is very similar to what we did earlier. We just take data about user and execute function we received from useUsersContext.

components/users-provider.js

...code

export const UsersProvider = ({ data, children }) => {
  ...code

  const deleteUser = (userToDelete) => {
    setUsers(users => {
      return users.filter(user => user.id !== userToDelete.id)
    });
    setEditUserTemplate(null);
  }

  return (
    <UsersContext.Provider value={{ 
      users,
      addUser,
      editUser,
      editUserTemplate,
      createEditUserTemplate,
      deleteUser
    }}>
      {children}
    </UsersContext.Provider>
  );
}

export const useUsersContext = () => useContext(UsersContext);

That's it! Our application is working as intended, I hope you enjoyed it.

Build a CRUD App in React with Tanstack Query and Material UI [Part 2]

Ihor Filippov — Mon, 15 Jan 2024 15:13:32 +0000

If simply reading this tutorial isn't enough for you, you can go here and write code alongside it.

Architecture enhancement

Although our project is quite small, we have already encountered a situation where we are dealing with prop-drilling.

Let's refresh our knowledge about it.

Prop drilling involves passing data or state across multiple levels of a component structure. Essentially, it refers to the practice of transferring data from a parent component to its child components, and then from these children to their subsequent children, continuing this process until the data reaches the desired component.

Here are some key issues commonly associated with prop-drilling:

When a top-level component's state changes, all children components in the prop-drilling chain will re-render, even if they don't directly use the changed data. This can lead to performance issues, especially in large applications with deep component trees.
Due to the tight coupling and complex data flow, refactoring becomes a challenge. Changing the structure or logic of one component may necessitate changes in all components involved in the prop-drilling chain.
As your application grows, prop-drilling leads to more complex component trees, making it harder to track and manage data flow. This complexity can make the codebase less maintainable, as changes in one component might require adjustments in many others.

That's why we need to get rid of it as soon as possible.

Let's do it, with the help of Compound Pattern.

components/users-provider.js

import { createContext, useContext, useState } from "react";

const UsersContext = createContext();

export const UsersProvider = ({ data, children }) => {
  const [users, setUsers] = useState(data);

  return (
    <UsersContext.Provider value={{ users }}>
      {children}
    </UsersContext.Provider>
  );
}

export const useUsersContext = () => useContext(UsersContext);

And, then wrap Users with it.

App.js

import { UsersProvider } from './components/users-provider';
import { Users } from './components/users';
import { useUsers } from './api/use-users';

export default function App() {
  const { isFetching, isError, data } = useUsers();

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

  if (isError) {
    return <div>Error</div>;
  }

  return (
    <UsersProvider data={data}>
      <Users />
    </UsersProvider>
  );
}

Remove unnecessary users prop from Users component.

components/users.js

...imports
export const Users = () => {
  return (
    <Container 
      maxWidth="md" 
      sx={{ margin: '20px auto' }}>
      <UsersTable />
    </Container>
  );
}

Then, update UsersTable component.

components/users-table.js

...imports
import { useUsersContext } from './users-provider';

export const UsersTable = () => {
  const { users } = useUsersContext();

  ...code
}

Add new user

First, let's define a useInput custom hook to make it easier to manage input control properties.

hooks/useInput.js

import { useState } from 'react';

export const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  return [
    {
      value,
      onChange: (e) => setValue(e.target.value)
    },
    {
      update: (v) => setValue(v),
      reset: () => setValue(initialValue)
    }
  ];
}

In the code above useInput returns an array with two objects:

Contains value of the input and onChange function which will update value through the setValue function.
Contains methods to update and reset current state of the input.

When useInput hook is done, we are ready to move further.

components/users-provider.js

import { createContext, useContext, useState } from "react";
import { v4 as uuid } from 'uuid';

const UsersContext = createContext();

export const UsersProvider = ({ data, children }) => {
  const [users, setUsers] = useState(data);

  const addUser = (name, email) => {
    const newUser = {
      id: uuid(),
      name,
      email,
    }

    setUsers(users => [...users, newUser]);
  }

  return (
    <UsersContext.Provider value={{ 
      users,
      addUser
    }}>
      {children}
    </UsersContext.Provider>
  );
}

export const useUsersContext = () => useContext(UsersContext);

Here we just add a new addUser function and pass it inside the value prop of the UsersContext.Provider.

Since every user fetched from the API has its id, we add our own ids to new users. That's why uuid package was applied here.

components/add-user-form.js

import { Button, TextField } from "@mui/material";
import { useInput } from "../hooks/use-input";
import { useUsersContext } from "./users-provider";

export const AddUserForm = () => {
  const [nameProps, nameActions] = useInput('');
  const [emailProps, emailActions] = useInput('');

  const { addUser } = useUsersContext();

  const onSubmit = (e) => {
    e.preventDefault();
    addUser(nameProps.value, emailProps.value);
    nameActions.reset();
    emailActions.reset();
  }

  return (
    <form onSubmit={onSubmit} style={{ margin: '24px 0' }}>
      <TextField
        {...nameProps}
        fullWidth
        type="text"
        label="Name"
        variant="outlined"
      />
      <br />
      <br />
      <TextField
        {...emailProps}
        fullWidth
        type="email"
        label="Email"
        variant="outlined"
      />
      <div style={{ textAlign: 'right', marginTop: 12 }}>
        <Button
          variant="contained"
          color="primary"
          type="submit">
          Create
        </Button>
      </div>
    </form>
  );
}

TextField is a component from Material UI library used for text input.

fullWidth: A boolean prop that, when set to true, makes the TextField stretch to its container's full width.
label: sets the label of input field
variant: determines the style of the TextField. In this case, outlined means the text field will have an outlined border.

Then, let's place our form into Users component and enjoy the result.

components/users.js

...imports
import { AddUserForm } from './add-user-form';

export const Users = () => {
  return (
    <Container 
      maxWidth="md" 
      sx={{ margin: '20px auto' }}>
      <AddUserForm />
      <UsersTable />
    </Container>
  );
}

To be continued... (Final part will be soon)

Next-Auth is hell

Ihor Filippov — Mon, 08 Jan 2024 10:25:23 +0000

Today, I want to talk a bit about Next.js.

Probably one of the best decisions I've made recently was switching to it. It's genuinely a powerful tool for solo founders. You don't need to write a separate API and worry about SEO optimization - Next.js does it for you. I'm sure there are some hacks to make it even better, but what's available by default in this direction looks quite impressive. For example, a page with an editor, which is inherently heavy, has pretty good metrics in PSI, although I didn't do anything special for it.

However, there are some problematic areas. For instance, authentication. Many people complain that the examples in the official documentation provide very scant information on how to make a working auth system.

Next.js, by default, promotes the use of next-auth. But the community, to put it mildly, is not satisfied with this tool. For example, setting up an auth with a session that will be stored in the DB requires incredible hacks and suffering.

So, I've identified a few other options to handle this situation.

Custom approach. I found this snippet on the internet, it might be useful for someone.
Lucia Auth. Many people on Reddit speak very positively about this tool, and I'll likely work with it.
Clerk. Essentially, it's a SaaS that takes all the burdens of authentication. It seems like a cool thing for small projects, but I haven't tried it, so it's hard to say.

Honestly, I'm still hesitating between options 2 and 3.

What do you use for user authentication in your project?

Build a CRUD App in React with Tanstack Query and Material UI [Part 1]

Ihor Filippov — Sun, 07 Jan 2024 23:53:36 +0000

If simply reading this tutorial isn't enough for you, you can go here and write code alongside it.

In order to follow along with this tutorial, you'll need a basic knowledge of HTML, CSS, and JavaScript/ES6. You should also know the fundamentals of React, which you can learn by reading Quick Start with React.

In this tutorial we will make a simple CRUD app. We will fetch users from the remote API and you will be able to add, update or delete them.

While implementing this app we will use:

React Material UI
TanStack Query
custom hooks
React Context API

Here is a diagram of what we will implement.

As you can see, here are two sections each with its own responsibility. One for create and edit user data and another for visualize the list of users.

First, let's a component responsible for all users data on the page.

components/users.js

import { Container } from '@mui/material';

export const Users = () => {
  return (
    <Container 
      maxWidth="md" 
      sx={{ margin: '20px auto' }}>
    </Container>
  );
}

The Container component is used to center your content horizontally.

maxWidth="md": This sets the maximum width of the container. The md value means that the maximum width is set to the value defined for medium-sized screens in Material-UI's theme. This is a way to make the component responsive.
sx={{ margin: '20px auto' }}: This is a shorthand for inline styles. sx is a special property provided by Material-UI for customizing styles.

Then, let's implement a component to render list of users.

components/users-table.js

import { 
  Paper, 
  Table, 
  TableBody, 
  TableCell, 
  TableContainer, 
  TableHead, 
  TableRow 
} from "@mui/material"

export const UsersTable = () => {
  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Email</TableCell>
          </TableRow>
        </TableHead>
        <TableBody></TableBody>
      </Table>
    </TableContainer>
  );
}

Let's explain the code above.

<TableContainer component={Paper}>: The TableContainer component is used as a container for the Table. It uses the Paper component as its base, which gives it a Material design look with a shadow and background.
Table, TableHead, TableBody, TableRow and TableCell are just wrappers for native elements of the table.

Now, import UsersTable inside Users.

components/users.js

import { Container } from '@mui/material';
import { UsersTable } from './users-table';

export const Users = () => {
  return (
    <Container 
      maxWidth="md" 
      sx={{ margin: '20px auto' }}>
      <UsersTable />
    </Container>
  );
}

And Users inside App.

App.js

import { Users } from './components/users';

export default function App() {
  return <Users />;
}

At this moment you should see three table head sections without any data inside the table. It is an expected behaviour.

Now, let's fetch and render data about our users.

To do this, first of all we need to initialize a QueryClient and provide it to the application through a QueryClientProvider.

index.js

import React from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import App from "./App";

const queryClient = new QueryClient();

const root = createRoot(document.getElementById("root"));

root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

Then, we need to define a layer responsible for data fetching.

api/use-users.js

import { useQuery } from "@tanstack/react-query"
import axios from "axios";

export const useUsers = () => {
  return useQuery({
    queryKey: ['users'],
    queryFn: async () => {
     const { data } = await axios.get(
      'https://jsonplaceholder.typicode.com/users'
     );
     return data;
    }
  });
}

Here we utilize useQuery hook from React Query library inside our own custom hook useUsers.

queryKey: ['users'] is a unique identifier, which is used by React Query to cache and retrieve the query's data.
queryFn is an asynchronous function that defines how to fetch the data. This function will be called by React Query to load the data.

Now, let's use useUsers inside our App component.

App.js

import { Users } from './components/users';
import { useUsers } from './api/use-users';

export default function App() {
  const { isFetching, isError, data } = useUsers();

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

  if (isError) {
    return <div>Error</div>;
  }

  return <Users users={data} />;
}

Then, let's handle users inside Users component and pass it down to UsersTable.

components/users.js

...imports
export const Users = ({ users }) => {
  return (
    <Container 
      maxWidth="md" 
      sx={{ margin: '20px auto' }}>
      <UsersTable users={users} />
    </Container>
  );
}

Finally, we can render our users.

components/users-table.js

...imports
export const UsersTable = ({ users }) => {

  const renderUsers = (users) => {
    return users.map(user => {
      return (
        <TableRow key={user.id}>
          <TableCell>{user.name}</TableCell>
          <TableCell>{user.email}</TableCell>
        </TableRow>
      );
    })
  }

  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Email</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>{renderUsers(users)}</TableBody>
      </Table>
    </TableContainer>
  );
}

To be continued...

Angular reusable resolvers

Ihor Filippov — Mon, 06 Sep 2021 10:16:33 +0000

Hello!

At the moment, I am working at my new project - Page Health .

It is a SaaS platform which provides a page performance monitoring on the long run.

In this application I had a lot of cases, where I had to duplicate the code of my resolvers to make very, very similar things.

That's why I took thought about how to implement the DRY coding principle in my app.

First, I take a glance at official angular documentation .

And here I found an interesting way to implement resolvers with in-line functions.

export const myHero: Hero = {
  // ...
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'detail/:id',
        component: HeroComponent,
        resolve: {
          hero: 'heroResolver'
        }
      }
    ])
  ],
  providers: [
    {
      provide: 'heroResolver',
      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => myHero
    }
  ]
})
export class AppModule {}

So, I decided to create a function which will return a reusable provider.

export function createPageResolver(redirectRoute: string): Provider {
  return {
    provide: "pageResolver",
    deps: [NotificationsService, PagesApiService, Router],
    useFactory: (n: NotificationsService, p: PagesApiService, r: Router) => {
      return new PageResolver(n, p, r, redirectRoute);
    }
  }
}

Let's explain it step by step:

provide - it is the name of my provider.

deps - is shorten for the word - dependencies. In my case I need some services to do my stuff and Router from @angular/router to redirect user if condition in resolve function is not match.

useFactory - unlike the example in the official docs, I need it, because in my case I need to return a new instance of resolver, not a simple value.

And actually code of my resolver.

... imports here

export class PageResolver implements Resolve<PageDto> {
  constructor(
    private notificationsService: NotificationsService,
    private pagesApiService: PagesApiService,
    private router: Router,
    @Inject("redirectRoute") private redirectRoute: string,
  ) {}

  resolve(route: ActivatedRouteSnapshot): Observable<PageDto> {
    const param: string = route.params["id"];
    const pageId: number = Number(param);

    if (isNaN(pageId)) {
      this.notificationsService.error("Invalid page id.");
      this.router.navigate([this.redirectRoute]);
      return of(null);
    } else {
      return this.pagesApiService.getUserPage(pageId)
        .pipe(
          catchError((e) => {
            console.error(e);
            this.notificationsService.error("Unable to get this page.");
            this.router.navigate([this.redirectRoute]);
            return of(null);
          }),
        );
    }
  }
}

By the way, the code can be extended with custom error message, depending on situation, but in my case a static message is completely enough.

Also, please note, that I did not add an @Injecable() decorator for my resolver class, because, injection happens in useFactory method.

If you do not fully understand how to use it, here is an example.

... imports here

const routes: Routes = [
  {
    path: "",
    component: PageSpeedComponent,
    children: [
      ... some other routes
      {
        path: ":id",
        component: PageSpeedMetricsComponent,
        data: {
          title: "Chrome User Experience Report"
        },
        resolve: {
          page: "pageResolver",
        },
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [
    createPageResolver("/user-experience"),
  ],
})
export class PageSpeedRoutingModule {}

Hope, this small technick will be useful for somebody :)

Page Health - simple tool for page performance monitoring

Ihor Filippov — Sat, 17 Jul 2021 09:40:16 +0000

Hello, guys! My name is Igor. I am front-end developer at CodeGym.

At my current job, I often face with the need of optimizing web pages performance (runtime and loading scores).

But, to say the truth it is very difficult to measure how is new feature really affecting the page performance at the long run.

So, I decided to make a new tool for this. You add a url of your page and metrics your want to monitor...and wait for the data being loaded every day :)

At the moment, my project supports monitoring of:

Lighthouse scores - (Desktop and Mobile)
User Experience Reports (Desktop and Mobile)
Runtime Performance (Normal and with slow 3g and slow cpu)

↓ ↓ ↓ ↓

Link to project

Working with directives in Angular

Ihor Filippov — Wed, 17 Jun 2020 22:31:20 +0000

It this article, I want to talk about, not API, but concrete business cases and the ways in which you can effectively use the capabilities of the angular directives.

There are two kinds of directives, you can use in development with angular.

HINT: Somebody also says that Components are directives too. This is true from a formal point of view, but not from a practical.

Structural directives — works with DOM elements, adding or removing them.
Attribute directives — allow you to add custom behavior to elements or change its appearance.

You can get detailed information about directives API from the docs above.

I assume that your already have @angular/cli installed.

We will start from scratch. First create new project:

ng new working-with-directives
cd working-with-directives

Structural directives

Let's start, from the structural directives.

We will create our own directive, which will handle a various states of the user (Anonymous, User, Admin) and show content appropriate to the state.

First, we have to create a service which will provide an observable with different user states and capabilities to change them.

Create two files. One for model with user statuses. Another for service

app/models/user-status.enum.ts

export enum UserStatus {
  ANONYMOUS = "ANONYMOUS",
  USER = "USER",
  ADMIN = "ADMIN",
}

app/services/user-status.service.ts

import { BehaviorSubject, Observable } from "rxjs";
import { UserStatus } from "src/app/models/user-status.enum";

export class UserStatusService {

  private userStatusSource: BehaviorSubject<UserStatus> = new BehaviorSubject(null);
  userStatus$: Observable<UserStatus> = this.userStatusSource.asObservable();

  changeUserStatus(status): void {
    this.userStatusSource.next(status);
  }
}

Now, when we have a model and a service, we can implement our directive
app/directives/user-status/user-status.directive.ts

import { Directive, Input, EmbeddedViewRef, OnInit, OnDestroy, ViewContainerRef, TemplateRef } from "@angular/core";
import { UserStatusService } from "src/app/services/user-status.service";
import { Subject } from "rxjs";
import { takeUntil, map } from "rxjs/operators";
import { UserStatus } from "src/app/models/user-status.enum";

@Directive({
  selector: "[userStatus]"
})
export class UserStatusDirective implements OnInit, OnDestroy {
  // input has the same name as directive selector.
  // thanks to this we can write in this way - *userStatus="status"
  // structural directives are always used with asterisk *
  @Input("userStatus") status: string;

  private isDestroyed$: Subject<void> = new Subject();

  constructor(
    private userStatusService: UserStatusService, // service which holds state of user status
    private viewContainer: ViewContainerRef, // container where our dynamically create view can be attached or not :)
    private templateRef: TemplateRef<any>, // When we set directive on DOM element, angular wraps it with the ng-template tag under the hood
  ) { }

  ngOnInit(): void {
    this.userStatusService.userStatus$
      .pipe(
        map((userStatus: UserStatus) => userStatus === this.status),
        takeUntil(this.isDestroyed$)
      )
      .subscribe((isPermitted: boolean) => {
        if (isPermitted) {
          this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          this.viewContainer.remove();
        }
      });
  }

  ngOnDestroy() {
    this.isDestroyed$.next();
    this.isDestroyed$.complete();
  }
}

So, what are we doing here? In the ngOnInit lifecycle hook we are subscribing to user status state. Then, we compare current user status from service with user status transmitted via input. If they are equal we show current DOM element. If not - remove it from the DOM.

Let's check, is everything works as expected. But, before update app/app.component.ts file

import { Component } from '@angular/core';
import { UserStatusService } from "src/app/services/user-status.service";
import { UserStatus } from "src/app/models/user-status.enum";

@Component({
  selector: 'app-root',
  template: `
    <section>
      <h1>Structural directives</h1>
      <div *userStatus="UserStatus.ANONYMOUS">I am anonymous user</div>
      <div *userStatus="UserStatus.USER">I am common user</div>
      <div *userStatus="UserStatus.ADMIN">I am admin user</div>
      <hr/>
      <div>
        <button (click)="changeUserStatus(UserStatus.ANONYMOUS)">Anonymous</button>
      </div>
      <div>
        <button (click)="changeUserStatus(UserStatus.USER)">User</button>
      </div>
      <div>
        <button (click)="changeUserStatus(UserStatus.ADMIN)">Admin</button>
      </div>
    </section>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  UserStatus = UserStatus;

  constructor(private userStatusService: UserStatusService) {}

  changeUserStatus(status: UserStatus): void {
    this.userStatusService.changeUserStatus(status);
  }
}

Run, the following CLI command. And open your browser at localhost:4200

npm start

Now, if we click button we will see an appropriate dom element on the screen. Everything looks good, but there is one problem. If we click twice on the same button, we will see that DOM element will be duplicated. This situation happens because directive does not know anything about attached view to the container. So, we have to fix it.

If we look at view_container_ref.d.ts, we will find there a length getter. It is excatly what we are need!

export declare abstract class ViewContainerRef {
    ....
  /**
  * Reports how many views are currently attached to this container.
  * @returns The number of views.
  */
  abstract readonly length: number;

app/directives/user-status/user-status.directive.ts

  ...
ngOnInit(): void {
    this.userStatusService.userStatus$
      .pipe(
        map((userStatus: UserStatus) => userStatus === this.status),
        takeUntil(this.isDestroyed$)
      )
      .subscribe((isPermitted: boolean) => {
        if (this.viewContainer.length) {
          this.viewContainer.remove();
        }

        if (isPermitted) {
          this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          this.viewContainer.remove();
        }
      });
  }
  ...

Now, if our container have views attached to it, they will be removed. And only after this the main directive's logic happens. In this way we protect ourselves from unwanted duplicates in DOM. The only problem of this approach is perfomance. Anytime service produces a new value our DOM element will be removed and then inserted again. This approach is suited for cases when you work with one or several elements, but not with the big list of items.

Attribute directives

Unlike structural directives, attribute directive do not change the DOM by adding or removing DOM elements. What attribute directive does, it changes the appearance or behavior of DOM element.

In my example, we will create a directive which will help our DOM elements to handle a very specific case, when user press ctrl + enter buttons.

Let's create a new file
app/directives/ctrl-enter/ctrl-enter.directive.ts

import { Directive, Output, EventEmitter, HostListener, ElementRef } from "@angular/core";

@Directive({
  selector: "[ctrlEnter]"
})
export class CtrlEnterDirective {
  @Output() onCtrlEnter: EventEmitter<string> = new EventEmitter();

  constructor(private element: ElementRef) {}

  @HostListener("keydown", ["$event"]) onKeyDown(event) {
    if ((event.keyCode === 10 || event.keyCode === 13) && event.ctrlKey) {
            this.onCtrlEnter.emit(this.element.nativeElement.value);
        }
  }
}

The logic is very simple. We are listening to the keydown events of the DOM element and check if these events are about ctrl and enter keys. After that, we emit the value.
This logic is much simplier than in our structural directive, but it shows how you can effectively ignore code duplication in your project.

By the way, if you have only one input at the page and you do not want to import ReactiveFormsModule or FormsModule, you can deal with it in the same fashion, with attribute directive.

Let's test our new directive and update the
app/app.component.ts

import { Component } from '@angular/core';
import { UserStatusService } from "src/app/services/user-status.service";
import { UserStatus } from "src/app/models/user-status.enum";

@Component({
  selector: 'app-root',
  template: `
    <section>
      <h1>Attribute directives</h1>
      <input type="text" ctrlEnter (onCtrlEnter)="handleCtrlEnterEvent($event)">
    </section>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  UserStatus = UserStatus;

  constructor(private userStatusService: UserStatusService) {}

  handleCtrlEnterEvent(event): void {
    console.log(event);
  }
}

Now, if you focus on input, type something and press ctrl + enter, you should see a input value in the console.

I hope this article was useful for you.

P.S. Source code can be found at github .