Merge pull request #28 from Krishna100604/main

created separate folder for website which is react+tailwind

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }

README.md

@@ -19,13 +19,41 @@
 
 ---
 
-### About Us:
-The "Chrome-Gaming-Certification" GitHub repository by ChromeGaming is focused on a certification process for Chrome Gaming. The repository includes core web development files such as index.html, script.js, and styles.css. These files form the basis of the project's web interface and functionality, designed to assess and certify gaming performance or compatibility on Chrome. 
+# Certificate Generator
 
-### Tech Stack Used:  
-HTML, CSS and Javascript and so on..
+## Overview
 
+The Certificate Generator is a web application developed using React, Tailwind CSS, and Vite. It allows users to easily generate customized certificates by filling out a form with employee details, which are then rendered and downloadable as PDF documents. This project demonstrates how to leverage modern web technologies for creating dynamic and responsive user interfaces.
 
+## Features
+
+- **Form Input:** Users can input employee details such as name, company, duration, and designation.
+- **Real-time Preview:** As users fill out the form, a preview of the certificate dynamically updates.
+- **Download PDF:** Once generated, users can download the certificate as a PDF file.
+- **Responsive Design:** The application is designed to work seamlessly across various devices and screen sizes.
+
+## Technologies Used
+
+- **React:** A JavaScript library for building user interfaces.
+- **Vite:** A next-generation front-end tool that provides a fast development experience.
+- **Tailwind CSS:** A utility-first CSS framework for quickly styling applications.
+- **html2canvas and jspdf:** Libraries used for generating and downloading PDF documents from HTML content.
+
+## Dependencies
+
+- **react:** ^17.0.2
+- **react-dom:** ^17.0.2
+- **html2canvas:** ^1.3.3
+- **jspdf:** ^2.3.1
+- **tailwindcss:** ^3.0.16
+- **vite:** ^2.7.5
+
+## Getting Started
+
+1. **Clone the repository:**
+   ```bash
+   git clone https://github.com/your-username/certificate-generator.git
+   cd certificate-generator
 
 ### Sending a Pull Request
 
@@ -41,28 +69,31 @@ HTML, CSS and Javascript and so on..
 
 3. Create a Branch:
     ```bash
-   cd Chrome-Gaming-Certification
+   cd Chrome-Gaming-Certification certificate generator
     ```
-     ```bash
-   git checkout -b your-branch-name
+    ```bash
+    npm i
     ```
-     - Replace your-branch-name with a descriptive name for your branch.
-
+    ```bash
+    npm run dev
+    ```
+
+
 4. Make Your Changes:
    - Edit the necessary files in your preferred code editor.
 
-5. Commit Your Changes:
+6. Commit Your Changes:
     ```bash
    git add .
     ```
      ```bash
    git commit -m "Description of your changes"
     ```
-6. Push Your Changes:
+7. Push Your Changes:
    ```bash
    git push origin your-branch-name
     ```
-7. Create a Pull Request:
+8. Create a Pull Request:
       - Go to your forked repository on GitHub.
       - Click the "Compare & pull request" button.
       - Provide a title and description for your pull request.

certificate-generator/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

certificate-generator/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

certificate-generator/README.md

@@ -0,0 +1,37 @@
+# Certificate Generator
+
+## Overview
+
+The Certificate Generator is a web application developed using React, Tailwind CSS, and Vite. It allows users to easily generate customized certificates by filling out a form with employee details, which are then rendered and downloadable as PDF documents. This project demonstrates how to leverage modern web technologies for creating dynamic and responsive user interfaces.
+
+## Features
+
+- **Form Input:** Users can input employee details such as name, company, duration, and designation.
+- **Real-time Preview:** As users fill out the form, a preview of the certificate dynamically updates.
+- **Download PDF:** Once generated, users can download the certificate as a PDF file.
+- **Responsive Design:** The application is designed to work seamlessly across various devices and screen sizes.
+
+## Technologies Used
+
+- **React:** A JavaScript library for building user interfaces.
+- **Vite:** A next-generation front-end tool that provides a fast development experience.
+- **Tailwind CSS:** A utility-first CSS framework for quickly styling applications.
+- **react-hook-form:** A library for managing form state and validation in React applications.
+- **html2canvas and jspdf:** Libraries used for generating and downloading PDF documents from HTML content.
+
+## Dependencies
+
+- **react:** ^17.0.2
+- **react-dom:** ^17.0.2
+- **react-hook-form:** ^7.21.4
+- **html2canvas:** ^1.3.3
+- **jspdf:** ^2.3.1
+- **tailwindcss:** ^3.0.16
+- **vite:** ^2.7.5
+
+## Getting Started
+
+1. **Clone the repository:**
+   ```bash
+   git clone https://github.com/your-username/certificate-generator.git
+   cd certificate-generator

certificate-generator/index.html

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