abhinandanmishra1 · abhinandanmishra1 · Dec 13, 2025 · Dec 13, 2025
diff --git a/client-new/.env.example b/client-new/.env.example
@@ -0,0 +1,3 @@
+# Environment Variables
+VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key_here
+VITE_API_URL=http://localhost:5001
diff --git a/client-new/.gitignore b/client-new/.gitignore
@@ -0,0 +1,30 @@
+# 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?
+
+# Environment variables
+.env
+.env.local
+.env.production.local
+.env.development.local
diff --git a/client-new/.npmrc b/client-new/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/
diff --git a/client-new/README.md b/client-new/README.md
@@ -0,0 +1,102 @@
+# Coders Portfolio - Frontend
+
+Modern portfolio platform for developers to showcase their coding achievements across multiple platforms.
+
+## Tech Stack
+
+- **Framework**: Vite + React 18
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS
+- **UI Components**: shadcn/ui
+- **Authentication**: Clerk
+- **State Management**: TanStack Query (React Query)
+- **Routing**: React Router v6
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ or Yarn
+- Clerk account (for authentication)
+
+### Installation
+
+1. Install dependencies:
+```bash
+npm install
+# or
+yarn install
+```
+
+2. Create `.env.local` file:
+```bash
+cp .env.example .env.local
+```
+
+3. Add your Clerk publishable key to `.env.local`:
+```
+VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key_here
+VITE_API_URL=http://localhost:5000
+```
+
+### Development
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+### Build
+
+```bash
+npm run build
+# or
+yarn build
+```
+
+### Preview Production Build
+
+```bash
+npm run preview
+# or
+yarn preview
+```
+
+## Project Structure
+
+```
+src/
+├── components/
+│   ├── ui/              # shadcn/ui components
+│   ├── layout/          # Layout components (Navbar, Footer)
+│   └── features/        # Feature-specific components
+├── pages/               # Page components
+│   └── profiles/        # Platform profile pages
+├── lib/
+│   ├── api/            # API client and React Query hooks
+│   └── utils.ts        # Utility functions
+├── hooks/              # Custom React hooks
+├── types/              # TypeScript type definitions
+└── main.tsx            # Application entry point
+```
+
+## Features
+
+- 🔐 Authentication with Clerk
+- 🎨 Modern UI with Tailwind CSS and shadcn/ui
+- 📱 Fully responsive design
+- ⚡ Fast development with Vite HMR
+- 🔄 Data fetching with TanStack Query
+- 🛣️ Client-side routing with React Router
+
+## Environment Variables
+
+- `VITE_CLERK_PUBLISHABLE_KEY` - Your Clerk publishable key
+- `VITE_API_URL` - Backend API URL (default: http://localhost:5000)
+
+## License
+
+MIT
diff --git a/client-new/components.json b/client-new/components.json
@@ -0,0 +1,17 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "default",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+        "config": "tailwind.config.ts",
+        "css": "src/index.css",
+        "baseColor": "slate",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils"
+    }
+}
diff --git a/client-new/index.html b/client-new/index.html
@@ -0,0 +1,14 @@
+<!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>Coders Portfolio - Showcase Your Coding Journey</title>
+    <meta name="description" content="Create a stunning portfolio showcasing your achievements across GitHub, LeetCode, Codechef, Codeforces, and Hackerrank" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>