DEV Community: dev.family

Building a Custom E-commerce Analytics Dashboard in Hours with Admiral

Max Bantsevich — Tue, 13 Jan 2026 11:48:32 +0000

The Challenge

Recently, we needed to add seller analytics to our e-commerce project. You know the drill: key metrics, charts, data exports, order funnels — the usual set of features that clients expect in their admin panels.

Typically, building a custom analytics dashboard from scratch takes weeks. But we managed to put it together in just a couple of hours using Admiral, our open-source framework for admin panels.

What is Admiral?

Admiral is an open-source framework for rapidly building admin panels that works with any backend. Most people use it for quick CRUD operations, but it's capable of much more.

The key advantage: you're not locked into a specific stack or architecture. Admiral adapts to your backend, not the other way around.

What We Built

Here's what we assembled for our seller analytics dashboard:

📈 Key Metrics

Revenue tracking
Order count
Average order value
Repeat sales
Week-over-week trends with historical data

🔄 Business Process Visualization

Order funnel by status
Aggregated counts and totals
Visual representation of the sales pipeline

🛍️ Sales by Category

Breakdown of all orders by product categories
Visual charts for quick insights

↩️ Returns & Cancellations

Dedicated analytics block
Counts and monetary amounts

🎟️ Promo Code Analytics

Usage statistics
Application counts
Total discount amounts

📊 Data Export

One-click export to XLSX and CSV for every block

The Secret Sauce: Cursor Rules

What made this fast? We've developed cursor rules specifically for Admiral that speed up the development of custom interfaces dramatically.

With these rules, building beautiful and functional dashboards isn't just quick — it's actually enjoyable. The rules handle the boilerplate, letting you focus on the business logic specific to your project.

Why This Matters

This isn't an out-of-the-box feature that comes with Admiral. This is a custom dashboard we built for specific project needs in a couple of hours.

That's the point: Admiral gives you the flexibility to build arbitrary interfaces quickly:

Custom dashboards
Complex data visualizations
Tailored analytics
Whatever your project actually needs

No fighting with pre-built components that almost fit your use case. No compromising on features because extending the framework is too painful.

Try It Yourself

Admiral is open source and works with any backend. Whether you need simple CRUDs or complex custom interfaces, it adapts to your needs.

Check it out: https://github.com/dev-family/admiral

What kind of admin interfaces are you building? Have you found a framework that gives you the right balance of speed and flexibility?

UX/UI in 2026: Why Beautiful Design No Longer Guarantees Success

Max Bantsevich — Wed, 17 Dec 2025 12:10:36 +0000

TL;DR: AI commoditized "pixel-perfect" design. In 2026, designers compete on strategy and metrics, not aesthetics. Here's what actually works now.

Hi Dev.to! 👋

I'm a product designer who just spent 3 weeks deep-diving into what's actually working in UX/UI 2026. Not what looks pretty on Dribbble, but what moves business metrics and helps developers ship better products.

The main thesis? Design is becoming infrastructure, not decoration.

🤖 The AI Shift: What Changed for Designers

The reality:
Tools like Figma AI, Galileo AI, and Magician now generate clean layouts in seconds. I can literally type "dashboard for restaurant management app" and get 5 professional-looking variants instantly.

What this means:

"Pixel-perfect" is no longer a competitive advantage
Visual styling is commoditized
Designers must compete on strategy, not aesthetics

The new value:
Understanding user behavior, metrics, and business logic. AI handles the pixels; humans handle the "why."

// Old designer value proposition
const designer = {
  skill: "making things beautiful",
  output: "pretty screens"
}

// New designer value proposition
const designer = {
  skill: "understanding behavior + metrics",
  output: "interfaces that move numbers"
}

📊 Outcome-Driven UX: Every Screen Needs a Metric

In 2026, every screen you build must answer:

What behavior are we changing?
Which metric are we moving?
How quickly will we see results?

Mandatory metrics:

Activation
→ Time to first value
→ How fast does user "get it"?

Retention
→ Day 1, Day 7, Day 30
→ Do they come back?

Conversion
→ Free → Paid, Browse → Buy
→ Actual revenue impact

NPS
→ Would they recommend?
→ Real satisfaction metric

LTV
→ Long-term user value
→ Are we building sustainable business?

Real example from our work:

We redesigned an onboarding flow for a SaaS product:

BEFORE:
- 7 steps to first value
- 35% completion rate
- Day 7 retention: 18%

AFTER (outcome-driven approach):
- 3 steps to first value  
- 67% completion rate
- Day 7 retention: 34%

The design wasn't "prettier" - it was more strategic.

🌍 Regional UX Models Going Global

One-size-fits-all UX is dead. Products now adapt interfaces based on regional patterns:

Asia (Grab, Gojek, WeChat)

.interface {
  density: high;
  whitespace: minimal;
  features-per-screen: many;
  style: "super-app";
}

Why: Users expect everything immediately accessible. Dense = efficient.

India (Zomato, Paytm)

.interface {
  trust-signals: prominent;
  explanations: detailed;
  language: hyper-localized;
  style: "trust-first";
}

Why: Users approach new products cautiously. Design must explain and build trust.

US/Europe (Notion, Linear, Apple)

.interface {
  whitespace: generous;
  visual-noise: minimal;
  flow: calm;
  style: "minimalist";
}

Why: Users value clarity and breathing room. Less = more.

The key insight: Modern products detect user location/context and adapt UI accordingly. Same backend, different front-end patterns.

🥽 New Platforms = New UX Patterns

As developers, you're probably already building for these:

AR/VR (Apple Vision Pro, Meta Quest)

// Traditional UI thinking
const button = {
  type: "clickable",
  interaction: "tap/click"
}

// Spatial UI thinking
const button = {
  type: "spatial-object",
  interaction: "gaze + pinch",
  depth: "floating-at-50cm",
  physics: "gravity-affected"
}

Wearables (Apple Watch, smart glasses)

// Screen-based thinking
const notification = {
  display: "full-screen modal",
  dismiss: "button tap"
}

// Wearable thinking
const notification = {
  display: "glanceable-card",
  dismiss: "auto-after-3s",
  interaction: "quick-action-only"
}

Key differences:

Gesture-first flows (not tap/click)
Eye-control navigation (gaze as input)
Zero-UI (ambient, contextual interfaces)
Spatial design (3D, depth, physical space)

🎨 Visual Trends That Actually Work

Not just "looks cool" - these drive behavior:

1. Motion-First Design

Animations aren't decoration - they're explanation.

/* Bad: Decoration */
.button {
  transition: all 0.3s ease;
}

/* Good: Behavioral signal */
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  /* Communicates: "I'm clickable and will respond" */
}

