add welcome message in the console

src/main.tsx

@@ -1,3 +1,5 @@
+import welcome from '@/utils/welcome';
+
 // Root contains the main dependencies and providers of the base app
 //  - React, ReactDom, RecoilRoot, HelmetProvider, ThemeProvider, MUI-core)
 // App contains the main structure of the base app
@@ -10,5 +12,8 @@ Promise.all([import('@/Root'), import('@/App')]).then(([{ default: render }, { d
   render(App);
 });
 
+// welcome message for users in the console
+welcome();
+
 // ts(1208)
 export {};

src/utils/welcome.ts

@@ -0,0 +1,31 @@
+import { title } from '@/config';
+
+// this utility is used to welcome users in the console
+function getRandomRGBNumber() {
+  return Math.floor(Math.random() * 256);
+}
+
+function getRandomColor() {
+  const r = getRandomRGBNumber();
+  const g = getRandomRGBNumber();
+  const b = getRandomRGBNumber();
+
+  return [`rgb(${r}, ${g}, ${b})`, `rgb(${255 - r}, ${255 - g}, ${255 - b})`];
+}
+
+function welcome() {
+  const [color, invertedColor] = getRandomColor();
+
+  const styles = [
+    'font-size: 40px',
+    `color: ${color}`,
+    `border: 1px solid ${invertedColor}`,
+    `background-color: ${invertedColor}`,
+    'border-radius: 5px',
+    'padding: 10px',
+  ].join(';');
+
+  console.log(`%c=== ${title} ===`, styles);
+}
+
+export default welcome;