Refactor/code structure

.gitignore

@@ -130,4 +130,6 @@ dist
 .pnp.*
 
 
-LeftOvers/
+LeftOvers/
+
+/package-lock.json

README.md

@@ -1,50 +1,97 @@
-# React + TypeScript + Vite
+# Web
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This document defines the conventions, file structure, and best practices to be followed
 
-Currently, two official plugins are available:
+---
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## 📁 Project Structure
 
-## Expanding the ESLint configuration
+```
+as./src/
+├── api
+│ ├── api.ts # API 
+├── components
+│ └──  # Reusable UI components 
+├── helper
+│ └──  # General-purpose helper functions
+├── hooks
+│ └──  # Custom React hooks
+├── lib
+│ └──  # Third-party libraries or wrappers
+├── main.tsx # App entry point
+├── pages
+│ ├── App.module.css # Styles for the main App
+│ └── App.tsx # Root component
+├── services
+│ └──  #  service layer
+├── styles
+│ └──  # Global and shared styles
+├── utils
+│ └──  # Utility functions
+└── vite-env.d.ts # TypeScript definitions for Vite
+```
+
+
+---
+
+
+## 🧠 Naming Conventions
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+### 🔧 Functions
 
-- Configure the top-level `parserOptions` property like this:
+- Use **CamelCase** (PascalCase) for function names.
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+eg-
+```ts
+function FetchUserProfile() { ... }
+function HandleLoginResponse() { ... }
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+Here is the updated `README.md` for your `exp-file` project, now including the full folder structure under `./src/`:
+
+### 🧮 Variables
+
+* Use **smallCamel** (camelCase) for variable names.
+
+```ts
+let userToken: string;
+const isProfileComplete = true;
 ```
+
+---
+
+## 🎨 CSS / SCSS / Modules
+
+* Use **kebab-case** for file and class names.
+* Prefer **CSS Modules** for component styles.
+
+```css
+/* App.module.css */
+.header-container { ... }
+.login-form__input--focused { ... }
+```
+
+---
+
+## 📁 Folder & File Naming
+
+* Use **kebab-case** for folder and file names.
+* Group logically related files in folders.
+
+```bash
+components/
+  └── user-card/
+      ├── user-card.tsx
+      └── user-card.module.css
+```
+
+---
+
+## ⚙️ Code Best Practices
+
+* **DRY**: Don’t Repeat Yourself.
+* Modularize: Component, Logic, API, Utility separation.
+* Use TypeScript for all files (`.tsx` / `.ts`).
+* Write meaningful commit messages.
+
+---