.loading-state {
  animation: pulse 1.5s ease-in-out infinite;
  /* Communicates: "I'm working, wait for me" */
}

2. Warm Minimalism

Less noise, more breathing room, warmer palettes.

/* Old minimalism: cold */
:root {
  --background: #FFFFFF;
  --text: #000000;
  --accent: #0066FF;
}

/* Warm minimalism: human */
:root {
  --background: #FAFAF9;
  --text: #1A1A1A;
  --accent: #FF6B35;
  --surface: #F5F5F4;
}

3. Liquid Glass + Depth

Borrowed from visionOS, now everywhere:

.glass-panel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

4. Accessibility as Base Layer

Not optional anymore:

// Automated checks in CI/CD
const accessibilityChecks = {
  colorContrast: ">=4.5:1", // WCAG AA minimum
  focusVisible: true,
  keyboardNav: "complete",
  screenReaderLabels: "all-interactive-elements",
  motionPreference: "respect-prefers-reduced-motion"
}

🛠️ Practical Implementation for Developers

1. Integrate UX Metrics in Your Code

// Track UX metrics like features
const trackUXMetric = (metric, value) => {
  analytics.track('ux_metric', {
    metric_type: metric, // 'activation' | 'retention' | 'conversion'
    value: value,
    timestamp: Date.now(),
    component: getCurrentComponent()
  });
}

// Example: Track time to first value
const onboardingStart = Date.now();
// ... user completes onboarding ...
trackUXMetric('activation', {
  time_to_value: Date.now() - onboardingStart,
  completed: true
});

2. Build Adaptive Interfaces

// Detect and adapt to regional patterns
const getUXDensity = (userLocale) => {
  const densityMap = {
    'asia': 'high',      // More content per screen
    'india': 'medium',   // Balanced with trust signals  
    'us': 'low',         // Generous whitespace
    'eu': 'low'
  };

  const region = getRegion(userLocale);
  return densityMap[region] || 'medium';
}

// Apply density to layout
const spacing = {
  high: '8px',
  medium: '16px', 
  low: '24px'
}[getUXDensity(userLocale)];

3. Respect Familiar Patterns

// Don't reinvent the wheel
const navigation = {
  mobile: 'bottom-tab-bar',     // Familiar to everyone
  desktop: 'sidebar',            // Expected pattern
  // NOT: 'gesture-only-hidden-menu' (users will struggle)
}

// Innovation through details, not structure
const enhancedNavigation = {
  ...navigation,
  transitions: 'smooth-60fps',
  feedback: 'haptic-on-tap',
  state: 'persisted-across-sessions'
}

📈 Companies Doing This Right

Real examples to learn from:

Notion

Familiar patterns (blocks, pages, database views)
Wins on details (smooth animations, smart defaults)
Every feature tied to engagement metrics

Linear

Super predictable structure
Fast keyboard shortcuts (developer-focused)
Minimal visual noise, maximum clarity

Duolingo

Gamification based on retention data
A/B tests everything (3-5 day cycles)
Bright accents guide behavior

Shopify

Clean merchant dashboard
Regional payment method adaptation
Onboarding optimized for activation

🎯 The Controversial Part

If you design based on "beauty" or "speed to ship," AI will likely win.

Designers who focus on:

User behavior patterns
Business metrics
Strategic thinking
Collaboration with developers

...will be in the top 5% of the market.

✅ Quick Implementation Checklist

For your next feature:

- [ ] Define which metric this feature should improve
- [ ] Choose familiar patterns over novel ones
- [ ] Add smooth transitions (not just instant state changes)
- [ ] Ensure 4.5:1+ color contrast (WCAG AA)
- [ ] Test with keyboard navigation
- [ ] Add loading/error states with clear feedback
- [ ] Track actual usage metrics (not just launches)
- [ ] Run quick A/B test (3-5 days, not months)
- [ ] Adapt for regional patterns if targeting multiple markets

🔮 Bottom Line

2026 isn't about making prettier interfaces.

It's about:

Understanding behavior
Moving metrics
Building adaptable systems
Collaborating strategically

AI can generate the pixels. Developers + designers who understand the "why" behind the "what" will build products that actually work.

Full deep-dive (18 min read): https://dev.family/blog/article/uxui-ai-and-trends-that-actually-work-in-2026

What's your experience?

Are you tracking UX metrics in your projects?
Have you adapted interfaces for different regions?
How do you use AI in your design/dev workflow?

Let's discuss in the comments! 👇

P.S. If you're building products and want to dive deeper into any of these patterns, happy to answer questions in the comments.

How to verify your cookie consent is working 🍪🍪

Max Bantsevich — Thu, 08 May 2025 07:59:28 +0000

Got your cookie banner set up with Google Consent Mode? Now comes the critical step – verifying that it’s actually respecting user choices.

Here’s how to ensure everything is working smoothly:
1️⃣ Use Browser DevTools. Before and after consent, check cookies and requests to ensure compliance. Is Google Analytics firing only after consent? Are non-essential cookies blocked before? Make sure your users’ privacy is protected.
2️⃣ Google Tag Assistant. This Chrome extension shows consent status changes in real time, so you can track whether analytics and ads are only enabled when users say "yes".

And don’t forget about a detailed cookie policy that aligns with regional laws (GDPR, CCPA).

📘 Learn more in our full guide with examples of cookie policy for EU and US

Telegram mini-app development and testing specifics: from initialisation to launch

Max Bantsevich — Tue, 11 Mar 2025 10:58:06 +0000

We receive more and more requests for Telegram mini apps development. Why is this happening? Telegram continues to grow actively, and companies want to reach this audience by offering convenient solutions within the messenger, where their customers spend a significant part of their time.
The dev.family team has already talked about these and other benefits for business in one of our articles.

From a technical point of view, mini apps also have their advantages: they allow full-fledged applications to be launched directly in Telegram, without the need to develop separate native mobile versions. This significantly reduces development and support costs and speeds up the product's time to market.

In this article, I will share my own experience of developing Telegram mini apps and answer the following questions:

What are Telegram mini apps?
How are they different from other platforms?
What are the development prospects for Telegram mini apps?
How to properly test Telegram mini apps, taking into account the peculiarities of the platform?
How to set up the environment for a future application and initialise the Telegram apps SDK?
What are the nuances of Telegram mini apps development?

What are Telegram mini apps and why are they so popular

Today, Telegram mini apps allow us to open any website from within the messenger. The technology is implemented with the help of a special WebView browser shell – a system component that is responsible for integrating web pages into other applications and adapting to the device's operating system.

A Telegram mini app can be any application that can be written in JavaScript or any tool that can be compiled into it. For example, React, Next.js, Angular or even React Native for Web.

