diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..8aca7be --- /dev/null +++ b/.env.example @@ -0,0 +1,3 @@ +# API backend URL (BridgeStack FastAPI server) +# The Vite dev server proxies /api requests to this URL +VITE_API_URL=http://localhost:8000 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1136cba..dd6fbd5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -16,3 +16,17 @@ jobs: with: args: --accept 200,204,301,302,403,429 --exclude-mail --exclude "localhost|127.0.0.1|example.com|twitter.com|x.com|linkedin.com|facebook.com|instagram.com" --timeout 30 --max-retries 2 "**/*.html" "**/*.md" fail: false + + build-and-test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + - run: npm ci --legacy-peer-deps + - run: npm run lint + - run: npm run format:check + - run: npm run test + - run: npm run build diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml new file mode 100644 index 0000000..a6e9c9f --- /dev/null +++ b/.github/workflows/docs.yml @@ -0,0 +1,30 @@ +name: Deploy Docs + +on: + push: + branches: [main] + paths: ['docs/**'] + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: true + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/configure-pages@v4 + - uses: actions/upload-pages-artifact@v3 + with: + path: docs + - id: deployment + uses: actions/deploy-pages@v4 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..1a99321 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +dist/ +node_modules/ +package-lock.json diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..c03d068 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "all", + "printWidth": 100, + "tabWidth": 2 +} diff --git a/docs/.nojekyll b/docs/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..73021af --- /dev/null +++ b/docs/README.md @@ -0,0 +1,38 @@ +# ViewStack + +**ViewStack** is the frontend layer of the [OpenStacks](https://openstacks.dev) platform — a React dashboard for exploring Indian development data including government schemes, state indicators, budgets, and geographic coverage. + +## Key Features + +- **Dashboard** — Summary cards with scheme, state, indicator, and sector counts +- **States Explorer** — Browse states/UTs with region filtering, population data, and district breakdowns +- **Scheme Browser** — Filter government schemes by sector and level, view budget trends and coverage +- **Indicator Explorer** — Interactive charts comparing development indicators across states + +## Tech Stack + +| Layer | Technology | +|-------|-----------| +| UI Framework | React 19 | +| Routing | React Router 7 | +| Charts | Recharts 3 | +| Build Tool | Vite 5 | +| Testing | Vitest + React Testing Library | +| Linting | ESLint 10 + Prettier | +| API Backend | [BridgeStack](https://github.com/Varnasr/BridgeStack) (FastAPI) | + +## Getting Started + +```bash +# Clone the repo +git clone https://github.com/Varnasr/ViewStack.git +cd ViewStack + +# Install dependencies +npm install + +# Start dev server (requires BridgeStack running on port 8000) +npm run dev +``` + +Visit `http://localhost:5173` to see the dashboard. diff --git a/docs/_coverpage.md b/docs/_coverpage.md new file mode 100644 index 0000000..816ad77 --- /dev/null +++ b/docs/_coverpage.md @@ -0,0 +1,10 @@ +# ViewStack + +> A React dashboard for exploring Indian development data + +- Built with React 19, Recharts 3, React Router 7 +- Part of the [OpenStacks](https://openstacks.dev) ecosystem +- Open source under MIT license + +[Get Started](#getting-started) +[GitHub](https://github.com/Varnasr/ViewStack) diff --git a/docs/_sidebar.md b/docs/_sidebar.md new file mode 100644 index 0000000..fea9c5f --- /dev/null +++ b/docs/_sidebar.md @@ -0,0 +1,23 @@ +- **Getting Started** + - [Introduction](/) + - [Quick Start](quickstart.md) + - [Project Structure](structure.md) + +- **Architecture** + - [Overview](architecture.md) + - [API Client](api-client.md) + - [Components](components.md) + +- **Development** + - [Development Guide](development.md) + - [Testing](testing.md) + - [Code Style](code-style.md) + +- **Best Practices** + - [Accessibility](accessibility.md) + - [Performance](performance.md) + - [Security](security.md) + +- **Contributing** + - [How to Contribute](contributing.md) + - [Commit Conventions](commits.md) diff --git a/docs/accessibility.md b/docs/accessibility.md new file mode 100644 index 0000000..ce96b5b --- /dev/null +++ b/docs/accessibility.md @@ -0,0 +1,33 @@ +# Accessibility + +ViewStack follows web accessibility best practices to ensure the dashboard is usable by everyone. + +## Current Implementation + +### Skip Navigation +A "Skip to main content" link appears on keyboard focus, allowing users to bypass the navigation. + +### ARIA Roles +- `LoadingState` uses `role="status"` with `aria-live="polite"` for screen reader announcements +- `ErrorState` uses `role="alert"` for immediate error announcements +- `FilterBar` uses `role="search"` with `aria-label` on each select +- Navigation uses `aria-label="Main navigation"` +- Footer uses `role="contentinfo"` + +### Semantic HTML +- Tables use `` (visually hidden) for screen readers +- Table headers use `scope="col"` for proper association +- Interactive table rows have `role="button"`, `tabIndex`, and keyboard handlers + +### Keyboard Navigation +- `DataTable` rows with `onRowClick` support Enter and Space key activation +- All interactive elements are focusable and keyboard-operable + +## Best Practices for Contributors + +1. **Always add `aria-label`** to interactive elements without visible text +2. **Use semantic HTML** — prefer `