From b6aad5a3fce46cce06587e2b893057479ba96d7a Mon Sep 17 00:00:00 2001
From: favor-star <favoureliab@gmail.com>
Date: Tue, 4 Jun 2024 17:48:48 +0200
Subject: [PATCH] [Finshes #187354196] Sign up page

---
 package.json                                  |   8 +-
 src/App.tsx                                   |  38 +++--
 src/assets/googleIcon.svg                     |   6 +
 src/components/Button.tsx                     |  22 +++
 src/components/Input.tsx                      |  34 ++++
 src/components/Select.tsx                     |  24 +++
 src/components/navbar/Navbar.tsx              |   2 +-
 src/components/register/RegisterSection.tsx   | 161 ++++++++++++++++++
 src/components/register/Success.tsx           |  17 ++
 src/pages/Register.tsx                        |  18 ++
 src/services/authAPI.ts                       |  22 +++
 src/services/index.ts                         |  10 ++
 src/state/register/registerSlice.ts           |  23 +++
 src/state/store.ts                            |   9 +
 src/utils/index.ts                            |   6 +
 src/utils/schemas.ts                          |  38 +++++
 tailwind.config.js                            |  15 +-
 tsconfig.json                                 |   1 -
 ....timestamp-1717503390378-4d6707c4e34b1.mjs |  27 +++
 19 files changed, 457 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/googleIcon.svg
 create mode 100644 src/components/Button.tsx
 create mode 100644 src/components/Input.tsx
 create mode 100644 src/components/Select.tsx
 create mode 100644 src/components/register/RegisterSection.tsx
 create mode 100644 src/components/register/Success.tsx
 create mode 100644 src/pages/Register.tsx
 create mode 100644 src/services/authAPI.ts
 create mode 100644 src/services/index.ts
 create mode 100644 src/state/register/registerSlice.ts
 create mode 100644 src/utils/index.ts
 create mode 100644 src/utils/schemas.ts
 create mode 100644 vite.config.ts.timestamp-1717503390378-4d6707c4e34b1.mjs

diff --git a/package.json b/package.json
index 3be7aea..110a940 100644
--- a/package.json
+++ b/package.json
@@ -15,14 +15,19 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.6.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@types/react-redux": "^7.1.33",
+    "clsx": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.5",
     "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
-    "sass": "^1.77.2"
+    "sass": "^1.77.2",
+    "tailwind-merge": "^2.3.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
@@ -56,7 +61,6 @@
     "prettier": "3.2.5",
     "storybook": "^8.1.3",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.2.2",
     "typescript-eslint": "^7.10.0",
     "vite": "^5.2.0",
     "vitest": "^1.6.0"
diff --git a/src/App.tsx b/src/App.tsx
index 85b8fde..5787502 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,38 @@
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import Login from "./pages/Login";
-import LandingPage from "./pages/LandingPage";
+import Register from './pages/Register';
+import Success from './components/register/Success';
+import RegisterSection from './components/register/RegisterSection';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import Login from './pages/Login';
+import LandingPage from './pages/LandingPage';
 
 const App = () => {
   const router = createBrowserRouter([
     {
-      path: "/",
+      path: '/',
       children: [
         {
           index: true,
-          element: <LandingPage />
+          element: <LandingPage />,
         },
         {
-          path: "login",
-          element: <Login />
-        }
-      ]
+          path: 'login',
+          element: <Login />,
+        },
+      ],
+    },
+    {
+      path: 'register',
+      element: <Register />,
+      children: [
+        {
+          path: '/register',
+          element: <RegisterSection />,
+        },
+        { path: 'success', element: <Success /> },
+      ],
     },
-  ])
-  return (
-    <RouterProvider router={router} />
-  );
+  ]);
+  return <RouterProvider router={router} />;
 };
 
 export default App;