The product can either be a standalone solution or part of a business ecosystem. We have already told you in our Telegram mini app tutorial how to integrate a ready-made React Native application into Telegram using the react-native-web package.

Development prospects for Telegram mini apps
The number of Telegram users is gradually approaching one billion. Imagine giving them access to a cross-browser application that runs on any operating system, be it iOS, Android, Windows, macOS or Linux. And it doesn't require any mobile development. Now you can add the mini app to the desktop of your device and open it full screen as a standalone application. And it seems we are only at the beginning of its development path.

The functionality of Telegram mini apps and the possibility of integrating additional services and tools is quite wide: we can use accelerometer, gyroscope, biometrics, have access to geolocation, receive push notifications and much more.

Of course, many things can be done using the standard browser API. But Telegram simplifies user interaction, permissions, payments, data exchange and bot management by providing all the necessary tools. And thanks to Telegram's built-in security, mini apps can be more secure than traditional web apps.

I am sure that in the future Telegram will develop the mini apps format towards mobile development. There will be more and more opportunities to access the hardware features of devices, such as Bluetooth, NFC, Wi-Fi, flashlight, contacts, calendar and so on.

Working with Telegram mini apps is also very convenient for the user: if the messenger is already installed on the device with a connected account, there is no need to download anything additional. All the functionalities are already available in Telegram.

Businesses, in turn, get a convenient mobile app without having to resort to mobile development, which is usually more expensive than web development. Once we write an app competently, we can run it in the browser, mobile and desktop versions of Telegram, getting more opportunities and conversions for less cost.

How to properly test and debug the Telegram mini app

Let's go ahead and start with the peculiarities of testing Telegram mini apps, because we'll talk about them later in the development section. So it is important to set the context. The main difficulty is the inability to launch the project as easily as in a browser via localhost, and the lack of a developer console. However, these problems are easily solved.

As we have already seen, the Telegram mini app is a website that, when linked to, will run in the Telegram environment. So we need to pass a link that displays the development environment. This is done using port forwarding.

There are two ways of doing this.

In the first case, we use the third-party utility ngrok. But it only has a monthly limit on the number of connections, so this option is not very suitable for development.

In the second case we can use VSCode, where we need to open our project and run it as localhost. Next, open the terminal, go to the 'Ports' tab, type in the port number and you will get a link to the redirected port, which can now be used to access our localhost. We will use this link as the link to the mini app in the chatbot.
It looks like this: https://d0etr6gh-3000.euw.devtunnels.ms.

A redirected port can be created as follows:

Private – no one but you will be able to access it;
Public – the port will be available to everyone if we want to share the link to the application with others.

So we can launch our Telegram mini app and follow the development process in real time, because Hot Reload works just like in a browser.

But how do you debug an application without access to the developer console? To do this, let's learn about Eruda.

Eruda is a mobile development console that can be launched in any environment. All you need to do is click on the button that is embedded in your application after initialising this library.
This is what it looks like:

Below we'll go through how to create a mini app in Telegram from scratch and set up an initial template to initialise the telegram-apps/sdk-react package and the app itself. We will see how easy it is to integrate the Eruda package into our project.

You can also read the documentation and connect the package in a different way. Either way, it will only take a few lines of string.
In addition, I would like to mention one more thing that relates to testing.

If you try to open the app in a browser, you will see the following error:
“Unable to retrieve launch parameters from any known source. Perhaps, you have opened your app outside Telegram?”

The message says that the mini app cannot be launched outside the Telegram environment.

Let's move from theory to practice.

However, we can configure our application to open in a browser. We will not be able to get real data from Telegram, but we will add mock data that will mimic the environment we need.

Development of Telegram mini app from scratch

We have already described the process of creating a chatbot in Telegram using BotFather in this article.

So let's move on to the code itself.

The next step is to initialise the mini app project. In general, the Telegram developers have gone to the trouble of preparing a selection of ready-made template that you can use depending on the technology. For example, here are variants for Next.js and React.js.

✍ Does it make sense to use Next.js? Unfortunately, mini apps are not currently able to fully adapt to SSR, ISR and other rendering methods. Communication with Telegram happens through the use of a window object, which is impossible to get on the server side.

So if your application involves user identification or a chatbot, you will not be able to do this on the server and queries will have to be executed on the client. However, this does not change the fact that Next.js has additional benefits, features and optimisations over React and can still be used for mini app development.

Let's go back to the code. We took one of the ready-made templates and adapted it for our purposes, removing anything unnecessary and adding additional logic. To work with Telegram mini apps, we used the @telegram-apps/sdk-react package. Let's talk about it in a bit more detail.

We have a provider that is used in the root barkout to initialise this package and wrap the whole app.

It looks something like this:

<html lang={locale} className={`${GeologicaFont.variable}`}>
<body>
         <TelegramSDKInitProvider>
           <AppInitProvider>
               <div className={styles.layout}>{children}</div>
           </AppInitProvider>
         </TelegramSDKInitProvider>
     </body>
   </html>

What happens here and why do we need two providers?

First, all the logic is executed inside TelegramSDKInitProvider: the package is initialised so that we can get the user data and use the Telegram API in our application. We check the environment and mock the data if we are in development mode. This is to imitate the Telegram environment to run the application in the browser.

If we are in a production environment, it makes more sense to show an error or inform the user that the app needs to run inside Telegram. And ideally, add a link and QR code to the interface to go directly to the messenger.

'use client'

import { type PropsWithChildren } from 'react'

import { useClientOnce } from '@/src/hooks/useClientOnce'
import { useTelegramMock } from '@/src/hooks/useTelegramMock'

import { telegramSDKInit } from './init'

export function TelegramSDKInitProvider({ children }: PropsWithChildren) {
 if (process.env.NODE_ENV === 'dev') {
   useTelegramMock()
 }

 useClientOnce(() => {
   telegramSDKInit(false)
 })

 return children
}

Inside the useTelegramMock hook we use a check provided by the package itself – isTMA. This allows us to determine if we are in the Telegram environment. If we are not, we mock the data, if we are, we exit the function.

import { isTMA, mockTelegramEnv, parseInitData } from '@telegram-apps/sdk-react'

import { useClientOnce } from './useClientOnce'

