One platform for alerting, on-call management and status pages.

Originally from Hungary, I moved to Germany to study International Management at the University of Cologne, where I developed a passion for connecting creativity with strategy. My working student position and later my internship at ilert, was an exciting experience and it shaped how I approach marketing today. From designing content to analyzing campaign performance, every task challenged me to grow, learn, and adapt. One of the highlights of my role was creating visually engaging content using tools like Canva and Figma.

How I joined ilert marketing team

I started in my working student position at the end of 2023. As a Marketing Intern, I was able to observe, help out and develop skills in many office roles, from sales to partner management. Whether it was crafting social media posts or internal materials, I loved the creative process of turning ideas into visuals that aligned with ilert’s brand. However, what I learned quickly is that creativity alone isn’t enough—it has to connect with the audience and deliver measurable results.

Challenges that shaped my perspective

One of the key challenges I faced was transitioning from B2C to B2B marketing. Before joining ilert, I gained experience working with CEMS Clubs,  student associations, where I led marketing efforts for student-focused events and alumni initiatives. As Marketing Lead for CEMS Club Cologne and LinkedIn Director for CEMS Club Canada, I focused on engaging students through social media campaigns, events, and community-building, which helped me develop skills in creating emotion-driven content for a B2C audience. At ilert, I had to shift my approach to building trust, emphasizing value, and addressing business-specific needs. This transition challenged me to think more strategically and analytically, showing me how marketing is not just about creativity but also a data-driven process.

‍

I also realized that data-driven marketing is essential for success. By tracking key engagement metrics and click-through rates, I was able to understand what resonated with our audience and refine my strategies accordingly. Numbers, after all, are the proof of what works. Collaboration was another vital lesson. Every project involved teamwork—whether brainstorming ideas or refining campaigns with feedback. It taught me that marketing is not just about individual creativity but about combining ideas to achieve a shared vision.

Growing into a full-time role, from supporting projects to leading campaigns 

My journey at ilert started with hands-on tasks during my internship and working student role. One of my first projects was ungating our Metrics Guide, where I created blog articles, designed supporting materials to drive engagement. I also contributed to email campaigns—like the monthly newsletters and the "Did You Know?" series—with help and support from the team, of course. Alongside this, I gained experience with our CRM, website management, and community engagement through online interactions.

‍

In my full-time role, I’ve taken on larger projects, such as leading a top-of-the-funnel awareness campaign. I oversaw the entire lifecycle: planning strategy, running ads, creating educational content, and building a landing page while aligning efforts across platforms. These experiences have allowed me to evolve from learning the ropes to managing end-to-end campaigns that connect creativity and strategy effectively.

Lessons learned and advices for future marketers

If I could share a few lessons with future interns, here’s what I’d say:
‍

1. Stay curious and be open to feedback: Always ask questions, seek feedback, and stay eager to learn. The more you engage, the more you’ll grow. Marketing is a team effort, so being adaptable and open to others’ ideas is essential.
   ‍
2. Experiment and track your progress: Use your internship to try new ideas and tools. You'll learn a lot through trial and error. Keep track of your work, reflect on your progress, and build a portfolio for future roles.
   ‍
3. Master the essential tools: Get comfortable with tools like Google Analytics, Figma, and Canva. These are foundational in marketing and will help you create polished content and track campaign success.
   ‍
4. Understand SEO and social media: SEO is crucial for improving content visibility. Make sure you understand the basics and how to apply them to your content strategy.
   ‍

If you’re interested in starting your career in marketing or learning more about opportunities at ilert, explore our careers page for current openings!

‍

After releasing our first version of the ilert dashboard as a static layout, we knew we wanted to take it further by allowing users to customize and arrange widgets freely. We aimed to provide a truly interactive experience, which led us to search for a library that could handle drag-and-drop and resizing functionalities while integrating well with our existing tech stack.

‍

In this post, I’ll walk you through our selection process, the essential features we prioritized, and why we ultimately chose React-Grid-Layout as the best solution for ilert’s needs.

Core Features We Needed for ilert's Dashboard

Before diving into specific libraries, we outlined the key requirements necessary to create a user-friendly and flexible dashboard. Here’s what we prioritized:

‍

