build: build app with hashrouting

Author: UsamaSadiq

.github/workflows/deploy.yaml

@@ -39,5 +39,5 @@ jobs:
           cp -r dist/* temp-portfolio/projects/flashmaster/
           cd temp-portfolio
           git add .
-          git commit -m "Deploy updated Flashmaster frontend"
+          git commit -m "Deploy updated Flashmaster frontend with hash routing"
           git push

README.md

@@ -1,12 +1,56 @@
 # Flashmaster
 
-Vibe‑coded on **Replit** with TypeScript & Vite.
+A flashcard-based learning application built with TypeScript, React, and Vite. Uses hash-based routing for GitHub Pages compatibility.
 
-🔗 Demo: https://usamasadiq.us/projects/flashmaster
+🔗 Demo: https://usamasadiq.github.io/projects/flashmaster/
 
-# Deploy Instructions
+## Development
 
-`npm install`
-`npm run build`
+```bash
+npm install
+npm run dev
+```
 
-Upload dist files. Workflow will deploy to portfolio site automatically.
+## Build
+
+```bash
+npm install
+npm run build
+```
+
+## GitHub Pages Deployment
+
+This application is configured to deploy to `usamasadiq.github.io/projects/flashmaster/` with hash-based routing to avoid 404 errors on GitHub Pages.
+
+### Automatic Deployment (Recommended)
+
+1. **Set up GitHub PAT**: 
+   - Create a Personal Access Token with `repo` permissions
+   - Add it as a secret named `GH_PAT` in this repository (Settings → Secrets and variables → Actions)
+
+2. **Deploy**: 
+   - Push your code to this repository's main branch
+   - The GitHub Action will automatically build and deploy to `usamasadiq.github.io/projects/flashmaster/`
+
+### Manual Deployment
+
+1. Build the project: `npm run build`
+2. Copy the contents of the `dist/` directory to `projects/flashmaster/` in the `usamasadiq.github.io` repository
+3. Commit and push the changes to the `usamasadiq.github.io` repository
+
+### Configuration Notes
+
+- **Base Path**: Set to `/projects/flashmaster/` in `vite.config.ts` for the target deployment location
+- **Routing**: Uses hash-based routing (`#/flashcard/javascript`) to avoid GitHub Pages 404 errors
+- **Target Repository**: `usamasadiq/usamasadiq.github.io`
+- **Target Path**: `projects/flashmaster/`
+- **Live URL**: `https://usamasadiq.github.io/projects/flashmaster/`
+
+## Features
+
+- Interactive flashcard learning system with hash-based routing for GitHub Pages compatibility
+- Multiple technology categories (HTML/CSS, JavaScript, React, TypeScript, Python, Node.js)
+- Progress tracking
+- Responsive design
+- Built with modern web technologies
+- Hash routing ensures proper navigation on GitHub Pages (routes like `#/flashcard/javascript`)

client/src/App.tsx

@@ -1,4 +1,5 @@
-import { Switch, Route } from "wouter";
+import { Switch, Route, Router } from "wouter";
+import { useHashLocation } from "wouter/use-hash-location";
 import { queryClient } from "./lib/queryClient";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "@/components/ui/toaster";
@@ -7,13 +8,15 @@ import Home from "@/pages/home";
 import Flashcard from "@/pages/flashcard";
 import NotFound from "@/pages/not-found";
 
-function Router() {
+function AppRouter() {
   return (
-    <Switch>
-      <Route path="/" component={Home} />
-      <Route path="/flashcard/:technology" component={Flashcard} />
-      <Route component={NotFound} />
-    </Switch>
+    <Router hook={useHashLocation}>
+      <Switch>
+        <Route path="/" component={Home} />
+        <Route path="/flashcard/:technology" component={Flashcard} />
+        <Route component={NotFound} />
+      </Switch>
+    </Router>
   );
 }
 
@@ -22,7 +25,7 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <TooltipProvider>
         <Toaster />
-        <Router />
+        <AppRouter />
       </TooltipProvider>
     </QueryClientProvider>
   );

client/src/components/technology-card.tsx

@@ -1,13 +1,13 @@
 import { Card, CardContent } from "@/components/ui/card";
-import { useLocation } from "wouter";
+import { useHashLocation } from "wouter/use-hash-location";
 
 interface TechnologyCardProps {
   technology: string;
   questionCount: number;
 }
 
 export default function TechnologyCard({ technology, questionCount }: TechnologyCardProps) {
-  const [, setLocation] = useLocation();
+  const [, setLocation] = useHashLocation();
 
   const handleClick = () => {
     setLocation(`/flashcard/${encodeURIComponent(technology)}`);

client/src/pages/flashcard.tsx

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { ChevronLeft, ChevronRight, Home, HelpCircle } from "lucide-react";
 import { useState, useEffect, useCallback } from "react";
-import { useLocation } from "wouter";
+import { useHashLocation } from "wouter/use-hash-location";
 import FlashcardDisplay from "@/components/flashcard-display";
 import ProgressBar from "@/components/progress-bar";
 import HowToUseModal from "@/components/how-to-use-modal";
@@ -15,7 +15,7 @@ import type { FlashcardData } from "@shared/schema";
 export default function Flashcard() {
   const { technology: rawTechnology } = useParams<{ technology: string }>();
   const technology = rawTechnology ? decodeURIComponent(rawTechnology) : "";
-  const [, setLocation] = useLocation();
+  const [, setLocation] = useHashLocation();
   const [showModal, setShowModal] = useState(false);
 
   const { data: flashcardData, isLoading } = useQuery<FlashcardData>({

dist/assets/index-B0PTqIws.js

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
-    <script type="module" crossorigin src="/projects/flashmaster/assets/index-B0PTqIws.js"></script>
+    <script type="module" crossorigin src="/projects/flashmaster/assets/index-EPSlLXeu.js"></script>
     <link rel="stylesheet" crossorigin href="/projects/flashmaster/assets/index-Dcn7NiiW.css">
   </head>
   <body>