export function useTelegramMock(): void {
 useClientOnce(() => {
   let shouldMock: boolean
   const MOCK_KEY = '____mocked'

   if (isTMA('simple')) {
     shouldMock = !!sessionStorage.getItem(MOCK_KEY)
   } else {
     shouldMock = true
   }

   if (!shouldMock) {
     return
   }

   const initDataRaw = new URLSearchParams([
     [
       'user',
       JSON.stringify({
         id: 99281932,
         first_name: 'Arthur',
         last_name: 'Mocked',
         username: 'arthurmocked',
         language_code: 'en',
         is_premium: true,
         allows_write_to_pm: true,
         photoUrl:
           'https://t.me/i/userpic/320/haNXSpRmeucJyo-oXFbNrifxZ-Au0PjvhpJ2l6h4ozcTbTT8yvNKIZABSCLpjtIp.svg',
       }),
     ],
     ['hash', '89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31'],
     ['auth_date', '1716922846'],
     ['start_param', 'debug'],
     ['chat_type', 'sender'],
     ['chat_instance', '8428209589180549439'],
   ]).toString()

   mockTelegramEnv({
     themeParams: {
       accentTextColor: '#6ab2f2',
       bgColor: '#17212b',
       buttonColor: '#5288c1',
       buttonTextColor: '#ffffff',
       destructiveTextColor: '#ec3942',
       headerBgColor: '#17212b',
       hintColor: '#708499',
       linkColor: '#6ab3f3',
       secondaryBgColor: '#232e3c',
       sectionBgColor: '#17212b',
       sectionHeaderTextColor: '#6ab3f3',
       subtitleTextColor: '#708499',
       textColor: '#f5f5f5',
     },
     initData: parseInitData(initDataRaw),
     initDataRaw,
     version: '8',
     platform: 'tdesktop',
   })
   sessionStorage.setItem(MOCK_KEY, '1')

   console.info(
     '⚠️ As long as the current environment was not considered as the Telegram-based one, it was mocked. Take a note, that you should not do it in production and current behavior is only specific to the development process. Environment mocking is also applied only in development mode. So, after building the application, you will not see this behavior and related warning, leading to crashing the application outside Telegram.',
   )
 })
}

We can use our own data. For example, from your Telegram account.
Now we can run our app both in Telegram and in any browser.

Next, we run telegramSDKInit, which initialises the SDK package and performs the initial configuration of the application. For example, configuring the full screen mode or the behaviour of closing the app with vertical swipes.

This is also where we initialise the Eruda mobile console that I mentioned in the testing section. The initialisation happens only once – when the app is launched, which is controlled by the useClientOnce hook.

import {
 $debug,
 backButton,
 expandViewport,
 init as initSDK,
 initData,
 miniApp,
 swipeBehavior,
 themeParams,
 viewport,
} from '@telegram-apps/sdk-react'

export function telegramSDKInit(debug: boolean): void {
 $debug.set(debug)

 initSDK()
 expandViewport()

 if (backButton.isSupported()) {
   backButton.mount()
 }

 miniApp.mount()
 themeParams.mount()
 swipeBehavior.mount()
 initData.restore()

 void viewport
   .mount()
   .then(() => {
     viewport.bindCssVars()
     miniApp.bindCssVars()
     themeParams.bindCssVars()
     viewport.requestFullscreen()
     swipeBehavior.disableVertical()
   })
   .catch((e: unknown) => {
     console.error('Something went wrong mounting the viewport', e)
   })

 debug && import('eruda').then((lib) => lib.default.init()).catch(console.error)
}

Then the AppInitProvider logic is executed, where we show the download status instead of the content, as our app is not ready to use yet. Here we already have access to the Telegram API, so we get the data we need (e.g. user data). Next, we will either record the user ID in cookies or perform an authorisation request, passing the necessary data from Telegram.

Once all the manipulations are done, we can display the rest of the application.

An AppInitProvider could look like this:

'use client'

import { initData, useSignal } from '@telegram-apps/sdk-react'
import { setCookie } from 'cookies-next'
import type { PropsWithChildren } from 'react'
import { useCallback, useEffect, useState } from 'react'

import { postAuthLogin } from '@/src/api/schema'
import TelegramMiniAppLoader from '@/src/components/ui/TelegramMiniAppLoader'
import Title from '@/src/components/ui/Title'
import { AUTH_TOKEN, TELEGRAM_USER_ID } from '@/src/constants'

const AppInitProvider = ({ children }: PropsWithChildren) => {
 const [isAppReady, setIsAppReady] = useState(false)
 const [error, setError] = useState(null)

 const initDataState = useSignal(initData.state)
 const initDataStateRaw = useSignal(initData.raw)

 const userId = initDataState?.user?.id

 const logError = useCallback((message: string) => {
   console.error(message)
   setError(message)
 }, [])

 const authenticateUser = useCallback(
   async (rawData: string) => {
     try {
       const { data } = await postAuthLogin({ init_data: rawData })

       if (data) {
         setCookie(AUTH_TOKEN, data.token)
         setIsAppReady(true)
       } else {
         logError(`Auth token is missing. Response: ${JSON.stringify(data)}`)
       }
     } catch (err) {
       logError(
         `Authentication failed: ${err instanceof Error ? err.message : JSON.stringify(err, null, 2)}`,
       )
     }
   },
   [logError],
 )

 const initApp = useCallback(() => {
   if (!userId) {
     logError(`Telegram user ID is absent. User ID: ${userId}`)
     return
   }

   setCookie(TELEGRAM_USER_ID, userId)

   if (!initDataStateRaw) {
     logError('Telegram raw data is undefined.')
     return
   }

   authenticateUser(initDataStateRaw)
 }, [userId, initDataStateRaw, authenticateUser, logError])

 useEffect(() => {
   console.log('Initializing app with raw data:', initDataStateRaw)
   initApp()
 }, [initApp, initDataStateRaw])

 if (error) {
   return {error}
 }

 return isAppReady ? <>{children} : 
}

export default AppInitProvider

Our application is now fully initialised and ready to run.

Specifics of Telegram mini app development

Let's look at the key issues and challenges you need to understand to ensure a stable application and user experience.

WebView limitations

Since Telegram mini apps are based on the WebView interface, not all of the features we use in browsers will work here.

In our app we use iFrame. And if we want to open it in full screen, we can use the requestFullScreen method. Unfortunately, this doesn't work for WebView. Also, some icons may display differently or not at all. Especially if gradients are used inside. Problems can also occur when using WebSocket, which might requires additional configuration. It is therefore important to spend extra time on development to fix any bugs.

Also, I have often seen comments on forums that using WebView causes performance degradation. Especially on low-power devices and when there are a lot of complex animations. Some developers even include the ability to disable animations in the app so users don't experience performance issues.

Dependency on Telegram API

Despite the popularity of Telegram, the platform also has its own bugs that can affect your app. Here's a case study example.
Telegram automatically handles situations where a virtual keyboard is opened on mobile devices and automatically moves content so that they do not overlap. On the one hand, this is very convenient – developers don't have to write additional logic if, for example, the input field is at the bottom of the screen. On the other hand, at the time of writing, this feature still does not work correctly on iOS devices, which can lead to some limitations for users.

Limitation in working with query parameters

If you try to pass initial parameters to a mini app link, Telegram will simply cut them out. According to the Telegram mini app documentation, we can only pass one parameter called startapp. The process looks like this: https://t.me/botusername/appname?startapp=someParamValue
But if you need to pass multiple parameters, you can use the following trick: we still pass one parameter in the reference, but it has many other parameters nested within it with a specific delimiter. For example, '_ _'.

https://t.me/botusername/appname?startapp=param1value__param2value__par
am3value
const [param1, param2, param3] = lp.startParam.split("__");

Client-side nature of app

It is also important to remember that mini apps run primarily on the client side. This limits the use of server-side rendering (SSR), because to use the Telegram API you need access to the window object, which is only available on the client.

Peculiarities of the Telegram platform

To create a Telegram mini app, you need to understand the specifics of the platform itself and the specifics of working with WebView.
For beginners, I recommend to pay attention to the following:

Telegram WebApp API – interact with buttons, events, get user data. Study the library documentation if you plan to use it to work with Telegram;
Permission handling – proper handling of initData and signature verification. Authorisation is taken to a new level here, eliminating the need to constantly create and store tokens on the client side;
Platform limitations – specifics of rendering, navigation and integration with front-end frameworks (e.g. Next.js);

Interface customisation – working with dark and light themes, WebView customisation, and developing workarounds for platform limitations.

✍ This may seem complicated and time-consuming, but learning new things is an important part of being a programmer. In the future, Telegram will certainly continue to develop its API and expand support for device hardware capabilities.

The sooner you start working with this format, the sooner you'll learn to develop cross-platform solutions, get a deeper understanding of external API integration, and gain experience with scalable applications for an audience of billions.

The dev.family team has been in touch 💜💚
See you soon!

P.S. As per tradition, here are the links to the artefacts:
Telegram mini apps documentation:

https://core.telegram.org/bots/webapps
The documentation of the package for interacting with the Telegram API is telegram-apps/sdk-react: https://docs.telegram-mini-apps.com/packages/telegram-apps-sdk-react/2-x
Templates from Telegram developers: https://github.com/Telegram-Mini-Apps#templates
Telegram mini apps template for Next.js: https://github.com/Telegram-Mini-Apps/nextjs-template
Telegram mini apps template for React.js. https://github.com/Telegram-Mini-Apps/reactjs-template
Eruda documentation: https://github.com/liriliri/eruda
ngrok: https://ngrok.com/docs/pricing-limits/free-plan-limits/

How to add a card to Apple Wallet and Google Wallet 📱 in React Native?

Max Bantsevich — Thu, 07 Nov 2024 12:30:21 +0000

Mobile developers can use Apple Wallet and Google Wallet integrations for different types of apps:

Boarding pass storage and hotel reservations;
Card for short-term rental;
Passes for buildings or events;
Scan tickets for travel or subscriptions;
Store loyalty cards and gift vouchers;
Providing contactless payment, etc.

Once we already wrote our own library for Apple Wallet in React Native because we couldn't find anything ready to use. As true open source enthusiasts, we have already shared this version with you. But now that Google Wallet is fully released, it's time to update it.

Now, this library provides integration with both Apple Wallet on iOS and Google Wallet on Android. It allows you to add, remove, and check for existing passes on iOS, and add passes to Google Wallet on Android.

Readme

To download the library go here.

You can find out more about disruptive with React Native you’ll find in our blog.

How to build a Web App: Deploying Telegram mini-app

Max Bantsevich — Thu, 31 Oct 2024 14:45:33 +0000

Hi there, it's the dev.family team again! We're continuing our experiment with building an app in React Native that works as as a Telegram Web App. In our previous episodes, we discussed:

The specifics of building a React Native web application using react-native-web and where we deviated from the documentation. You can find all the code and details of the process in the first part;
The reasons why companies choose to run web applications on messenger apps.

Now, let's focus on installing the web app itself within the Telegram bot.

Web AppDeployment

In the last part we finished the preparatory work. Now let's deploy our site.

We will use Firebase to deploy the clicker. There are two options:

The first (and easiest) is a simple command line deploy;
The second (a bit more complicated) is a commit/merge/PR deploy via github actions.

For the purposes of this article, let's look at the fastest option.

Let's create a project in the Firebase Console. Follow the link and click on the 'Create Project' button.

Specify the name of our project:

Next, click ‘Continue’ several times, select Default Firebase Account (if you have a different one, you can select it), and click Create Project.

The new project is successfully established:

Now go to the project and click the 'Add Web Application' button:

Next, enter the name of the project:

You can leave the 'Set up Firebase hosting too' checkbox unchecked. Click on the 'Register application' button and you will see two options with instructions on how to install the Firebase tools in our project.

We won't use the option via npm, but via the script tag, as we don't need it for the mobile application. You can choose any convenient option.

This completes our work with Firebase Console, let's return to the application.

Note: It is not recommended to put all these keys directly in the html file. It is better to create an .env file and put them there.

.env

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=

Notice that all of the keys we use start with the word ‘Vite’. We do this because we are using Vite as an assembler. And when accessing environment variables via import.meta.env, it may not recognise them without this.

Next, let's edit our index.html a bit, taking into account what we've written above.

index.html

<html>
<body>
...
<script type="module">
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js";
 import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-analytics.js";
  const firebaseConfig = {
   apiKey:import.meta.env.VITE_FIREBASE_API_KEY,
   authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
   projectId:  import.meta.env.VITE_FIREBASE_PROJECT_ID,
   storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
   appId: import.meta.env.VITE_FIREBASE_APP_ID,
   measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
 };


 const app = initializeApp(firebaseConfig);
 const analytics = getAnalytics(app);
</script>
<script src="./index.web.js" type="module"></script>
</body>
</html>

Open a terminal, go to the root of the project and type the command:

firebase login

Then we go to the browser window and authorise through the Firebase console.

firebase init

Select the highlighted item and press Space, then Enter.

The next step is to resolve a number of configuration issues. Add the following:

Please select an option – here we select Use an existing project. And from the list below – a recently created project;
What do you want to use as your public directory? – select dist (this is where our unit will be located);
Configure as a single-page app (rewrite all urls to /index.html)? – y;
Set up automatic builds and deploys with GitHub? (y/N) – N (we don't need it at this stage);
File dist/index.html already exists. Overwrite? (y/N) – N.

Go to firebase.json and modify it a bit.

firebase.json

"hosting": {
   "public": "dist",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**",
     //past here
     "**/android/**",
     "**/ios/**"
   ],
   "rewrites": [
     {
       "source": "**",
       "destination": "/index.html"
     }
   ]
 }
}

