New Project Checkpoint.

Author: omprashantjain

README.md

@@ -1,8 +1,3 @@
-# React + Vite
+# MERN Live Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+This is the frontend for the MERN Live project. We will keep replacing it with the latest project that we build. The code of older project will be kept in MERNLive repo for reference.

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "6-todo-ui-bootstrap",
+  "name": "mern-live-frontend",
   "private": true,
   "version": "0.0.0",
   "type": "module",

package.json

@@ -1,21 +1,16 @@
-import AddTodo from "./components/AddTodo";
-import AppName from "./components/AppName";
-import LoadItems from "./components/LoadItems";
-import TodoItems from "./components/TodoItems";
-import { TodoItemsProvider } from "./store/TodoItemsContext";
+import ExampleComponent from "./components/ExampleComponent";
+import { ExampleProvider } from "./store/ExampleContext";
 
 function App() {
   return (
-    <TodoItemsProvider>
-      <div className="min-h-screen bg-gray-50">
-        <div className="container mx-auto px-4">
-          <AppName />
-          <AddTodo />
-          <LoadItems />
-          <TodoItems />
+    <ExampleProvider>
+      <div className="min-h-screen bg-gray-100">
+        <div className="py-8">
+          <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">Example App</h1>
+          <ExampleComponent />
         </div>
       </div>
-    </TodoItemsProvider>
+    </ExampleProvider>
   );
 }
 

src/App.jsx

@@ -0,0 +1,46 @@
+import { ExampleContext } from "../store/ExampleContext";
+import { exampleServerToClientModel } from "../utils/ModelUtil";
+import { useRef, useContext } from "react";
+
+const ExampleComponent = () => {
+  const { addExampleItem } = useContext(ExampleContext);
+  const exampleTextInput = useRef();
+
+  const addHandler = () => {
+    fetch("http://localhost:3000/examples", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        text: exampleTextInput.current.value,
+      }),
+    })
+      .then((res) => res.json())
+      .then((serverItem) => {
+        const { id, text } = exampleServerToClientModel(serverItem);
+        addExampleItem(id, text);
+      });
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto px-4 mb-8">
+      <div className="flex flex-col sm:flex-row gap-4">
+        <input
+          type="text"
+          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          ref={exampleTextInput}
+          placeholder="Enter text..."
+        />
+        <button
+          onClick={addHandler}
+          className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-6 rounded-lg transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+        >
+          Add
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ExampleComponent;