created basic file strucuture

frontend/web-app/package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^18.3.5",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
+    "axios": "^1.7.9",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^7.1.5",

frontend/web-app/src/Constants/global.ts

@@ -0,0 +1 @@
+export const Dummy = 5000 //Dummy constant

frontend/web-app/src/Context/AuthContext.tsx

@@ -0,0 +1,37 @@
+import { createContext, useReducer } from "react";
+import { AuthContextAction, AuthContextState } from "../Interfaces/AuthInterfaces";
+
+// Dummy AuthContext
+
+const AuthContext = createContext({});
+
+const initialState : AuthContextState={
+    authUser: '',
+    authToken: '',
+    isLoading: false,
+}
+
+const reducer = (state: AuthContextState, action: AuthContextAction): AuthContextState =>{
+    switch(action.type){
+        case 'LOGIN': {
+            return {...state, authUser: action.data.authUser , authToken: action.data.authToken}
+        }
+        default: {
+            return state;
+        }
+    }
+}
+
+export const AuthProvider = ({children}: {children: any}) => {
+    const [{authUser, authToken, isLoading}, dispatch] = useReducer(reducer, initialState);
+    const values = {
+        authUser,
+        authToken,
+        isLoading,
+        dispatch,
+    }
+    return <AuthContext.Provider value={values}>{children}</AuthContext.Provider>
+
+}
+
+export default AuthContext;

frontend/web-app/src/Controller/AuthController.ts

@@ -0,0 +1,19 @@
+import authService from "../Services/AuthServices";
+import axiosInstance from "../Utils/axiosInstance";
+
+// Dummy AuthController
+class AuthController{
+    public getUsers= async (): Promise<any> =>{
+        try{
+            const response = await axiosInstance.get('/users');
+            const usersData = authService.getUsers(response.data);
+            return usersData;
+        }catch(error){
+            throw new Error('Error getUsers');
+        }
+    }
+}
+
+const authController = new AuthController();
+
+export default authController;

frontend/web-app/src/Interfaces/AuthInterfaces.ts

@@ -0,0 +1,15 @@
+// Dummy AuthInterfaces
+
+export interface AuthContextState{
+    authUser: string,
+    authToken: string,
+    isLoading: boolean,
+}
+
+export interface AuthContextAction{
+    type: string,
+    data: {
+        authUser: string,
+        authToken: string,
+    }
+}

frontend/web-app/src/Pages/HomePage.tsx

@@ -1,6 +1,21 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import authController from '../Controller/AuthController'
 
 function HomePage() {
+// example of using APIs
+// you need not necessarily call APIs in useEffect
+// you may also call them through other ways 
+// but make sure to keep them in async functions 
+// and use await while calling them to resolve Promise.
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      const data = await authController.getUsers();
+      console.log(data);
+    }
+    fetchUserData();
+  }, [])
+
   return (
     <div>HomePage</div>
   )

frontend/web-app/src/Services/AuthServices.ts

@@ -0,0 +1,18 @@
+// This is an example of how to create service 
+// please remember that I have used any as an interface for some variable 
+// but that is not good please make specific interface for specific variable used in controller and service.
+
+
+class AuthService{
+    public getUsers=(data:any)=>{
+        return data.map((userData: any)=>{
+            return {
+                name: userData.username
+            }
+        })
+    }
+}
+
+const authService = new AuthService();
+
+export default authService;

frontend/web-app/src/Styles/global.css

@@ -0,0 +1 @@
+/* Global CSS */

frontend/web-app/src/Utils/axiosInstance.ts

@@ -0,0 +1,13 @@
+import axios from "axios";
+
+// Dummy URL is used here we need to change it later.
+
+const axiosInstance = axios.create({
+    baseURL: 'https://jsonplaceholder.typicode.com',
+    timeout: 5000,
+    headers: {
+        "Content-Type": 'application/json',
+    }
+})
+
+export default axiosInstance;

frontend/web-app/src/Utils/global.ts

@@ -0,0 +1,5 @@
+// Dummy Utils function
+export const isNull=(item: any)=>{
+    if(item) return true;
+    else return false;
+}