Skip to content

Complete MVP: language context, enhanced reporting, new pages#1

Open
abhiyankhanal wants to merge 2 commits into
CodeforNepal:mainfrom
abhiyankhanal:feat/complete-mvp
Open

Complete MVP: language context, enhanced reporting, new pages#1
abhiyankhanal wants to merge 2 commits into
CodeforNepal:mainfrom
abhiyankhanal:feat/complete-mvp

Conversation

@abhiyankhanal
Copy link
Copy Markdown

Summary

  • Global language context — language toggle in header now switches all pages simultaneously (was broken: each component had its own isolated state)
  • Enhanced reporting form — file upload for evidence, all 77 Nepal districts, incident date field, inline validation with error messages, toast notifications, localStorage draft auto-save, working "Submit Another Report" reset, visual step indicators with checkmarks
  • New pages/about (mission, values, Code for Nepal) and /support (contribute code, report issues, spread the word, donate)
  • Dark mode — ThemeProvider wired into layout with toggle in header
  • Fixed navigation — Hero CTA buttons link to /report and /explore, footer cleaned up to only reference existing pages
  • Cleanup — removed stale styles/globals.css duplicate, updated README with accurate setup instructions, project structure, and usage guide

Changes Made

New Files

  • lib/language-context.tsx — React Context for global en/ne language state
  • lib/districts.ts — All 77 Nepal districts organized by province
  • app/about/page.tsx + components/about-content.tsx — About page
  • app/support/page.tsx + components/support-content.tsx — Support page

Modified Files

  • app/layout.tsx — Added ThemeProvider, LanguageProvider, Sonner Toaster
  • components/header.tsx — Uses language context, added dark mode toggle, Next.js Link
  • components/footer.tsx — Uses language context, removed dead links
  • components/hero-section.tsx — Uses language context, CTA buttons are now Links
  • components/features-section.tsx — Uses language context, "Get Started" links to /report
  • components/impact-section.tsx — Uses language context
  • components/reporting-form.tsx — Major enhancement (see below)
  • components/data-dashboard.tsx — Uses language context
  • components/educational-content.tsx — Uses language context
  • README.md — Complete rewrite with accurate instructions

Reporting Form Enhancements

  • Real file upload via hidden <input type="file"> with file list display and removal
  • All 77 Nepal districts (was 20)
  • Incident date/time field (new)
  • Inline validation with red borders and error messages
  • Description requires minimum 20 characters
  • Toast notifications on file add and form submit (sonner)
  • Auto-save drafts to localStorage with "Draft saved" indicator
  • "Submit Another Report" properly resets all state
  • Visual step progress: numbered circles with checkmarks on completed steps

Deleted Files

  • styles/globals.css — stale duplicate of app/globals.css

Testing

  • Run npm install && npm run dev and verify all 7 pages load
  • Toggle language in header — verify all pages switch simultaneously
  • Toggle dark mode in header — verify theme applies globally
  • Walk through all 5 report steps — verify validation messages appear
  • Upload a file on step 3 — verify it appears in the file list
  • Refresh mid-report — verify draft is restored from localStorage
  • Submit report — verify toast notification and success screen
  • Click "Submit Another Report" — verify form resets completely
  • Verify /about and /support pages render correctly
  • Run npm run build — verify clean production build

…w pages

- Add LanguageProvider context so language toggle works across all pages
- Refactor all components to use shared language context instead of local state
- Add /about page with mission, values, and Code for Nepal info
- Add /support page with ways to contribute (code, issues, sharing, donations)
- Enhanced reporting form: file upload, all 77 Nepal districts, incident date
  field, inline validation with error messages, description min-length check,
  toast notifications via sonner, localStorage draft auto-save, working
  "Submit Another Report" reset, visual step indicators with checkmarks
- Wire up ThemeProvider in layout with dark mode toggle in header
- Fix Hero CTA buttons to link to /report and /explore using Next.js Link
- Fix footer: remove dead links, point only to existing pages
- Delete stale duplicate styles/globals.css
- Update README with accurate setup instructions, project structure, and usage
Set up vitest with React Testing Library and jsdom. 28 tests across 5 files:

- language-context: default language, toggle, shared state between consumers,
  error when used outside provider
- districts: verifies all 77 districts, no duplicates, major districts present
- reporting-form: step rendering, validation errors, step navigation,
  localStorage draft save/restore, conditional amount field, incident date input
- header: brand name, navigation links and hrefs, language toggle switching nav
- hero-section: heading, CTA links to /report and /explore, stat cards, trust
  indicators
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant