🚀 HackX — React + Vite (TypeScript)

HackX is a multi-page hackathon web app built with React + Vite and TypeScript.
It uses Bootstrap + CSS for styling and react-icons for icons.
All images are stored in the public/images/ folder.

---

✨ Features

• Fast and modern with Vite + React + TypeScript
• Multi-page navigation using React Router
• Responsive and mobile-friendly with Bootstrap
• Uses react-icons for nice icons
• Simple and clear folder structure
• Easy deployment (Vercel / Netlify)

---

🧭 Pages

• Login
• Register
• Dashboard
• OverviewScroll
• OneHackathon
• HackathonFull
• PrizeJudge
• Schedulepage
• Schedulepage2
• ProjectReview
• ProjectJudgingReview
• JudgeRegister
• JudgeDashboard
• JudgeDashboardProject
• RegisterHackathon
• SubmitProject
• ExploreDashboard
• ProjectReviewHackathon
• JudgeDashboard
• JudgeDashboardProject

---

📁 Folder Structure

hackx/
├─ public/
│  ├─ images/                   # all static images here
│  └─ favicon.svg
├─ src/
│  ├─ pages/
│  │   ├─ Login.tsx
│  │   ├─ Register.tsx
│  │   ├─ Dashboard.tsx
│  │   ├─ OverviewScroll.tsx
│  │   ├─ OneHackathon.tsx
│  │   ├─ HackathonFull.tsx
│  │   ├─ PrizeJudge.tsx
│  │   ├─ Schedulepage.tsx
│  │   ├─ Schedulepage2.tsx
│  │   ├─ ProjectReview.tsx
│  │   ├─ ProjectJudgingReview.tsx
│  │   ├─ JudgeRegister.tsx
│  │   ├─ JudgeDashboard.tsx
│  │   └─ JudgeDashboardProject.tsx
│  ├─ routes/
│  │   └─ AppRoutes.tsx
│  ├─ styles/
│  │   └─ global.css
│  ├─ App.tsx
│  └─ main.tsx
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ README.md



1️⃣ Install Node.js

node -v
npm -v



2️⃣ Create the Vite + React Project (if not created yet)

npm create vite@latest hackx -- --template react-ts
cd hackx



3️⃣ Install Dependencies.

npm install react-router-dom bootstrap react-icons

This will install:

react-router-dom → for page navigation

bootstrap → for responsive design

react-icons → for icons



4️⃣ Add Bootstrap & CSS

import "bootstrap/dist/css/bootstrap.min.css";
import "./styles/global.css";




5️⃣ Add Images

<img src="/images/logo.png" alt="HackX Logo" />




6️⃣ Setup Routes




7️⃣ Run Development Server

npm run dev




8️⃣ Build for Production

npm run build
npm run preview





🔗 How navigation works (simple)

ExploreDashboard

There is an image card that says “ChainSpark Hackathon”.

This image is clickable.

When you click it, you go to the OneHackathon page.

OneHackathon

Scroll down the page.

You will see a button named “Hackathon Full View” (or similar).

Click this button to go to the HackathonFull page.

HackathonFull

This page shows the full details view of the hackathon.

That’s it. Just click the image → open OneHackathon → scroll down → click the button → open HackathonFull.