Merge pull request #1206 from Code-A2Z/avdhesh/jsx-to-tsx

Upgrading JSX to TSX

Author: Avdhesh-Varshney

.gitignore

@@ -97,7 +97,6 @@ bower_components
 # misc
 .sass-cache
 connect.lock
-typings
 
 # Optional npm cache directory
 .npm

README.md

@@ -49,8 +49,7 @@ It’s perfect for developers and writers who want to **showcase their work, col
 
 Join us, contribute, and grow together! 🌍✨
 
-<details>
-<summary><h4>:zap: Key Features 🏢</h4></summary>
+### :zap: Key Features 🏢 
 
 | **Feature**                     | **Description**  |
 |----------------------------------|----------------|
@@ -64,10 +63,7 @@ Join us, contribute, and grow together! 🌍✨
 | **SEO Optimization**             | Code A2Z - Project Blog ensures your content is easily found on search engines like Google. This helps in reaching more people and increasing engagement. |
 | **Role-Based Dashboard**         | Different users have different levels of access. Admins can manage everything, collaborators can work on assigned projects, contributors can submit their work, and regular users can read and interact with blogs. |
 
-</details>
-
-<details>
-<summary><h4>:zap: What Can You Contribute? 👩‍💻</h4></summary>
+### :zap: What Can You Contribute? 👩‍💻 
 
 > Choose a contribution area that suits your skills 
 
@@ -81,10 +77,7 @@ Join us, contribute, and grow together! 🌍✨
 | **Code Readability**              |
 | **Optimization**                  |
 
-</details>
-
-<details>
-<summary><h4>:zap: How to Contribute? 🤔</h4></summary>
+### :zap: How to Contribute? 🤔 
 
 1. Star the repository on GitHub to show your support.
 2. Browse the [**Issues**](https://github.com/Code-A2Z/code-a2z/issues) to find tasks that need attention.
@@ -95,80 +88,14 @@ Join us, contribute, and grow together! 🌍✨
 7. Submit a [**Pull Request**](https://github.com/Code-A2Z/code-a2z/pulls), and it will be reviewed.
 8. Make sure to read and follow the [**Contributing Guidelines**](https://github.com/Code-A2Z/code-a2z/blob/main/CONTRIBUTING.md) and [**Code of Conduct**](https://github.com/Code-A2Z/code-a2z/blob/main/CODE_OF_CONDUCT.md).
 
-</details>
-
-<details>
-<summary><h4>:zap: Add Your Project as a Submodule 🚀</h4></summary>
-
-> We want your work to be readable by others; therefore, we encourage you to note the following:
-
-<p align="center">
-  <img src="https://raw.githubusercontent.com/Code-A2Z/assets/main/blog-script-submodule-addition.gif" alt="https://github.com/Code-A2Z/assets/blob/main/blog-script-submodule-addition.gif" width="700" />
-</p>
-
-1. Project/Repository names should be in `kebab-case` letters (e.g., `to-do-list`, `joke-telling-application`).
-
-    > Ensure your repository contains the following files:
-
-    1. *README.md* → Briefly explain the project, its features, and use cases.
-    2. *SETUP.md* → Step-by-step guide to setting up the project locally.
-    3. *LICENSE* → Define the licensing terms for project usage.
-    4. *SCREENSHOT* → Add an image showcasing the project’s UI, if available.
-    5. *WORKING PROTOTYPE* → (Optional) Provide a live demo link or preview GIF/video.
-    6. *DEPLOYED URL* → Attach a deployed URL in your project repository.
-
-2. Run the following command to add your project as a submodule:
-
-    > Run this command from the root directory `/workspaces/<this-project-name>`
-
-```bash
-git submodule add --depth 1 <your_project_repo_url> projects/<category>/<project_name>
-```
-
-> Example for a web development project:
-> ```bash
-> git submodule add --depth 1 https://github.com/your-username/my-web-project.git projects/web-development/my-web-project
-> ```
-
-3. Create a new branch.
-
-```bash
-git checkout -b <add/project_name>
-```
-
-4. Stage the changes
-```bash
-git add .
-```
-
-5. Commit and Push changes
-
-    > Commit message should be clear. Never write un-necessary things in the commit messages.
-
-```bash
-git commit -m "Add <project_name> as a submodule under <category>"
-git push -u origin <add/project_name>
-```
-
-6. Create a Pull Request
-    1. Go to your forked repository on GitHub.
-    2. Click on Compare & pull request.
-    3. Provide a clear description of your project.
-    4. Submit the PR for review.
-
-</details>
-
-<details>
-<summary><h4>:zap: Pull Requests Review Criteria 🧲</h4></summary>
+### :zap: Pull Requests Review Criteria 🧲 
 
 1. Fill out the ***PR template*** properly when submitting a pull request.
 2. Do not commit directly to the `main` branch, otherwise your PR will be instantly rejected.
 3. Don't create more than 3-4 commits unless permitted by Admin and Mentors in your PR.
 4. Add comments to your code wherever necessary for clarity.
 5. 🚀 **Before submitting a PR, you must publish a blog about your project on our website. PRs without a blog will not be accepted.**
 
-</details>
-
 ---
 
 <div align="center">

client/.env.example

@@ -0,0 +1 @@
+VITE_SERVER_DOMAIN=https://code-a2z.onrender.com

client/.vercelignore

@@ -0,0 +1,2 @@
+projects/*
+backend/*

client/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

client/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

client/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code A2Z - Project Blog</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>