Add the Android and iOS directories to ignore during deployment. Since we have a web application, we don't need to send all the files to a hosting service. Also, they're quite heavy and you won't be able to download them without some sort of subscription.

So, we're nearing the finish line. There's just one more command to write.

firebase deploy

Now click on the link below. Our application is already hosted!

All you have to do is deploy the app on Telegram.

Installing a web app in a Telegram bot

Let's take a look at what's currently available:

A working app on iOS;
A working app on Android;
A working web app, already hosted.

With one last tap, you can add an app to the list in a messenger app. Open a bot called BotFather in Telegram and start a dialogue.

Choose the option /newbot:

Give our bot a name. This will create an API key for interacting with our bot via HTTP.

Next, write the command /mybots and choose the currently created bot. Go to bot settings.

Choose the point Configure Mini App.

You may see a message saying that the Mini App is disabled for our Telegram bot. That's fine. Just click on the Enable Mini App button.

Now we just pass the URL where our web application is hosted.

Now let's configure the menu button. To do this, go back to the bot settings and select Configure Menu Button. Again, you may be told that the button is currently disabled and offered the option to enable it. Accept and give it a name.

The time has come: let's see how our guy works. Let's go to the bot – @ReactNativeWebClickerBot (you can rate it too, we'd appreciate it 😌). We open it up and make sure it works!

All theme settings are synchronised, as is the username. If you enter the bot from the mobile app and click on a coin, you can feel how well the haptic response works.

Conclusion

In this experiment, we break down in detail how you can:

Build a web app based on a mobile app written in React Native using react-native-web;
Deploy it via Firebase;
Use it in a Telegram mini-app;
Interoperate with the Telegram client in our shared codebase.

The technologies described can be used not only for Telegram, but also for other platforms. So you can create cross-platform solutions that work on the same code.

Why it's good:

Your app will work across channels and be featured in multiple stores, allowing you to reach more users;
The speed of product development will increase significantly – the average time to release will be reduced by 20%, meaning a faster time to market;
Most of the code base can be reused, making updates and bug fixes easier.

The main thing is to remember the specifics of each platform and take them into account when developing.

We've deliberately left some parts of the code unwritten so that you can fill them in yourself. If you like, add Telegram user validation, check if the user is present in the mobile app and set up a Firebase deployment via GitHub Actions. In short, experiment to get the best results.

As usual, we leave links to the useful resources:

React Native Web documentation;
Telegram mini-app documentation;
Link to Firebase
All code in Github
@ReactNativeWebClickerBot itself.

What if we told you that you don't need an app or a website to sell online? Go to Messenger and launch your Telegram WebApp.

Max Bantsevich — Thu, 24 Oct 2024 16:26:56 +0000

Companies are moving to web apps in messengers. And here are the reasons why you should join them:
🟣 Increase market share by entering the channel with a constantly active audience;
🟢 Boost sales with an easy ordering process in just a few clicks;
⚪️ Keep users engaged by communicating with them in one channel.

It only takes a few seconds for customers to order food from the restaurant, pay for services and book the time to visit your establishment in messengers like WhatsApp or WeChat. Find more ideas for web applications in our article

🎮 Writing in React Native and want to add cool game mechanics or AR/VR features to your app? It's easy to do with Unity.

Max Bantsevich — Fri, 20 Sep 2024 10:11:13 +0000

Hello everyone! 👋 It's the dev.family team again with a rather unusual topic. Let's talk about games 🎮. More specifically, how to integrate Unity with React Native.

📱 In our latest blog post, we've put together a step-by-step guide on how to seamlessly integrate Unity into your cross-platform mobile applications.

We cover everything from initial setup to potential challenges you may face along the way. This guide has got you covered. ✅

If you're curious and want to learn more, check out the full integration guide 🌐 here

React Native Splash Screen - support for different themes

Max Bantsevich — Thu, 19 Sep 2024 14:45:57 +0000

Hello everyone! It's the dev.family team is in touch. In this article, we are sharing a short guide on how to install Splash Screen in a cross-platform app written in React Native with support for multiple themes.

Splash screen is the first screen that users see before loading into the main application. This screen is perhaps the best way to make the name of your app, and in general, its entire name, more memorable.

But this is not the main role of the splash screen. Under it, for example, you can hide receiving data from the API and loading the main application. We do this when we show the loader on the screen when loading the same data. This allows you to improve the UX and immediately demonstrate the finished application to the user. And as a result, remove the extra loader when opening it for the first time.

In this short guide, we will look at installing splash screens for iOS and Android using the react-native framework using the react-native-splash-screen library.

Step-by-step instruction

Preparations

yarn add react-native-splash-screen

After this, in the ios folder you need to run the command to install the pods:

cd ios && pod install && cd ..

(go to the ios directory, install pods and go back)

Next, there are two configuration options:

Use for the splash screen an image exported, for example, from the same Figma
Making this screen by hand is more difficult and takes longer.

Let's first look at the screen itself.

Let's say we chose the option when a picture is used. We export it in high resolution (in our case x3). But, since we are doing everything for two themes at once, we need to export both copies (for light and dark). Next, go to AppIcon and drag first one image, then another.

Then click Generate, download the assets and place them in the assets folder in the project root.

НNow that the general preparations are complete, let’s move on directly to installation in the mobile application. Let's start with iOS.

Setting up Splash Screen iOS

First of all, open the .xcworkspace of our project. There we see an empty AppIcon (if you did not add an application icon or other assets). Now let's create an image set file. Let's call it, for example, SplashScreen (yes, it’s very original, I know :))

After creation, in the settings we see Apperances with the None option selected. Click on it and select Any, Light, Dark. In Any and Light we drag assets for the light iOS theme. In Dark - for dark, respectively. It turns out like this:

We’re almost there.

Open LaunchScreen.storyboard. Select View Controller Scene > View Controller > View and delete everything from there. After that, select View, click on the triangle icon at the top right and uncheck Layout Guides > Safe Area. Click on the plus and add it to our View Image View. Remove all margins and check the Constraints to margins checkbox.

In the settings, we specify the resource for our Splash Screen. And select Content View, which suits us best. In this case - Scale To Fill. But Aspect Fit is suitable for most.

Here you can view the dark theme and check that the picture has changed correctly.

We've sorted out the easy part of installing on iOS.

As for the difficult one, everything is much more fun. I cannot provide a ready-made solution. You will have to export all the pictures and colors that make up your Splash Screen yourself, and customize LaunchScreen.storyboard manually.

We'll show you how we do it:

