feat: code quality tools

Author: vkondi

.eslintignore

@@ -0,0 +1,9 @@
+node_modules
+.next
+out
+build
+dist
+.husky
+coverage
+*.config.js
+*.config.mjs

.eslintrc.json

@@ -0,0 +1,44 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/explicit-function-return-types": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "prettier/prettier": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged && npm run type-check

.prettierignore

@@ -0,0 +1,9 @@
+node_modules
+.next
+out
+build
+dist
+.git
+.husky
+coverage
+*.min.js

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always"
+}

README.md

@@ -6,12 +6,14 @@ A comprehensive GitHub toolkit built with Next.js frontend and Flask API. Analyz
 
 - **[Getting Started](./docs/GETTING_STARTED.md)** - Installation, setup, and troubleshooting guide
 - **[Features](./docs/FEATURES.md)** - Detailed feature descriptions and capabilities
+- **[Code Quality](./docs/CODE_QUALITY.md)** - Code quality tools, linting, formatting, and type safety
 - **[Technical Details](./docs/TECHNICAL_DETAILS.md)** - Tech stack, architecture, and deployment
 - **[GitHub API Integration](./docs/GITHUB_API_INTEGRATION.md)** - API endpoints and integration details
 
 ## 🚀 Quick Start
 
 ### Prerequisites
+
 - Node.js 18+ and yarn
 - Python 3.8+
 - Git
@@ -20,12 +22,14 @@ A comprehensive GitHub toolkit built with Next.js frontend and Flask API. Analyz
 ### Setup
 
 **1. Clone the repository:**
+
 ```bash
 git clone <repository-url>
 cd github-toolkit
 ```
 
 **2. Backend setup:**
+
 ```bash
 pip install -r requirements.txt
 cp .env.example .env
@@ -35,12 +39,14 @@ python -m flask --app api/index run -p 5328
 ```
 
 **3. Frontend setup (new terminal):**
+
 ```bash
 yarn
 yarn next-dev
 ```
 
 **4. Access the application:**
+
 - Frontend: http://localhost:3000
 - Backend API: http://localhost:5328
 
@@ -52,11 +58,13 @@ yarn next-dev
 ## 💻 Development
 
 **Run both frontend and backend concurrently:**
+
 ```bash
 yarn dev
 ```
 
 Or run them separately:
+
 ```bash
 # Terminal 1
 python -m flask --app api/index run -p 5328
@@ -66,6 +74,7 @@ yarn next-dev
 ```
 
 **Build for production:**
