Chore/setup prettier ci

.github/ISSUE_TEMPLATE/PULL_REQUEST_TEMPLATE.md

@@ -19,14 +19,14 @@ Closes #[issue_number]
 
 ## Checklist
 
-- [ ] My code follows the project’s style guidelines  
-- [ ] I have performed a self-review of my code  
-- [ ] I have commented my code where necessary  
-- [ ] I have added tests that prove my fix is effective or my feature works  
+- [ ] My code follows the project’s style guidelines
+- [ ] I have performed a self-review of my code
+- [ ] I have commented my code where necessary
+- [ ] I have added tests that prove my fix is effective or my feature works
 - [ ] All new and existing tests pass
 
 ---
 
 ## Additional Notes
 
-Any extra context or screenshots (if applicable).
+Any extra context or screenshots (if applicable).

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: bug
 assignees: ''
-
 ---
 
 Found a bug? Please fill out the sections below. 👍

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: Feature
 assignees: ''
-
 ---
 
 ### Is your proposal related to a problem?

.github/workflows/prettier.yml

@@ -0,0 +1,20 @@
+name: Prettier Check
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm install
+      - name: Run Prettier check
+        run: npx prettier --check .

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+build
+coverage
+.env
+*.min.js

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "es5"
+}

README.md

@@ -5,41 +5,46 @@ Frontend of the RoastAI project, built with **React, TypeScript, and Vite**, pro
 ---
 
 ## Project Overview / Purpose
-This frontend allows users to:  
-- Chat with **SavageBot**, a witty, roast-style AI.  
-- Receive humorous responses from the AI based on user input.  
-- Browse funny debates and quote remixes.  
+
+This frontend allows users to:
+
+- Chat with **SavageBot**, a witty, roast-style AI.
+- Receive humorous responses from the AI based on user input.
+- Browse funny debates and quote remixes.
 
 It communicates with the RoastAI backend to fetch AI responses and display them in a responsive, stylish interface.
 
 ---
 
 ## Features
-- Interactive **chat with SavageBot**  
-- **Funny debates** and quote remix features  
-- Fully **responsive UI** with TailwindCSS  
-- **Form handling** with React Hook Form  
+
+- Interactive **chat with SavageBot**
+- **Funny debates** and quote remix features
+- Fully **responsive UI** with TailwindCSS
+- **Form handling** with React Hook Form
 - Routing handled via **React Router DOM**
 
 ---
 
 ## Tech Stack
-- **Frontend:** React.js, TypeScript, TailwindCSS  
-- **Build & Dev Tools:** Vite, ESLint  
-- **Libraries:** React Hook Form, Lucide React, Tailwind Scrollbar  
+
+- **Frontend:** React.js, TypeScript, TailwindCSS
+- **Build & Dev Tools:** Vite, ESLint
+- **Libraries:** React Hook Form, Lucide React, Tailwind Scrollbar
 
 ---
 
 ## Getting Started
 
 ### Prerequisites
+
 - Node.js >= 16
 - A running instance of the RoastAI backend
 - `.env` file with the following key:
 
 ```env
 VITE_BACKEND_BASE_URL=<your_backend_api_url>
-````
+```
 
 ### Installation
 
@@ -55,7 +60,7 @@ npm install
 npm run dev
 ```
 
-* Starts the development server via Vite.
+- Starts the development server via Vite.
 
 ### Build & Preview
 

eslint.config.js

@@ -1,9 +1,9 @@
-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'
+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']),
@@ -20,4 +20,4 @@ export default tseslint.config([
       globals: globals.browser,
     },
   },
-])
+]);

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.11",
@@ -30,6 +31,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "prettier": "^3.6.2",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.3"

src/App.css

@@ -1,26 +1,38 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 ::selection {
-  background-color: black; 
-  color: white;            
+  background-color: black;
+  color: white;
 }
 
-
 :root {
   --shadow: 50px 0px 200px rgba(175, 167, 167, 0.24);
 }
 
 body {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
 }
 
-
 .custom-scroll::-webkit-scrollbar {
-  width: 2px; 
+  width: 2px;
 }
 
 .custom-scroll {
-  scrollbar-width: thin; 
+  scrollbar-width: thin;
 }
 
 .small-scroll::-webkit-scrollbar-thumb {
@@ -29,7 +41,6 @@ body {
   border-radius: 4px;
 }
 
-
 @layer base {
   * {
     transition-property: all;
@@ -38,7 +49,6 @@ body {
   }
 }
 
-
 @layer theme {
   :root {
     --app-inner-gutter: 0.75rem;
@@ -65,21 +75,20 @@ body {
     padding-top: var(--app-gutter-xl);
     padding-bottom: var(--app-gutter-xl);
   }
- 
+
   .p-gutter {
     padding: var(--app-gutter);
   }
 }
 
 .shadow-c {
   box-shadow:
-    -1.5px 0px 2px rgba(104, 104, 104, 0.16),  /* left */
-     1.5px 0px 2px rgba(104, 104, 104, 0.16),  /* right */
-     0px 1.5px 2px rgba(104, 104, 104, 0.16),  /* bottom */
-     0px -0.5px 2px rgba(104, 104, 104, 0.1);  /* top (reduced) */
+    -1.5px 0px 2px rgba(104, 104, 104, 0.16),
+    /* left */ 1.5px 0px 2px rgba(104, 104, 104, 0.16),
+    /* right */ 0px 1.5px 2px rgba(104, 104, 104, 0.16),
+    /* bottom */ 0px -0.5px 2px rgba(104, 104, 104, 0.1); /* top (reduced) */
 }
 
-
 .custom-scrollbar::-webkit-scrollbar {
   width: 4px;
 }
@@ -91,4 +100,4 @@ body {
 
 .custom-scrollbar::-webkit-scrollbar-track {
   background: transparent;
-}
+}

src/App.tsx

@@ -1,12 +1,11 @@
-import LoginPage from "./page/LoginPage";
-import SignupPage from "./page/SignupPage";
-import HomePage from "./page/HomePage";
-import { Routes, Route } from "react-router-dom";
-import PrivateRoute from "./components/PrivateRoute"
-import VerifyEmail from "./components/VerifyEmail";
+import LoginPage from './page/LoginPage';
+import SignupPage from './page/SignupPage';
+import HomePage from './page/HomePage';
+import { Routes, Route } from 'react-router-dom';
+import PrivateRoute from './components/PrivateRoute';
+import VerifyEmail from './components/VerifyEmail';
 
 function App() {
-
   return (
     <div className="min-h-screen flex flex-col bg-[#fff] text-[#313131]">
       <Routes>
@@ -26,4 +25,4 @@ function App() {
   );
 }
 
-export default App
+export default App;