In general, as you can see on the screenshots, the technique is similar, except that not one whole picture is added, but a composite screen. We should do everything in a similar way: add colors, set different palettes to them depending on the theme, and with the pictures we act as in the example above.

The greatest difficulty of this approach is scaling for different iPhone models. This can be solved with different indentations. They can be static - used equally on all models. Conventionally, 30px on the left - and this will be the case on all models, regardless of whether the screen is smaller or larger. There may also be dynamic indents, as, for example, in the case of a logo. Everything is configured in the View settings (for the image):

As well as the location for the screens of different models. It would probably be even more correct to say the indentation that is preserved:

In a word, if you choose this method, you will have to play around with it yourself.

The final touch is to go to the AppDelegate.m file and add the following

[super application:application didFinishLaunchingWithOptions:launchOptions];


  [RNSplashScreen show]; // call our SplashScreen


  return YES;

Instead of a line

return [super application:application didFinishLaunchingWithOptions:launchOptions];

And add import

#import "RNSplashScreen.h"

Android setup

We've sorted out iOS, now let's start setting up Android. Here, as well we’ll start with a simple option, when we just use a picture.

First of all, transfer the generated materials to the res folder (android > app > src > main > res). It should come out like this:

Next, go to the res > values folder and create a theme.xml file, insert the following there

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <attr name="launchImage" format="reference"/>
</resources>

Here we have added a custom launchImage attribute.
Next, go to the styles.xml file (android/app/src/main/res/values/styles.xml) and add the following:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <resources>

      <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ....
      </style>

      <!-- Add this -->
      <style name="LightTheme" parent="AppTheme">
        <item name="launchImage">@drawable/launch_screen_light</item>
      </style>

      <!-- Add this -->
      <style name="DarkTheme" parent="AppTheme">
        <item name="launchImage">@drawable/launch_screen_dark</item>
      </style>

    </resources>

Here we added two themes, Light Theme and Dark Theme, and wrote down the values that predetermine our launchImage image.

Then in our res folder we create a layout folder and add the launch_screen.xml file to it. In this file we write:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" 
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView 
            android:layout_width="match_parent" 
            android:layout_height="match_parent"
            android:src="?attr/launchImage"
            android:scaleType="centerCrop" 
        />
    </RelativeLayout>

Here we define a link to our image attribute. Pay attention to android:scaleType="fitXY". This value may not suit you, you can look for available options here

Finally we go to MainActivity.java (android > app > src > main > java > com > packageName > appName > MainActivity.java) and overwrite the onCreate method with the following:

@Override
protected void onCreate(Bundle savedInstanceState) {
switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
case Configuration.UI_MODE_NIGHT_YES:
setTheme(R.style.DarkTheme);


break;
case Configuration.UI_MODE_NIGHT_NO:
setTheme(R.style.LightTheme);
break;
default:
setTheme(R.style.LightTheme);
}


SplashScreen.show(this);
super.onCreate(savedInstanceState);
}

In the super.onCreate() method we pass null if the react-native-screens package is used.

Also at the very top you need to add two imports

import org.devio.rn.splashscreen.SplashScreen;
import android.content.res.Configuration;