+
 ```bash
 yarn build
 yarn start
@@ -75,6 +84,7 @@ yarn start
 
 - For detailed setup and troubleshooting, see [Getting Started](./docs/GETTING_STARTED.md)
 - For feature descriptions, see [Features](./docs/FEATURES.md)
+- For code quality standards, see [Code Quality](./docs/CODE_QUALITY.md)
 - For technical architecture, see [Technical Details](./docs/TECHNICAL_DETAILS.md)
 - For API integration details, see [GitHub API Integration](./docs/GITHUB_API_INTEGRATION.md)
 
@@ -89,6 +99,7 @@ We welcome contributions! Please follow these steps:
 5. Open a Pull Request
 
 ### Code Standards
+
 - Use TypeScript for frontend code
 - Maintain clean, readable code with proper comments
 - Test your changes thoroughly before submitting

app/compare-profiles/page.tsx

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import CompareProfiles from "@/components/CompareProfiles";
+import CompareProfiles from '@/components/CompareProfiles';
 
 export default function CompareProfilesPage() {
   return (

app/layout.tsx

@@ -1,31 +1,27 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-import Footer from "@/components/Footer";
-import ScrollToTop from "@/components/ScrollToTop";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import Footer from '@/components/Footer';
+import ScrollToTop from '@/components/ScrollToTop';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "GitHub Toolkit",
+  title: 'GitHub Toolkit',
   description:
-    "A comprehensive GitHub toolkit for analyzing profiles, repositories, and comparing developers",
+    'A comprehensive GitHub toolkit for analyzing profiles, repositories, and comparing developers',
   icons: {
     icon: [
-      { url: "/favicon.ico", sizes: "any" },
-      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
-      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      { url: '/favicon.ico', sizes: 'any' },
+      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
+      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
     ],
-    apple: "/apple-touch-icon.png",
+    apple: '/apple-touch-icon.png',
   },
-  manifest: "/site.webmanifest",
+  manifest: '/site.webmanifest',
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   const token = process.env.CLOUDFLARE_WEB_ANALYTICS_TOKEN;
 
   return (

app/page.tsx

@@ -1,31 +1,24 @@
-"use client";
+'use client';
 
-import {
-  Github,
-  User,
-  Users,
-  BarChart3,
-  TrendingUp,
-  ArrowRight,
-} from "lucide-react";
-import Link from "next/link";
+import { Github, User, Users, BarChart3, TrendingUp } from 'lucide-react';
+import Link from 'next/link';
 
 export default function Home() {
   const tools = [
     {
-      id: "profile-analyzer",
-      title: "Profile Analyzer",
-      subtitle: "Analyze GitHub profiles",
+      id: 'profile-analyzer',
+      title: 'Profile Analyzer',
+      subtitle: 'Analyze GitHub profiles',
       icon: User,
-      href: "/profile-analyzer",
+      href: '/profile-analyzer',
     },
     {
-      id: "compare-profiles",
-      title: "Compare Profiles",
-      subtitle: "Compare two developers",
+      id: 'compare-profiles',
+      title: 'Compare Profiles',
+      subtitle: 'Compare two developers',
       icon: Users,
-      href: "/compare-profiles",
-    }
+      href: '/compare-profiles',
+    },
   ];
 
   return (
@@ -34,11 +27,12 @@ export default function Home() {
       <header className="bg-surface border-b border-elevated sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center h-16">
-            <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
+            <Link
+              href="/"
+              className="flex items-center space-x-3 hover:opacity-80 transition-opacity"
+            >
               <Github className="h-8 w-8 text-primary" />
-              <h1 className="text-2xl font-bold text-primary">
-                GitHub Toolkit
-              </h1>
+              <h1 className="text-2xl font-bold text-primary">GitHub Toolkit</h1>
             </Link>
           </div>
         </div>
@@ -47,12 +41,10 @@ export default function Home() {
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         {/* Hero Section */}
         <div className="text-center mb-16">
-          <h1 className="text-4xl md:text-5xl font-bold text-primary mb-4">
-            GitHub Toolkit
-          </h1>
+          <h1 className="text-4xl md:text-5xl font-bold text-primary mb-4">GitHub Toolkit</h1>
           <p className="text-lg md:text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
-            A comprehensive suite of tools for analyzing GitHub profiles,
-            comparing developers, and gaining insights.
+            A comprehensive suite of tools for analyzing GitHub profiles, comparing developers, and
+            gaining insights.
           </p>
         </div>
 
@@ -97,34 +89,22 @@ export default function Home() {
               <div className="w-16 h-16 bg-elevated rounded-lg flex items-center justify-center mx-auto mb-4 border border-primary">
                 <BarChart3 className="h-8 w-8 text-primary" />
               </div>
-              <h3 className="text-lg font-semibold text-primary mb-2">
-                Analytics
-              </h3>
-              <p className="text-gray-400">
-                Get detailed insights with beautiful visualizations.
-              </p>
+              <h3 className="text-lg font-semibold text-primary mb-2">Analytics</h3>
+              <p className="text-gray-400">Get detailed insights with beautiful visualizations.</p>
             </div>
             <div className="text-center">
               <div className="w-16 h-16 bg-elevated rounded-lg flex items-center justify-center mx-auto mb-4 border border-secondary">
                 <Users className="h-8 w-8 text-secondary" />
               </div>
-              <h3 className="text-lg font-semibold text-secondary mb-2">
-                Compare
-              </h3>
-              <p className="text-gray-400">
-                Compare developers side-by-side easily.
-              </p>
+              <h3 className="text-lg font-semibold text-secondary mb-2">Compare</h3>
+              <p className="text-gray-400">Compare developers side-by-side easily.</p>
             </div>
             <div className="text-center">
               <div className="w-16 h-16 bg-elevated rounded-lg flex items-center justify-center mx-auto mb-4 border border-tertiary">
                 <TrendingUp className="h-8 w-8 text-tertiary" />
               </div>
-              <h3 className="text-lg font-semibold text-tertiary mb-2">
-                Real-time
-              </h3>
-              <p className="text-gray-400">
-                Access live data from GitHub API.
-              </p>
+              <h3 className="text-lg font-semibold text-tertiary mb-2">Real-time</h3>
+              <p className="text-gray-400">Access live data from GitHub API.</p>
             </div>
           </div>
         </div>

app/profile-analyzer/page.tsx

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import ProfileAnalyzer from "@/components/ProfileAnalyzer";
+import ProfileAnalyzer from '@/components/ProfileAnalyzer';
 
 export default function ProfileAnalyzerPage() {
   return (