• React and TypeScript support. To seamlessly align with our tech stack, we needed a library compatible with both React and TypeScript to ensure strong type safety and efficient development.
• Grid layout with drag-and-drop. This was a must for providing users with a dynamic and customizable dashboard. Users needed to move, rearrange, and resize widgets without hassle.
• Responsive Design. With a variety of screen sizes and devices in use, our dashboard needed to be fully responsive, adjusting across different layouts.
• Active maintenance and updates: Since we rely on the library for critical functionality, a strong, supportive community, and regular updates were crucial to ensure long-term reliability and security.

Evaluating grid and drag-and-drop libraries for ilert’s dashboard

We reviewed several popular libraries to find the best match. Each had its strengths and weaknesses, so we evaluated each one based on ease of integration, functionality, and level of customization. Below is a summary of the main options we considered:

‍

1. React-Grid-Layout

• Pros:
  • Purpose-built for React, making integration straightforward.
  • Comprehensive drag-and-drop and resizing support out-of-the-box.
  • Responsive design that adjusts to various screen sizes.
  • Strong community support, regular updates, and TypeScript compatibility.
• Cons:
  • Limited flexibility for non-traditional layouts beyond the standard grid.
  • Potential performance challenges in very complex or data-heavy dashboards.

2. dnd-kit

• Pros:
  • Lightweight and modular, ideal for custom drag-and-drop experiences.
  • High accessibility, with full keyboard navigation support.
  • Strong performance in custom interactions.
• Cons:
  • No built-in grid layout functionality, requiring manual setup.
  • Lacks widget resizing capabilities, adding complexity for custom implementations.

3. Packery

• Pros:
  • Ideal for masonry-style layouts
  • Supports draggable item repositioning.
• Cons:
  • The last major update was in 2018, so it's somewhat outdated.
  • Limited React and TypeScript compatibility, making integration difficult.

4. Gridster.js

• Pros:
  • Basic drag-and-drop and resizing functionalities are included.
• Cons:
  • Outdated with minimal support for React, with few updates.
  • Known bugs and limited community support, making maintenance challenging.

After carefully evaluating each option, React-Grid-Layout emerged as the most complete and efficient solution for our requirements. We chose React-Grid-Layout for its built-in drag-and-drop functionality, seamless React integration, active maintenance, and efficient grid support, which saved time and reduced complexity. Its performance and stability met our needs for interactive, data-heavy dashboards with minimal optimization required. 

Implementing React-Grid-Layout in ilert’s dashboard

To demonstrate the effectiveness of React-Grid-Layout, here’s a quick example of how we integrated its core features into our dashboard:

‍

• Drag-and-Drop configuration. Using React-Grid-Layout's API, we configured widgets to be draggable across grid cells. This allowed users to freely move widgets to desired positions with a smooth and responsive experience.
• Widget resizing. React-Grid-Layout’s resizing functionality was straightforward to implement, enabling users to expand or contract widgets. This was critical for enhancing the flexibility of our dashboards.
• Responsive adjustments. The library’s built-in responsive options allowed our dashboard layout to adjust automatically across devices, delivering a consistent experience on the desktop.

These features helped us provide a flexible and intuitive dashboard experience, greatly enhancing usability. You can check how ilert interactive dashboards work in this video:

Quick Comparison: React-Grid-Layout vs. Alternatives for ilert’s Use Case

I joined ilert as a student front-end software developer. Before, I was mainly writing iOS apps. Even though I already had some experience with web technologies, diving deep into front-end development was a huge step. Both developing iOS apps and web apps share the same kinds of tasks, such as developing the user interface (UI) and writing app logic. However, the actual development environments are completely different. Here, I will compare the setup, user interface, debugging process, documentation, and other aspects.

‍

Since I was already familiar with web technologies, i.e., HTML, CSS, JavaScript, I was introduced to two ilert front-end projects utilizing TypeScript, React, and MobX. My task was to migrate one of the projects, which is the front-end of the ilert reports UI, into the bigger one, the ilert management UI. The first step was to build and run the apps.

Setup

For a typical iOS app project, you need to install Xcode and probably a package manager like CocoaPods or Carthage. Then, you can open an Xcode project or workspace and install the dependencies using the selected package manager. If Swift packages are used, Xcode will automatically install the dependencies. 

‍

For the two web projects, I had to install two different versions of Node.js. npm was used as the package manager. Also, browsers were required to interact with the app. The nvm script was used to handle different versions of Node.js. 

‍

