feat: merge frontend containerization code

frontend/Dockerfile

@@ -0,0 +1,23 @@
+# Step 1: Build the React app
+FROM node:16 AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY web-app/package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the frontend code
+COPY web-app/ .
+
+# Build the React app (for production build)
+RUN npm run build
+
+# Expose port 3000
+EXPOSE 3000
+
+# Step 2: Serve the React app using npm start (for development)
+CMD ["npm", "start"]

frontend/web-app/src/Components/NavBar.tsx

@@ -1,10 +1,4 @@
 import React from 'react'
-<<<<<<< HEAD
-
-function NavBar() {
-  return (
-    <div>NavBar</div>
-=======
 import { Link, Outlet } from 'react-router-dom';
 
 function NavBar() {
@@ -17,7 +11,6 @@ function NavBar() {
       </div>
       <Outlet />
     </div>
->>>>>>> fe68087a11103b291e8a14f454bdff774de1db60
   )
 };
 

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/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;
+}