Update the form creation UI

README.md

@@ -1,21 +1,59 @@
-# DataLoom
-Project is to design and implement a web-based GUI for data wrangling, aimed at simplifying the process of managing and transforming tabular datasets. This application will serve as a graphical interface for the powerful Python library, allowing users to perform complex data manipulation tasks without the need for in-depth programming knowledge. 
+DataLoom
 
-### Apps and Packages
+Project is to design and implement a web-based GUI for data wrangling, aimed at simplifying the process of managing and transforming tabular datasets. This application will serve as a graphical interface for the powerful Python library, allowing users to perform complex data manipulation tasks without the need for in-depth programming knowledge.
 
-- `frontend`: a React.js app
-- `backend`:  Python(FastAPI) app
+Apps and Packages
 
-### Run Application
-**Set Up Environment Variables** :
-Create a `.env` file in the `apps/backend` directory and add details as per `.env.sample` file.
+frontend: a React.js app
 
-**Installing FastApi Backend** : In the `apps/backend` directory, run `python3 -m venv env`, then run `. env/scripts/activate` (On Windows), then ensure all required dependencies are installed by running `pip install -r requirements.txt`.
+backend:  Python (FastAPI) app
+
+Run Application
+
+Set Up Environment Variables
+
+Create a .env file in the apps/backend directory and add details as per .env.sample file.
+
+Installing FastAPI Backend
+
+Navigate to the apps/backend directory:
+
+cd apps/backend
+
+Create and activate a virtual environment:
+
+On Windows:
+
+python3 -m venv env
+. env/Scripts/activate
+
+On macOS/Linux:
+
+python3 -m venv env
+source env/bin/activate
+
+Install the required dependencies:
+
+pip install -r requirements.txt
+
+Installing Turbo and Dependencies
+
+Install Turbo globally if not already installed:
+
+npm install -g turbo
+
+Navigate to the project root and install dependencies:
 
-**To run the project**, run the following command:
-```
 cd DataLoom
+npm install --legacy-peer-deps
+
+Running the Application
+
+To start the project, run the following command from the root directory:
+
 npm run dev
-```
 
-The backend server will start and be accessible at `http://127.0.0.1:8000`.
+The backend server will start and be accessible at http://127.0.0.1:8000.
+
+The frontend will run in development mode, utilizing Turbo for monorepo management, and will be accessible at http://localhost:5173/.
+

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,25 +10,33 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hookform/resolvers": "^4.0.0",
     "@repo/ui": "*",
+    "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.54.2",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.24.0"
+    "react-router-dom": "^6.24.0",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.4",
+    "postcss": "^8.5.2",
+    "tailwindcss": "^3.4.17",
     "vite": "^5.2.0"
   }
-}
+}

frontend/src/App.jsx

@@ -4,11 +4,16 @@ import {BrowserRouter as Router, Route, Routes, useLocation} from 'react-router-
 import DataScreen from './Components/DataScreen';
 import HomeScreen from './Components/Homescreen';
 import Navbar from './Components/Navbar';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 function App() {
   return (
     <Router>
+       <QueryClientProvider client={queryClient}>
       <AppContent />
+      </QueryClientProvider>
     </Router>
   );
 }