At the time of setting up, the older reports project used Node.js 14, which was no longer maintained. There were no prebuilt binaries for that version to download. nvm tried to build from the source on macOS Sonoma, but it failed. Therefore, I downloaded the Installer flat package of v14.21.3, installed it system-wide, and used nvm only for the new project. I used Visual Studio Code as the editor with Prettier - Code formatter and Vim extensions.

Preview

After installing everything required to build, it is time to run the app live. In Xcode, you can build and run an app without ever touching the command line interface (CLI). In my current case, both projects use react-scripts to build and run the app.

‍

UIKit and SwiftUI are built-in UI frameworks for iOS apps. You can build the UI in storyboards when using UIKit or build UI purely in code using SwiftUI and see the live preview alongside, all happening inside Xcode.

Viewing a React web app is completely different. The content of the app is served by an HTTP server locally, from which the browser can load the app UI. In development mode, the app maintains a web socket connection to the server to listen for updates. This allows the UI to refresh automatically when the code changes. Usually, it only updates the relevant HTML elements and scripts that have been changed. Otherwise, it triggers a full web page reload.

When using UIKit in an iOS app, you need to build and install it in a simulator or on an iPhone or an iPad to run the app. With SwiftUI, one can also preview the app inside Xcode. However, any browser can be used to run and interact with a React app.

Debugging

The default build configuration in Xcode is set to debug. A developer can start debugging by adding breakpoints and running the app. The app's standard input/output can be interacted inside the Debug Area pane inside Xcode. 

To debug a React app, front-end engineers use the browser's developer tools or add Visual Studio Code debug configurations using .vscode/launch.json. Both projects that I was working on had a debug configuration for Chrome. When it is launched, it opens the browser, and the debugging can be done inside Visual Studio Code. Since both projects use TypeScript, I also had to enable source maps. 

Debugging UI in iOS apps is simpler as the elements do not inherit styles from their parent element. ilert React apps use Material UI as the baseline component framework. When debugging a component's style, I had to investigate the related CSS and the component's code, if any, since we wrote CSS in JavaScript for components.

‍

Documentation

The documentation for the whole iOS SDK comes together with Xcode. Therefore, developers can work conveniently even when entirely offline. On the other hand, you have to go online to find documentation on web technologies. There are different sources for documentation, e.g., HTML, CSS, React, MobX, and Material UI.

Working with code

Before I started working directly with the projects, I had learned the basics of React and MobX. Then, I explored related parts of the code to understand how they work together while learning the TypeScript features simultaneously. Since the task was to migrate the old code into the new React app, most of the work was to migrate old Material UI and MobX versions to newer ones. For React, I had to rewrite class components as functions. For MobX, I had to remove decorators and switch to makeAutoObservable. Fortunately, there was a handy tool called mobx-undecorate just for that purpose.

‍

During the migration, I consulted documentation and examples to learn new things, particularly for migrating from JSS in MUI components and for migrating from MobX version 5 to 6.

‍

Being a native iOS app developer who uses Swift, a statically-typed language, I find that writing in TypeScript for web apps helps a lot. In Visual Studio Code, the errors for type mismatch are flagged, which makes writing code easier and safer.

In the beginnings

iOS app development has a much gentler learning curve since Apple makes it easy for someone to display “Hello, World!” with minimal effort except for installing Xcode, which might take from a few minutes to hours, depending on the Internet connection. There is a Swift Playgrounds app for iPad and Mac, which provides games where junior developers can learn Swift and have fun. The overall learning experience is better in iOS app development.

‍

To get a React app running, an engineer should be familiar with at least installing third-party software on their computer and using the CLI. As a complete beginner, one should start learning the basics of HTML and CSS and then proceed with JavaScript. There are many great books like “Beginning JavaScript, 4th Edition” by Paul Wilton and Jeremy McPeak and tutorials for that. Once you get familiar with these technologies, you should start using advanced code editors like Visual Studio Code to increase productivity. You should also try to get familiar with some JavaScript libraries such as React and Ember.js or Svelte.

‍

It was a great decision for me to devote more time to learning web development while working on great projects. Now, I can choose to develop a native iOS app or to develop a hybrid app using web technologies.

Join the ilert team

Nay Min Ko has recently joined the ilert team as a working student. Do you want to be a part of the ilert team, too? Visit our Careers page. Also, we have recently shared the story of junior front-end developer Jan, who told how he developed his first product feature—Dashboard.

‍