diff --git a/src/assets/googleIcon.svg b/src/assets/googleIcon.svg
new file mode 100644
index 0000000..17322ec
--- /dev/null
+++ b/src/assets/googleIcon.svg
@@ -0,0 +1,6 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6284 6.77594H13.125V6.75H7.5V9.25H11.0322C10.5169 10.7053 9.13219 11.75 7.5 11.75C5.42906 11.75 3.75 10.0709 3.75 8C3.75 5.92906 5.42906 4.25 7.5 4.25C8.45594 4.25 9.32562 4.61062 9.98781 5.19969L11.7556 3.43187C10.6394 2.39156 9.14625 1.75 7.5 1.75C4.04844 1.75 1.25 4.54844 1.25 8C1.25 11.4516 4.04844 14.25 7.5 14.25C10.9516 14.25 13.75 11.4516 13.75 8C13.75 7.58094 13.7069 7.17187 13.6284 6.77594Z" fill="#FFC107"/>
+<path d="M1.9707 5.09094L4.02414 6.59688C4.57977 5.22125 5.92539 4.25 7.50008 4.25C8.45602 4.25 9.3257 4.61062 9.98789 5.19969L11.7557 3.43187C10.6395 2.39156 9.14633 1.75 7.50008 1.75C5.09945 1.75 3.01758 3.10531 1.9707 5.09094Z" fill="#FF3D00"/>
+<path d="M7.5001 14.25C9.11447 14.25 10.5813 13.6322 11.6904 12.6275L9.75604 10.9906C9.10746 11.4838 8.31493 11.7506 7.5001 11.75C5.87447 11.75 4.49416 10.7134 3.97416 9.26685L1.93604 10.8372C2.97041 12.8612 5.07104 14.25 7.5001 14.25Z" fill="#4CAF50"/>
+<path d="M13.6284 6.77594H13.125V6.75H7.5V9.25H11.0322C10.7857 9.94263 10.3417 10.5479 9.755 10.9909L9.75594 10.9903L11.6903 12.6272C11.5534 12.7516 13.75 11.125 13.75 8C13.75 7.58094 13.7069 7.17188 13.6284 6.77594Z" fill="#1976D2"/>
+</svg>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..9db07d4
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,22 @@
+import { cn } from "../utils";
+
+interface ButtonProps {
+  text: string;
+  buttonId?: string;
+  type?: 'submit' | 'reset' | 'button';
+  className?: string;
+  onClick?: () => void;
+}
+const Button = ({ text, type, className, onClick }: ButtonProps) => {
+  return (
+    <button
+      type={type}
+      className={cn('p-2 rounded-lg bg-greenColor hover:bg-darkGreen transition-all text-whiteColor font-bold', className)}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..fec8e95
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import { cn } from '../utils';
+
+interface InputProps {
+  type: string;
+  label: string;
+  id: string;
+  placeholder: string;
+  error?: string;
+  labelClassName?: string;
+  inputClasname?: string;
+}
+
+// Use React.forwardRef to forward the ref to the input element
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ type, labelClassName, inputClasname, label, id, placeholder, error = '', ...rest }, ref) => {
+    return (
+      <label className={cn('flex flex-col gap-1 font-lg font-medium flex-1 w', labelClassName)}>
+        {label}
+        <input
+          type={type}
+          id={id}
+          placeholder={placeholder}
+          className={cn('p-1 px-3 rounded-lg border border-blackColor outline-none font-normal', inputClasname)}
+          ref={ref}
+          {...rest}
+        />
+        {error && <p className='text-redColor text-xs'>{error}</p>}
+      </label>
+    );
+  }
+);
+
+export default Input;
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 0000000..42170a8
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+
+interface SelectProps {
+  placeholder: string;
+  error?: string;
+  options: string[];
+}
+const Select = forwardRef<HTMLSelectElement, SelectProps>(({ placeholder, options,error,...rest }, ref) => {
+  return (
+    <>
+      <select ref={ref} name='role' id='role' className='p-2 outline-0 border border-blackColor flex-1 rounded-lg' {...rest}>
+        <option value=''>{placeholder}</option>
+        {options.map((option, index) => (
+          <option key={index} value={option}>
+            {option[0].toUpperCase() + option.slice(1)}
+          </option>
+        ))}
+      </select>
+      <p className='text-redColor text-xs -mt-3'>{error}</p>
+    </>
+  );
+});
+
+export default Select;
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 4516326..b703b4d 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -37,7 +37,7 @@ function Navbar() {
     }, []);
 
     return (
-        <div className='flex flex-col bg-blackColor md:bg-whiteColor md:text-blackColor text-whiteColor font-roboto w-full 2xl:items-center fixed'>
+        <div className='flex flex-col bg-blackColor md:bg-whiteColor md:text-blackColor text-whiteColor font-roboto w-full 2xl:items-center sticky top-0'>
             <div className="flex justify-between gap-2 flex-wrap p-3 md:p-4 xl:px-10 2xl:w-[1440px] relative">
                 <div className="flex items-center gap-3 order-1">
                     <div id="humbergurBtn" className="rounded-full p-1 text-txtColor active:bg-greenColor hover:bg-grayColor transition-all active:text-blackColor hover:text-blackColor md:hidden">
diff --git a/src/components/register/RegisterSection.tsx b/src/components/register/RegisterSection.tsx
new file mode 100644
index 0000000..6736205
--- /dev/null
+++ b/src/components/register/RegisterSection.tsx
@@ -0,0 +1,161 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import GoogleIcon from '../../assets/googleIcon.svg';
+import Button from '../Button';
+import Input from '../Input';
+import Select from '../Select';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { extendedSchema, ExtendedFormFields } from '../../utils/schemas';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { useRegisterUserMutation } from '../../services/authAPI';
+import { setUserRegistered } from '../../state/register/registerSlice';
+import { useEffect } from 'react';
+import { QueryErrorData } from '../../utils/schemas';
+
+const RegisterSection = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const {
+    register,
+    setError,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<ExtendedFormFields>({
+    resolver: zodResolver(extendedSchema),
+  });
+  const [registerUser, { data, isLoading, isSuccess, isError, error }] = useRegisterUserMutation();
+  let loginData: any;
+
+  const onSubmit: SubmitHandler<ExtendedFormFields> = async retrievedData => {
+    const { password, lastName, firstName, gender, phoneNumber, email } = retrievedData;
+
+    loginData = { password, lastName, firstName, gender, phoneNumber, email };
+    await registerUser({ email, password, lastName, firstName, gender, phoneNumber });
+  };
+  useEffect(() => {
+    const loginError = error as QueryErrorData;
+
+    if (isError) {
+      console.log(loginError);
+      setError('root', {
+        message: loginError.data?.error || loginError.data?.message,
+      });
+      if (/email is already used/gi.test(loginError.data?.error || (loginError.data?.message as string))) {
+        setTimeout(() => {
+          setError('root', {
+            message: 'Redirecting you to login page....',
+          });
+          setTimeout(() => {
+            navigate('/login');
+          }, 3000);
+        }, 2000);
+      }
+      return;
+    }
+    if (isSuccess) {
+      dispatch(setUserRegistered({ ...loginData }));
+      navigate('/register/success');
+    }
+  }, [isLoading, isError, error, isSuccess, data]);
+
+  return (
+    <>
+      <div
+        className={`w-full xl:container flex flex-col-reverse gap-14 md:flex-row px-4 items-center md:gap-5 transition-all 
+        md:justify-between md:px-10 lg:justify-around mt-5 md:mt-10 `}
+      >
+        <div className='w-full md:w-7/12 xl:w-4/12 '>
+          <p className='font-bold text-3xl '>New Customer?</p>
+          <p>Sign Up to continue</p>
+          <form action='' className='flex flex-col gap-4 justify-center mt-8 ' onSubmit={handleSubmit(onSubmit)}>
+            <div className='grid grid-rows-2 md:grid-rows-1 md:grid-cols-2  gap-3'>
+              <Input
+                id='firstName'
+                label='First Name'
+                type='text'
+                placeholder='Enter your fisrt name'
+                {...register('firstName')}
+                error={errors.firstName && errors.firstName?.message}
+              />
+              <Input
+                id='lastName'
+                label='Last Name'
+                type='text'
+                placeholder='Enter your last name'
+                {...register('lastName')}
+                error={errors.lastName && errors.lastName?.message}
+              />
+            </div>
+            <Input
+              id='registerEmail'
+              label='Email'
+              type='email'
+              placeholder='Enter your email'
+              {...register('email')}
+              error={errors.email && errors.email?.message}
+            />
+            <Input
+              type='tel'
+              label='Phone Number'
+              id='phoneNumber'
+              placeholder='Enter your Phone Number'
+              {...register('phoneNumber')}
+              error={errors.phoneNumber && errors.phoneNumber.message}
+            />
+            <Input
+              id='password'
+              label='Enter your Password'
+              type='password'
+              placeholder='Enter your Password'
+              {...register('password')}
+              error={errors.password && errors.password?.message}
+            />
+
+            <Input
+              id='confirm__password'
+              label='Confirm your Password'
+              type='password'
+              placeholder='Confirm your password'
+              {...register('confirmPassword')}
+              error={errors.confirmPassword && errors.confirmPassword?.message}
+            />
+            <Select
+              placeholder='Gender'
+              options={['male', 'female']}
+              {...register('gender')}
+              error={errors.gender && errors.gender.message}
+            />
+            <button
+              type='submit'
+              className='p-2 rounded-lg bg-greenColor hover:bg-darkGreen transition-all text-whiteColor font-bold'
+            >
+              {isSubmitting ? 'Loading..' : 'Sign Up'}
+            </button>
+            <p
+              className={`text-sm bg-redColor text-whiteColor -mt-2 p-1 rounded-lg px-3 ${!errors.root ? 'hidden' : 'block'}`}
+            >
+              {errors.root?.message}
+            </p>
+            <span className='self-center font-bold text-grayColor'>or</span>
+            <button
+              className='p-2 font-bold text-greenColor border-2 border-greenColor rounded-lg flex flex-row 
+            items-center justify-center gap-2 hover:bg-teal-100 transition-all'
+            >
+              <img src={GoogleIcon} alt='Google Icon' className='w-5' />
+              Continue with Google
+            </button>
+          </form>
+        </div>
+        <div className='w-full md:w-3/12 mt-0  p-5 border-b-2 md:p-0 md:border-b-0 h-fit flex flex-col gap-3 justify-self-start self-start '>
+          <p className='font-bold text-3xl'>Existing Customer?</p>
+          <p>Go to Login Page to sign in</p>
+          <Button type='submit' text='Sign In' onClick={() => navigate('/login')} />
+        </div>
+      </div>
+      <Button className={`my-10 mx-auto block`} text='Back to Home Page' onClick={() => navigate('/')} />
+    </>
+  );
+};
+
+export default RegisterSection;
diff --git a/src/components/register/Success.tsx b/src/components/register/Success.tsx
new file mode 100644
index 0000000..001060b
--- /dev/null
+++ b/src/components/register/Success.tsx
@@ -0,0 +1,17 @@
+import { useNavigate } from 'react-router-dom';
+import Button from '../Button';
+
+const Success = () => {
+  const navigate = useNavigate();
+  return (
+    <div className='w-full h-screen flex flex-col items-center justify-center gap-10'>
+      <p className=' text-5xl text-blackColor font-bold'>Success!</p>
+      <p className='text-xl text-blackColor '>
+        Account was created successfully. Please check your email to activate the account
+      </p>
+      <Button text='Go to Home' className='-mt-5' onClick={() => navigate('/')} />
+    </div>
+  );
+};
+
+export default Success;
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
new file mode 100644
index 0000000..e5c9b43
--- /dev/null
+++ b/src/pages/Register.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from '../components/navbar/Navbar';
+import Footer from '../components/footer/Footer';
+const Register = () => {
+  return (
+    <div className='mx-auto  flex flex-col items-center  justify-center'>
+      <div className='min-h-screen h-fit w-full'>
+        <Navbar />
+        <div>
+          <Outlet />
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default Register;
diff --git a/src/services/authAPI.ts b/src/services/authAPI.ts
new file mode 100644
index 0000000..b7e4aea
--- /dev/null
+++ b/src/services/authAPI.ts
@@ -0,0 +1,22 @@
+import { mavericksApi } from '.';
+
+const authAPI = mavericksApi.injectEndpoints({
+  endpoints: builder => ({
+    registerUser: builder.mutation({
+      query: userData => ({
+        url: `users/signup`,
+        method: 'POST',
+        body: userData,
+      }),
+    }),
+    loginUser: builder.mutation({
+      query: userData => ({
+        url: `auth/login`,
+        method: 'POST',
+        body: userData,
+      }),
+    }),
+  }),
+});
+
+export const { useRegisterUserMutation, useLoginUserMutation } = authAPI;
diff --git a/src/services/index.ts b/src/services/index.ts
new file mode 100644
index 0000000..8bb8414
--- /dev/null
+++ b/src/services/index.ts
@@ -0,0 +1,10 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const mavericksApi = createApi({
+  reducerPath: 'mavericksApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: 'https://e-commerce-mavericcks-bn-staging-istf.onrender.com/api/',
+  }),
+  endpoints: () => ({}),
+});
+
diff --git a/src/state/register/registerSlice.ts b/src/state/register/registerSlice.ts
new file mode 100644
index 0000000..6a01558
--- /dev/null
+++ b/src/state/register/registerSlice.ts
@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const authSlice = createSlice({
+  name: 'authentication',
+  initialState: {
+    userInfo: null,
+    isRegistered: false,
+    isVerified: false,
+  },
+  reducers: {
+    setUserRegistered: (state, action) => {
+      state.isRegistered = true;
+      state.userInfo = action.payload;
+    },
+    setUserVerified: state => {
+      state.isVerified = true;
+      state.isRegistered = true;
+    },
+  },
+});
+
+export const { setUserRegistered, setUserVerified } = authSlice.actions;
+export default authSlice.reducer;
diff --git a/src/state/store.ts b/src/state/store.ts
index 4ea1bc7..fbc89f9 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -1,11 +1,20 @@
 import { configureStore } from '@reduxjs/toolkit';
+import { mavericksApi } from '../services';
 import counterReducer from './counter/counterSlice';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import registerReducer from './register/registerSlice';
 
 export const store = configureStore({
   reducer: {
     counter: counterReducer,
+    register: registerReducer,
+    [mavericksApi.reducerPath]: mavericksApi.reducer,
   },
+  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(mavericksApi.middleware),
 });
 
+// Setup listeners for RTK Query features
+setupListeners(store.dispatch);
+
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..2ea053d
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,6 @@
+import { clsx, ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...args: ClassValue[]) => {
+  return twMerge(clsx(args));
+};
diff --git a/src/utils/schemas.ts b/src/utils/schemas.ts
new file mode 100644
index 0000000..ae9766e
--- /dev/null
+++ b/src/utils/schemas.ts
@@ -0,0 +1,38 @@
+import { z } from 'zod';
+
+const schema = z
+  .object({
+    firstName: z.string().min(2).trim(),
+    lastName: z.string().min(2).trim(),
+    email: z.string().email().toLowerCase().trim(),
+    phoneNumber: z.string().regex(/^0\d{9}/, { message: 'It must start with 0, and be 10 characters' }),
+    password: z.string().regex(/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/, {
+      message: 'Password must contain at least one letter, one number and one special charcter',
+    }),
+    gender: z.enum(['male', 'female'], { message: 'Gender was not selected' }),
+  })
+  .required();
+export const extendedSchema = schema
+  .extend({
+    confirmPassword: z.string(),
+  })
+  .refine(data => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  });
+
+export type Formfields = z.infer<typeof extendedSchema>;
+
+export interface ExtendedFormFields extends Formfields {
+  confirmPassword: string;
+}
+
+interface ErrorData {
+  ok: boolean;
+  error: string;
+  message?: string;
+}
+export interface QueryErrorData {
+  status: number | undefined;
+  data: ErrorData;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 14a955a..ccdf498 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,25 +1,26 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     fontFamily: {
-      'roboto': ["Roboto", "Arial", "sans serif"]
+      roboto: ['Roboto', 'Arial', 'sans serif'],
     },
     colors: {
       greenColor: '#007A7A',
+      darkGreen: '#006262',
       whiteColor: '#ffffff',
       blackColor: '#000000',
       grayColor: '#DADADA',
-      redColor: "#ce0202",
-      overlay: "#000000c9"
+      redColor: '#ce0202',
+      overlay: '#000000c9',
     },
     extend: {
       gridRow: {
-        'custom': "grid-start-0"
+        custom: 'grid-start-0',
       },
       gridTemplateColumns: {
-        'customCol': "repeat(auto-fit, minmax(200px, 1fr))"
-      }
+        customCol: 'repeat(auto-fit, minmax(200px, 1fr))',
+      },
     },
   },
   plugins: [],
