File Restructure

api/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "shiftsync-website-api",
+  "version": "1.0.1",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server",
+    "dev": "nodemon server",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^5.1.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.10"
+  }
+}

api/server.js

@@ -0,0 +1,18 @@
+const express = require("express");
+const cors = require("cors");
+
+const app = express();
+
+const corsOptions = {
+  origin: ["http://localhost:5173"]
+};
+
+app.use(cors(corsOptions));
+
+app.get("/api", (req, res) => {
+  res.json({ fruits: ["apple", "orange", "banana"] });
+});
+
+app.listen(5172, () => {
+  console.log('Server Started on port 5172');
+});

package.json

@@ -1,34 +1,24 @@
 {
-  "name": "my-app",
+  "name": "shiftsync-website",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.1",
-  "type": "module",
+  "main": "index.js",
   "scripts": {
-    "dev": "vite",
+    "api": "nodemon --quiet api",
-    "build": "vite build",
+    "web": "npm run dev --prefix web",
-    "lint": "eslint .",
+    "dev": "concurrently \"npm run api\" \"npm run web\"",
-    "preview": "vite preview"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
   "dependencies": {
-    "@emotion/react": "^11.14.0",
+    "cors": "^2.8.5",
-    "@emotion/styled": "^11.14.0",
+    "express": "^5.1.0"
-    "@mui/icons-material": "^7.1.0",
-    "@mui/material": "^7.1.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.0",
-    "zustand": "^5.0.5"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.13.5",
+    "concurrently": "^9.1.2",
-    "@eslint/js": "^9.25.0",
+    "nodemon": "^3.1.10"
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.25.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.0.0",
-    "vite": "^6.3.5"
   }
 }

web/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "shiftsync-website-web",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.1.0",
+    "axios": "^1.9.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0",
+    "zustand": "^5.0.5"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.13.5",
+    "@eslint/js": "^9.25.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "vite": "^6.3.5"
+  }
+}

web/src/pages/Home/Home.jsx

@@ -1,8 +1,13 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import { useLocalStore } from '@components';
 
 export const Home = () => {
 
+  const { user } = useLocalStore();
+
+  console.log('user: ', user);
+
   useEffect(() => {
     document.title = 'ShiftSync | Home';
   }, []);

web/src/router/AppRouter.jsx

@@ -3,6 +3,7 @@ import { Routes, Route } from 'react-router-dom';
 import { Home, Profile, Schedule, Settings } from '@src/pages';
 import { Shell } from '@components';
 import { useLocalStore } from '@components';
+import axios from "axios";
 
 const dept = {
   id: 1,
@@ -59,7 +60,13 @@ const AppRouter = () => {
   const { user, setUser, setDepartment } = useLocalStore();
   const [userChanged, setUserChanged] = useState(false);
 
+  const fetchAPI = async () => {
+    const response = await axios.get("http://localhost:5172/api");
+    console.log(response.data.fruits);
+  }
+
   useEffect(() => {
+    fetchAPI();
     // await call for getting the count of employees and any other calls to db.
     const employee_count = 1;
     const subs_expiration = '10/22/2025';

web/vite.config.js

@@ -8,8 +8,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@src': path.resolve(__dirname, 'src'),
-      '@components': path.resolve(__dirname, 'components'),
+      '@components': path.resolve(__dirname, 'components')
-      '@api': path.resolve(__dirname, 'api'),
     },
   },
 });