public class MainActivity extends ReactActivity { …

Library implementation

Now all the preparations are completed. All that remains is to implement the library in our application

App.tsx
// import the library

import SplashScreen from 'react-native-splash-screen' 

export default function App {

    useEffect() {
    // any asynchronous code can be here 
    // before opening the application

    // hide our Splash Screen
        SplashScreen.hide();
    }

    . . . render function

}

All that remains is to do yarn run ios / yarn run android and make sure that everything works well.

That's all. Our guide on implementing Splash Screen for different themes in react-native is complete. We hope it helps you, and remember that the Splash Screen is a pretty important part of the application, since it is the first thing the user sees. So don't treat it with disdain. Best wishes! The dev.family team was in touch, see you soon!

Admiral. Roles and access division in the menu

Max Bantsevich — Thu, 05 Oct 2023 13:51:49 +0000

Hi everyone, just a reminder that we are developing Admiral - an open source solution on React, which allows you to quickly develop beautiful CRUDs in admin panels, but create fully custom interfaces if you want. From developers for developers with love, as the saying goes.

Our project is available here - https://github.com/dev-family/admiral

Today we want to share small tricks on how to create a menu in the control panel that will be generated depending on the user's role. This is quite a popular use case.

Static Menu

From the documentation you can see that out of the box comes an example of building a static menu. Nothing unusual - a menu component with Item (menu items) and SubItem (menu sub-items) with a title, a link to go to and an icon inside it.

import { Menu, SubMenu, MenuItemLink } from '../../admiral'

const CustomMenu = () => {
    return (
        <Menu>
            <MenuItemLink icon="FiCircle" name="First Menu Item" to="/first" />
            <SubMenu icon="FiCircle" name="Second Menu Item">
                <MenuItemLink icon="FiCircle" name="Sub Menu Item" to="/second" />
            </SubMenu>
        </Menu>
    )
}

export default CustomMenu

What if we want to manage this menu? Separate the menu by role? Make it available to guests? That's where creating a Dynamic Menu can help.

Dynamic Menu

In order to convert the menu from static to dynamic, we have to get it from somewhere. Let's turn to the documentation, more precisely to the section on interacting with API. Let's use the getIdentity method, which gives information about the authorized user, in this case each user will receive the menu available for him along with information about him. Let's go to the file menu.tsx.

Let's first define the basic structure of the menu.

interface ISubMenuItemChildren {  
    name: string  
    to: string  
    badge?: number  
    icon?: keyof typeof Icons  
}  

interface ISubMenuItem {  
    to?: string  
    name: string  
    badge?: number  
    icon?: keyof typeof Icons  
    children?: Array<ISubMenuItemChildren>  
}

The fields from the name are self-explanatory, but let's break it down just in case:

name - name of the menu item
to - jump link
badge - optional field that will display a number (total number of records in the menu item, it depends on what number you want to display).
icon - icon
children - array with sub-items

In the end, we plan to get such data using the getIdentity method:

name: "Dev Family",
user: {id: 4, name: "Dev Family", email: "info@dev.family",…},
email: "info@dev.family",
id: 4,
menu: [
    {name: "Users", icon: "FiUsers", badge: null, to: "/users"},
    {name: "Channels", icon: "FiPlayCircle", badge: null, to: "/channels"}
],

Let's try to parse the array of menu objects in the menu.tsx file, the resulting file looks like this:

import React, { useCallback, useEffect, useState } from 'react'  
import { Menu, MenuItemLink, SubMenu, useGetIdentity } from '@devfamily/admiral'  
import * as Icons from 'react-icons/fi'  

interface ISubMenuItemChildren {  
    name: string  
    to: string  
    badge?: number  
    icon?: keyof typeof Icons  
}  

interface ISubMenuItem {  
    to?: string  
    name: string  
    badge?: number  
    icon?: keyof typeof Icons  
    children?: Array<ISubMenuItemChildren>  
}  

type SubMenuItemsType = Array<ISubMenuItem>  

const CustomMenu = () => {  
    const { identity } = useGetIdentity()  
    const [filteredSubMenuItems, setFilteredSubMenuItems] = useState<SubMenuItemsType>([])  

    useEffect(() => {  
        if (identity?.menu && Array.isArray(identity?.menu)) {  
            setFilteredSubMenuItems(identity?.menu)  
        }  
    }, [identity?.menu])  

    const renderSubMenuItems = useCallback(  
        function () {  
            return (  
                <>  
                    {filteredSubMenuItems.map(function (submenu, i) {  
                        if (submenu.to) {  
                            return (  
                                <MenuItemLink  
                                    key={`${i}`}  
                                    icon={submenu.icon}  
                                    name={submenu.name}  
                                    to={submenu.to}  
                                    badge={{ count: submenu.badge, status: 'error' }}  
                                />  
                            )  
                        }  

                        if (submenu.children) {  
                            return (  
                                <SubMenu  
                                    key={i}  
                                    icon={submenu.icon}  
                                    name={submenu.name}  
                                    badge={{ count: submenu.badge, status: 'error' }}  
                                >  
                                    {submenu.children.map(function (contentItem, j) {  
                                        return (  
                                            <MenuItemLink  
                                                badge={{ count: contentItem.badge, status: 'warning' }}  
                                                key={`${i}_${j}`}  
                                                icon={contentItem.icon}  
                                                name={contentItem.name}  
                                                to={contentItem.to}  
                                            />  
                                        )  
                                    })}  
                                </SubMenu>  
                            )  
                        }  
                    })}  
                </>  
            )  
        },  
        [filteredSubMenuItems],  
    )  


    return <Menu>{renderSubMenuItems()}</Menu>  
}  

export default CustomMenu

Now our menu is fetched from the API method getIdentity and generated dynamically. If you have other use cases we can break down for you, share ideas in the comments!

How to get svg from the site

Max Bantsevich — Tue, 22 Aug 2023 12:20:16 +0000

If you see the use tag inside the svg - it means that the picture is used by reference, i.e. it is rendered once in the house and then in all other places it is used by reference, how to pull it out:

1. Open the DOM tree

2. Find the link that uses the image (in our case xlink:href="#svg-icon-logo")

3. Press ctrl+f and paste this #svg-icon-logo ID into it
4. Find the symbol tag with the same id, expand it and see the part of our svg

5. Copy this element

6. Create a file with the extension .svg, open it with Notebook
7. Take a standard svg tag from any other svg

8. Plug in the data from symbol, replace the properties width="16" height="17" viewBox="0 0 16 17" in the svg tag with those specified in symbol, in our case it is viewBox="0 0 0 465 146", the last two digits are width and height.

9. Get svg

10. Be sure to check that all quotation marks in tags are not inverse, but regular "".

😲😲 Creation of CRUD in 5 minutes

Max Bantsevich — Thu, 17 Aug 2023 09:24:26 +0000

Where to start... Not too long ago we released our Open Source solution for creating back office on React - https://github.com/dev-family/admiral

It provides out-of-the-box components and tools that make developing an admin interface easy and fast.

The reasons we made it were huge:

We wanted a solution that quickly creates CRUDs (create, read, update, delete) and requires minimal effort.
We wanted to be able to create some complex interface if the task required it.
We make cool, beautiful projects, so we wanted a visually pleasing solution.
We wanted the solution to be language-independent on the back-end.

In short, we wanted fast, beautiful and custom. And we got it. To prove our words, we decided to show, how you can create CRUD in 5 minutes.

Let's begin

Express.js is a modular framework for Node.js that is used to build web servers and handle HTTP requests. It is great for a quick CRUD startup on Admiral.

This article consists of 2 parts – creating Backend Admin API and creating entities on the Admiral side.

Preparation

Run the command git pull https://github.com/dev-family/admiral.git
Go to the /examples/express-server folder
Follow the installation instructions in the Readme.md file

Express JS Admin API

Now we need to implement the Front part of our application. To do this, you should perform the following actions

1) Go to the folder /examples/express-server/admin/src/crud
2) Create the brands folder, in which we create the index.ts file with the following contents

import { createCRUD, SlugInput, TextInput } from 'admiral'
import React from 'react'

export const CRUD = createCRUD({
    path: '/brands',
    resource: 'brands',
    index: {
        title: 'Brands',
        newButtonText: 'Add',
        tableColumns: [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                width: 90,
            },
            {
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: 'Slug',
                dataIndex: 'slug',
                key: 'slug',
            },
            {
                title: 'Description',
                dataIndex: 'description',
                key: 'description',
            }
        ],
    },
    form: {
        create: {
            fields: (
                <>
                    <TextInput label="Name" name="name" placeholder="Name" required />
                    <SlugInput from="name" label="Slug" name="slug" placeholder="Slug" required />
                    <TextInput label="Description" name="description" placeholder="Description" required />
                </>
            ),
        },
        edit: {
            fields: (
                <>
                    <TextInput label="Name" name="name" placeholder="Name" required />
                    <SlugInput from="name" label="Slug" name="slug" placeholder="Slug" required />
                    <TextInput label="Description" name="description" placeholder="Description" required />
                </>
            ),
        },
    },
    filter: {
        topToolbarButtonText: 'Filters',
        fields: (
            <>
                <TextInput label="Name" name="name" placeholder="Name" />
            </>
        ),
    },
    create: {
        title: 'Create Brand',
    },
    update: {
        title: (id: string) => `Edit Brand #${id}`,
    },
})

Let's talk a little bit more about the CRUD object itself. As you can see, we use various Input components to build CRUD. The full list of components can be found here - https://admiral.dev.family/components/.

3) Now create a folder in /examples/express-server/admin/pages (pages - a folder with all pages) with the files:

create.tsx (for entity creation mode)

import { CRUD } from '@/src/crud/brands'

export default CRUD.CreatePage

[id].tsx (for entity update mode)

import { CRUD } from '@/src/crud/brands'

export default CRUD.UpdatePage

index.tsx (for entity list view)

import { CRUD } from '@/src/crud/brands'

export default CRUD.IndexPage

4) Open our menu file - /examples/express-server/admin/src/config/menu.tsx and add a new menu item to go to the Brands entity.

5) Go to our panel, usually http://localhost:3000/ and we should see the following result

6) Let's create a test entity

7) Result