Skip to content

Commit 5adc361

Browse files
rayraycodesrayraycodes
committed
Add GitHub Pages deployment and fix routing for subdirectory
- Add GitHub Actions workflow for automatic deployment to GitHub Pages - Add .gitignore for Node.js project - Fix React Router basename to match /opdsystem/ base path - Update hero section with View Demo link - Add preview script to package.json - Update README with comprehensive project documentation Made-with: Cursor
1 parent dd5feb9 commit 5adc361

8 files changed

Lines changed: 5840 additions & 25 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: pages
16+
cancel-in-progress: false
17+
18+
jobs:
19+
build:
20+
runs-on: ubuntu-latest
21+
steps:
22+
- name: Checkout
23+
uses: actions/checkout@v4
24+
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: '20'
29+
cache: 'npm'
30+
31+
- name: Install dependencies
32+
run: npm ci
33+
34+
- name: Build
35+
run: npm run build
36+
37+
- name: Setup Pages
38+
uses: actions/configure-pages@v4
39+
40+
- name: Upload artifact
41+
uses: actions/upload-pages-artifact@v3
42+
with:
43+
path: ./dist
44+
45+
deploy:
46+
environment:
47+
name: github-pages
48+
url: ${{ steps.deployment.outputs.page_url }}
49+
runs-on: ubuntu-latest
50+
needs: build
51+
steps:
52+
- name: Deploy to GitHub Pages
53+
id: deployment
54+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Dependencies
2+
node_modules/
3+
.pnp
4+
.pnp.js
5+
6+
# Build outputs
7+
dist/
8+
dist-ssr/
9+
build/
10+
*.local
11+
12+
# Editor directories and files
13+
.vscode/*
14+
!.vscode/extensions.json
15+
!.vscode/settings.json
16+
.idea/
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?
22+
*.swp
23+
*~
24+
25+
# OS generated files
26+
.DS_Store
27+
.DS_Store?
28+
._*
29+
.Spotlight-V100
30+
.Trashes
31+
ehthumbs.db
32+
Thumbs.db
33+
34+
# Logs
35+
logs/
36+
*.log
37+
npm-debug.log*
38+
yarn-debug.log*
39+
yarn-error.log*
40+
pnpm-debug.log*
41+
lerna-debug.log*
42+
43+
# Environment variables
44+
.env
45+
.env.local
46+
.env.development.local
47+
.env.test.local
48+
.env.production.local
49+
.env*.local
50+
51+
# Testing
52+
coverage/
53+
.nyc_output/
54+
55+
# Cache
56+
.cache/
57+
.parcel-cache/
58+
.vite/
59+
60+
# TypeScript
61+
*.tsbuildinfo
62+
63+
# Misc
64+
*.pem
65+
.vercel
66+
.turbo

‎README.md‎

Lines changed: 177 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,182 @@
1+
# OPD System - Hospital Queue Management
12

2-
# Build Out Best Features
3+
A modern, accessible Hospital Outpatient Department (OPD) Queue Management System built for high-volume South Asian hospitals. Designed to reduce crowding, support assisted booking, and work reliably in low-connectivity environments.
34

4-
This is a code bundle for Build Out Best Features. The original project is available at https://www.figma.com/design/aK7P46ZXeUfhykACqGuLUK/Build-Out-Best-Features.
5+
## Live Demo
56

6-
## Running the code
7+
Visit the live application at: **[rayraycodes.github.io/opdsystem](https://rayraycodes.github.io/opdsystem)**
78

8-
Run `npm i` to install the dependencies.
9+
## Features
910

10-
Run `npm run dev` to start the development server.
11-
11+
### Patient Experience
12+
- **Real-time Queue Tracking** - Live token status with ETA ranges (e.g., "15-25 min")
13+
- **Multi-language Support** - English, Hindi (हिंदी), and Nepali (नेपाली) with full Devanagari script support
14+
- **Assisted Booking Mode** - Simplified interface for elderly users and those needing assistance
15+
- **Family Wallet** - Manage multiple patient profiles under one account
16+
- **QR Code Confirmations** - Easy check-in at hospital kiosks
17+
18+
### Accessibility (WCAG 2.1 AAA Compliant)
19+
- **Elder Mode** - Larger text (18px base), simplified navigation
20+
- **High Contrast Mode** - Enhanced color contrast ratios
21+
- **Voice Guidance** - Screen reader optimized
22+
- **Touch-friendly** - Minimum 48x48px touch targets
23+
24+
### Staff Dashboard
25+
- Queue management and patient flow control
26+
- Emergency interrupt handling
27+
- Real-time analytics and wait time monitoring
28+
29+
### Technical Highlights
30+
- **Offline-first Architecture** - Works in low-connectivity environments
31+
- **Government ID Ready** - Supports ABHA (India) and Nepal Health ID integration
32+
- **Responsive Design** - Mobile-first, works on all devices
33+
- **Landmark Navigation** - Campus wayfinding with visual landmarks
34+
35+
## Tech Stack
36+
37+
| Category | Technology |
38+
|----------|------------|
39+
| Framework | React 18 + TypeScript |
40+
| Build Tool | Vite 6 |
41+
| Styling | Tailwind CSS 4 |
42+
| UI Components | shadcn/ui + Radix UI primitives |
43+
| Routing | React Router 7 |
44+
| Forms | React Hook Form |
45+
| Animations | Motion (Framer Motion) |
46+
| Charts | Recharts |
47+
| Icons | Lucide React |
48+
49+
## Getting Started
50+
51+
### Prerequisites
52+
53+
- Node.js 18+
54+
- npm or pnpm
55+
56+
### Installation
57+
58+
```bash
59+
# Clone the repository
60+
git clone https://github.com/rayraycodes/opdsystem.git
61+
cd opdsystem
62+
63+
# Install dependencies
64+
npm install
65+
66+
# Start development server
67+
npm run dev
68+
```
69+
70+
The app will be available at `http://localhost:5173`
71+
72+
### Build for Production
73+
74+
```bash
75+
npm run build
76+
```
77+
78+
Build output will be in the `dist` directory.
79+
80+
### Preview Production Build
81+
82+
```bash
83+
npm run preview
84+
```
85+
86+
## Project Structure
87+
88+
```
89+
src/
90+
├── main.tsx # Application entry point
91+
├── app/
92+
│ ├── App.tsx # Main app with RouterProvider
93+
│ ├── Root.tsx # Root layout with AppProvider
94+
│ ├── routes.ts # Route configuration
95+
│ ├── components/
96+
│ │ ├── ui/ # shadcn/ui components (48+)
97+
│ │ ├── figma/ # Figma-generated components
98+
│ │ ├── DoctorCard.tsx # Doctor listing card
99+
│ │ ├── DepartmentCard.tsx
100+
│ │ ├── EmergencyBanner.tsx
101+
│ │ ├── LanguageSwitcher.tsx
102+
│ │ └── ...
103+
│ ├── contexts/
104+
│ │ └── AppContext.tsx # Global state management
105+
│ └── screens/
106+
│ ├── LandingPage.tsx # Marketing page
107+
│ ├── EntryScreen.tsx # Language/accessibility selection
108+
│ ├── FindCareScreen.tsx # Doctor/department search
109+
│ ├── AppointmentDetailsScreen.tsx
110+
│ ├── ConfirmationScreen.tsx
111+
│ ├── QueueTrackingScreen.tsx
112+
│ └── StaffDashboard.tsx
113+
├── styles/
114+
│ ├── index.css # Main entry
115+
│ ├── theme.css # Design tokens
116+
│ ├── tailwind.css # Tailwind config
117+
│ └── fonts.css # Typography
118+
└── imports/ # Design specifications
119+
```
120+
121+
## Routes
122+
123+
| Path | Description |
124+
|------|-------------|
125+
| `/` | Marketing landing page |
126+
| `/patient` | Patient entry with language selection |
127+
| `/find-care` | Search doctors and departments |
128+
| `/appointment/:doctorId` | View doctor details and book |
129+
| `/confirmation/:appointmentId` | Booking confirmation with QR |
130+
| `/queue/:tokenId` | Live queue tracking |
131+
| `/staff` | Staff dashboard |
132+
| `/design-system` | Design system showcase |
133+
134+
## Design System
135+
136+
### Colors
137+
- **Primary (Healing Teal)**: `#0d9488` - Trust and healthcare
138+
- **Secondary (Trust Blue)**: `#3b82f6` - Reliability
139+
- **Semantic**: Success, Warning, Danger with AAA contrast
140+
141+
### Typography
142+
- **Latin**: Inter
143+
- **Devanagari**: Noto Sans Devanagari
144+
- **Scale**: 14px (caption) to 32px (display)
145+
146+
### Spacing
147+
- 8pt grid system
148+
- Minimum touch targets: 48x48px
149+
150+
## Deployment
151+
152+
This project is configured for automatic deployment to GitHub Pages via GitHub Actions. Every push to the `main` branch triggers a build and deployment.
153+
154+
### Manual Deployment
155+
156+
```bash
157+
npm run build
158+
# Deploy the dist/ folder to your hosting provider
159+
```
160+
161+
## Contributing
162+
163+
1. Fork the repository
164+
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
165+
3. Commit your changes (`git commit -m 'Add amazing feature'`)
166+
4. Push to the branch (`git push origin feature/amazing-feature`)
167+
5. Open a Pull Request
168+
169+
## License
170+
171+
This project is private and proprietary.
172+
173+
## Acknowledgments
174+
175+
- [shadcn/ui](https://ui.shadcn.com/) - Beautiful UI components
176+
- [Radix UI](https://www.radix-ui.com/) - Accessible primitives
177+
- [Unsplash](https://unsplash.com/) - Stock photography
178+
- Original design from Figma Make
179+
180+
---
181+
182+
Built with care for patients and healthcare workers.

0 commit comments

Comments
 (0)