diff --git a/tsconfig.json b/tsconfig.json
index a7fc6fb..a6e5d77 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,6 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
diff --git a/vite.config.ts.timestamp-1717503390378-4d6707c4e34b1.mjs b/vite.config.ts.timestamp-1717503390378-4d6707c4e34b1.mjs
new file mode 100644
index 0000000..fe59da6
--- /dev/null
+++ b/vite.config.ts.timestamp-1717503390378-4d6707c4e34b1.mjs
@@ -0,0 +1,27 @@
+// vite.config.ts
+import { defineConfig } from "file:///C:/Users/Favour/repos/e-commerce-mavericks-fn/node_modules/vite/dist/node/index.js";
+import react from "file:///C:/Users/Favour/repos/e-commerce-mavericks-fn/node_modules/@vitejs/plugin-react-swc/index.mjs";
+import tailwindcss from "file:///C:/Users/Favour/repos/e-commerce-mavericks-fn/node_modules/tailwindcss/lib/index.js";
+import autoprefixer from "file:///C:/Users/Favour/repos/e-commerce-mavericks-fn/node_modules/autoprefixer/lib/autoprefixer.js";
+import path from "path";
+var __vite_injected_original_dirname = "C:\\Users\\Favour\\repos\\e-commerce-mavericks-fn";
+var vite_config_default = defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5001
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__vite_injected_original_dirname, "src")
+    }
+  },
+  css: {
+    postcss: {
+      plugins: [tailwindcss, autoprefixer]
+    }
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxGYXZvdXJcXFxccmVwb3NcXFxcZS1jb21tZXJjZS1tYXZlcmlja3MtZm5cIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXEZhdm91clxcXFxyZXBvc1xcXFxlLWNvbW1lcmNlLW1hdmVyaWNrcy1mblxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvRmF2b3VyL3JlcG9zL2UtY29tbWVyY2UtbWF2ZXJpY2tzLWZuL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSc7XHJcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdC1zd2MnO1xyXG5pbXBvcnQgdGFpbHdpbmRjc3MgZnJvbSAndGFpbHdpbmRjc3MnO1xyXG5pbXBvcnQgYXV0b3ByZWZpeGVyIGZyb20gJ2F1dG9wcmVmaXhlcic7XHJcbmltcG9ydCBwYXRoIGZyb20gJ3BhdGgnO1xyXG5cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcbiAgc2VydmVyOiB7XHJcbiAgICBwb3J0OiA1MDAxLFxyXG4gIH0sXHJcbiAgcmVzb2x2ZToge1xyXG4gICAgYWxpYXM6IHtcclxuICAgICAgJ0AnOiBwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnc3JjJyksXHJcbiAgICB9LFxyXG4gIH0sXHJcbiAgY3NzOiB7XHJcbiAgICBwb3N0Y3NzOiB7XHJcbiAgICAgIHBsdWdpbnM6IFt0YWlsd2luZGNzcywgYXV0b3ByZWZpeGVyXSxcclxuICAgIH0sXHJcbiAgfSxcclxufSk7XHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBbVUsU0FBUyxvQkFBb0I7QUFDaFcsT0FBTyxXQUFXO0FBQ2xCLE9BQU8saUJBQWlCO0FBQ3hCLE9BQU8sa0JBQWtCO0FBQ3pCLE9BQU8sVUFBVTtBQUpqQixJQUFNLG1DQUFtQztBQU16QyxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQUEsRUFDakIsUUFBUTtBQUFBLElBQ04sTUFBTTtBQUFBLEVBQ1I7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssS0FBSyxRQUFRLGtDQUFXLEtBQUs7QUFBQSxJQUNwQztBQUFBLEVBQ0Y7QUFBQSxFQUNBLEtBQUs7QUFBQSxJQUNILFNBQVM7QUFBQSxNQUNQLFNBQVMsQ0FBQyxhQUFhLFlBQVk7QUFBQSxJQUNyQztBQUFBLEVBQ0Y7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=