COG-GTM · devin-ai-integration · May 12, 2026
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="wordle created using react" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
+      rel="stylesheet"
+    />
+    <title>Wordle</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,50 +3,34 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^13.5.0",
-    "classnames": "^2.3.1",
-    "react": "^17.0.2",
-    "react-countdown": "^2.3.2",
-    "react-dom": "^17.0.2",
-    "react-icons": "^4.3.1",
-    "react-scripts": "5.0.0",
-    "react-transition-group": "^4.4.2",
-    "sass": "^1.49.9",
-    "web-vitals": "^2.1.4"
+    "classnames": "^2.5.1",
+    "react": "^19.0.0",
+    "react-countdown": "^2.3.6",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
+    "react-transition-group": "^4.4.5",
+    "sass": "^1.86.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
     "fix": "prettier --write src",
     "check": "prettier --check src",
     "prepare": "husky install"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "husky": "^7.0.4",
+    "jsdom": "^25.0.1",
     "lint-staged": "^12.3.7",
-    "prettier": "2.6.1"
+    "prettier": "2.6.1",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
   },
   "lint-staged": {
     "src/*.{js,jsx,ts,tsx,json,css,scss,md}": "prettier --write --ignore-unknown"

diff --git a/public/index.html b/public/index.html
diff --git a/src/App.test.jsx b/src/App.test.jsx
@@ -1,8 +1,13 @@
 import { render, screen } from '@testing-library/react';
+import { AlertProvider } from 'context/AlertContext';
 import App from './App';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test('renders wordle game board', () => {
+  render(
+    <AlertProvider>
+      <App />
+    </AlertProvider>
+  );
+  const headerElement = screen.getByText(/wordle/i);
+  expect(headerElement).toBeInTheDocument();
 });
diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx
@@ -1,10 +1,12 @@
+import { useRef } from 'react';
 import useAlert from 'hooks/useAlert';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import styles from './Alert.module.scss';
 
 const Alert = () => {
   const { message, status, isVisible } = useAlert();
+  const nodeRef = useRef(null);
 
   const classes = classNames({
     [styles.alert]: true,
@@ -19,8 +21,11 @@ const Alert = () => {
         timeout={300}
         classNames={'fadeIn'}
         unmountOnExit
+        nodeRef={nodeRef}
       >
-        <span className={classes}>{message}</span>
+        <span className={classes} ref={nodeRef}>
+          {message}
+        </span>
       </CSSTransition>
     </div>
   );

diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -6,12 +6,19 @@ import styles from './Modal.module.scss';
 
 const Modal = ({ isOpen, onClose, title, children }) => {
   const ref = useRef();
+  const nodeRef = useRef(null);
 
   useOnClickOutside(ref, onClose);
 
   return (
-    <CSSTransition in={isOpen} timeout={300} classNames={'fade'} unmountOnExit>
-      <div className={styles.modalContainer}>
+    <CSSTransition
+      in={isOpen}
+      timeout={300}
+      classNames={'fade'}
+      unmountOnExit
+      nodeRef={nodeRef}
+    >
+      <div className={styles.modalContainer} ref={nodeRef}>
         <div className={styles.modal} ref={ref}>
           <button className={styles.close} onClick={onClose}>
             <RiCloseCircleLine size="1.6rem" color="var(--color-icon)" />

diff --git a/src/context/AlertContext.js → src/context/AlertContext.jsx b/src/context/AlertContext.js → src/context/AlertContext.jsx
diff --git a/src/index.js b/src/index.js
diff --git a/src/index.jsx b/src/index.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { AlertProvider } from 'context/AlertContext';
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <AlertProvider>
+      <App />
+    </AlertProvider>
+  </React.StrictMode>
+);
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      components: path.resolve(__dirname, 'src/components'),
+      hooks: path.resolve(__dirname, 'src/hooks'),
+      lib: path.resolve(__dirname, 'src/lib'),
+      constants: path.resolve(__dirname, 'src/constants'),
+      context: path.resolve(__dirname, 'src/context'),
+      styles: path.resolve(__dirname, 'src/styles'),
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.js',
+  },
+});