Skip to content
BranchesTags

Repository files navigation

Hamplard — Frontend Repo

Next.js 14 frontend for Africa's practical skills online learning platform

This is Repo 3 of 3 in the Hamplard project:

Repo Description
hamplard-contract Soroban smart contract — course payments + certificates
hamplard-backend NestJS API — content, progress, users
hamplard-frontend ← you are here Next.js 14 — student and instructor portal

Pages

Route Auth Description
/ — Public course marketplace with search and category filters
/auth/login — Freighter wallet connect with student/instructor role selection
/dashboard/courses ✓ Student: enrolled courses. Instructor: redirects to instructor dashboard
/dashboard/courses/:id — Course detail page — overview, curriculum, enroll button
/dashboard/courses/:id/learn ✓ Video player with lesson sidebar, progress tracking, completion
/dashboard/courses/create ✓ INSTRUCTOR Create course form with on-chain registration
/dashboard/instructor ✓ INSTRUCTOR Revenue stats + my courses list
/dashboard/certificates ✓ Student's earned certificates with copy + share links
/certificates/:id — Public certificate verification page (no login needed)
/notifications ✓ Notification feed with colour-coded types

Design System

Hamplard's foundational token system is documented in:

  • src/styles/tokens.css (source of truth for CSS variables)
  • design-system-tokens.md (hex/RGB usage notes + WCAG checks)
  • typography-system.md (modular type scale and semantic text roles)

Typography:

  • Display headings: Playfair Display (serif)
  • Body: DM Sans
  • Code/IDs: JetBrains Mono

Key Features

Public course marketplace (/) — browse, search, and filter active courses by category and level without signing in. The homepage shows a category pill bar with all eight Hamplard skill areas.

Role-aware login (/auth/login) — the login page has a student/instructor toggle. First-time users pick their role here and it is set on their account.

Course learn page (/dashboard/courses/:id/learn) — full-screen layout with a lesson sidebar (modules expanded/collapsed, completed lessons marked with checkmarks) and a main content area with the video player. Students click "Mark complete" after each lesson. Progress percentage updates live.

Certificate verification page (/certificates/:id) — a public, shareable page showing a gold certificate with the student's name, course title, instructor, issue date, and blockchain verification status. Uses server-side rendering for fast sharing.

Instructor course creation — three-step flow: fill in course details → upload thumbnail → register on Stellar via Freighter → submit for admin review. The form generates a unique courseId automatically.

Setup

cp .env.example .env.local   # fill in contract ID + backend URL
npm install
npm run dev                   # → http://localhost:3001

Install Freighter and switch it to Testnet.

Testing

Unit & Component Tests (Vitest)

npm run test

End-to-End Tests (Playwright)

Run all E2E tests across Chromium, Firefox, and WebKit:

npm run test:e2e

Open the Playwright UI for interactive test authoring and debugging:

npm run test:e2e:ui

Visual Regression Tests

Visual regression tests use Playwright's toHaveScreenshot to catch accidental layout changes on the homepage and course detail page. Baseline screenshots are stored in e2e/screenshots/.

Run visual tests only

npx playwright test --project=visual

This runs tests tagged with @visual across three viewports:

  • Mobile: 375px × 667px
  • Tablet: 768px × 1024px
  • Desktop: 1280px × 800px

Update baseline screenshots

After making intentional UI changes, regenerate and commit the new baselines:

npx playwright test --update-snapshots

Then commit the updated files in e2e/screenshots/ to the repository.

Note: Baseline screenshots must be committed to the repo before CI can pass. Run --update-snapshots locally on the same OS/architecture used by CI (Ubuntu Linux) to avoid platform-specific rendering differences.

CI Integration

Visual regression tests run automatically in GitHub Actions on every push and pull request. If a visual diff is detected, the CI job will fail and upload:

  • The Playwright HTML report (with side-by-side diffs)
  • Test traces for debugging

License

MIT TODO: Add and Configure robots.txt

  1. Project Discovery

  2. Inspect the repository structure.

  3. Confirm the project uses Next.js.

  4. Confirm the project uses Next.js 14.

  5. Confirm the project uses the App Router.

  6. Locate the "src/app" directory.

  7. Confirm "src/app" contains the application routes.

  8. Check whether a "robots.ts" file already exists.

  9. Check whether a "robots.txt" file already exists.

  10. Check whether another robots implementation exists elsewhere.

  11. Search for existing Metadata API usage.

  12. Search for existing "MetadataRoute" imports.

  13. Search for an existing sitemap implementation.

  14. Locate "src/app/sitemap.ts" if present.

  15. Review the existing sitemap configuration.

  16. Confirm the canonical site domain.

  17. Confirm the required sitemap URL.

  18. Review the project's route structure.

  19. Identify dashboard routes.

  20. Identify checkout routes.

  21. Identify API routes.

  22. Identify authentication routes.

  23. Identify Next.js internal routes.

  24. Identify public course routes.

  25. Identify category routes.

  26. Identify the about page.

  27. Identify the teach page.

  28. Identify the teams page.

  29. Review existing route conventions.

  30. Review existing tests.

  31. Review existing build scripts.

  32. Review existing development scripts.

  33. Review linting configuration.

  34. Review TypeScript configuration.

  35. Confirm no custom robots middleware already exists.

  36. Confirm no static robots file conflicts with the new route.

  37. Check Git working tree status.

  38. Confirm the task can be implemented without unrelated changes.

  39. Identify the issue number for the PR.

  40. Record the required PR closing statement.

  41. Define the implementation scope.

  42. robots.ts Creation

  43. Create a new file at "src/app/robots.ts".

  44. Use the Next.js Metadata API.

  45. Import "MetadataRoute" from "next".

  46. Use the "MetadataRoute.Robots" type.

  47. Define the robots function.

  48. Ensure the function returns the correct robots metadata structure.

  49. Keep the implementation server-side compatible.

  50. Avoid client-side directives.

  51. Do not add unnecessary dependencies.

  52. Do not create a custom API route for robots.txt.

  53. Do not manually construct the robots.txt response.

  54. Use the App Router MetadataRoute implementation.

  55. Keep the file limited to robots configuration.

  56. Add appropriate typing.

  57. Ensure TypeScript can infer the return structure correctly.

  58. Ensure the implementation follows Next.js 14 conventions.

  59. Ensure the generated route is "/robots.txt".

  60. Ensure no additional route handler is required.

  61. Confirm Next.js generates the response automatically.

  62. Keep the implementation readable.

  63. Keep the implementation minimal.

  64. Avoid unnecessary comments.

  65. Avoid hard-coded route logic outside the robots configuration.

  66. Avoid introducing unrelated metadata changes.

  67. Verify the file is located exactly under "src/app".

  68. Verify the filename is exactly "robots.ts".

  69. Verify the file extension is TypeScript.

  70. Verify the implementation exports the robots function correctly.

  71. Verify the implementation uses "MetadataRoute.Robots".

  72. Confirm the basic implementation compiles.

  73. Allow Rules

  74. Configure the root path "/" as allowed.

  75. Configure "/courses" as allowed.

  76. Configure "/courses/*" as allowed.

  77. Configure "/categories/*" as allowed.

  78. Configure "/about" as allowed.

  79. Configure "/teach" as allowed.

  80. Configure "/teams" as allowed.

  81. Ensure the root public site remains crawlable.

  82. Ensure the courses landing page remains crawlable.

  83. Ensure course detail pages remain crawlable.

  84. Ensure category pages remain crawlable.

  85. Ensure the about page remains crawlable.

  86. Ensure the teach page remains crawlable.

  87. Ensure the teams page remains crawlable.

  88. Confirm wildcard syntax is represented correctly.

  89. Confirm "/courses/*" covers course detail routes.

  90. Confirm "/categories/*" covers category detail routes.

  91. Avoid accidentally disallowing public pages.

  92. Avoid adding unrelated public routes to the allowlist.

  93. Preserve the exact required allowlist.

  94. Confirm "/" is not accidentally overridden by a broad disallow.

  95. Confirm public pages can still be crawled.

  96. Confirm public course content can be discovered.

  97. Confirm category content can be discovered.

  98. Confirm the allow rules generate valid robots directives.

  99. Confirm rules are compatible with search-engine parsing.

  100. Confirm wildcard behavior is valid.

  101. Ensure no duplicate allow directives are generated unnecessarily.

  102. Ensure the final output reflects the intended public routes.

  103. Document any framework-specific wildcard representation if necessary.

  104. Disallow Rules

  105. Configure "/dashboard/*" as disallowed.

  106. Configure "/checkout" as disallowed.

  107. Configure "/api/*" as disallowed.

  108. Configure "/auth/*" as disallowed.

  109. Configure "/_next/" as disallowed.

  110. Ensure dashboard pages cannot be crawled.

  111. Ensure dashboard subroutes cannot be crawled.

  112. Ensure checkout is excluded from crawling.

  113. Ensure API routes are excluded from crawling.

  114. Ensure API subroutes are excluded from crawling.

  115. Ensure authentication routes are excluded from crawling.

  116. Ensure authentication subroutes are excluded from crawling.

  117. Ensure Next.js internal assets are excluded where required.

  118. Confirm the dashboard wildcard is represented correctly.

  119. Confirm the API wildcard is represented correctly.

  120. Confirm the authentication wildcard is represented correctly.

  121. Confirm the "/_next/" path is represented correctly.

  122. Ensure no public route is accidentally disallowed.

  123. Avoid broad disallow rules such as "/".

  124. Avoid disallowing "/courses".

  125. Avoid disallowing "/categories".

  126. Avoid disallowing "/about".

  127. Avoid disallowing "/teach".

  128. Avoid disallowing "/teams".

  129. Confirm the checkout path is specifically excluded.

  130. Confirm dashboard paths are excluded before crawling.

  131. Confirm API paths are excluded before crawling.

  132. Confirm auth paths are excluded before crawling.

  133. Confirm internal Next.js paths are excluded.

  134. Verify disallow rules match the acceptance criteria.

  135. User-Agent Configuration

  136. Configure the robots policy for all search-engine crawlers.

  137. Use the appropriate wildcard user-agent configuration.

  138. Ensure the rules apply to general crawlers.

  139. Ensure the rules are not limited to a single search engine.

  140. Ensure the generated output contains the intended user-agent directive.

  141. Avoid creating unnecessary crawler-specific rules.

  142. Avoid duplicate user-agent sections.

  143. Confirm the allow rules apply to the intended crawler group.

  144. Confirm the disallow rules apply to the intended crawler group.

  145. Confirm the output remains standards-compatible.

  146. Keep crawler configuration simple.

  147. Avoid adding unsupported directives.

  148. Avoid adding crawl-delay unless explicitly required.

  149. Avoid adding host directives.

  150. Avoid adding unrelated SEO configuration.

  151. Confirm the user-agent configuration is generated correctly.

  152. Confirm the final output is readable.

  153. Confirm crawlers can interpret the rules.

  154. Confirm the implementation matches Next.js MetadataRoute behavior.

  155. Document the intended crawler scope if project documentation requires it.

  156. Sitemap Configuration

  157. Add the sitemap URL to the robots configuration.

  158. Use "https://hamplard.com/sitemap.xml".

  159. Ensure the sitemap URL is absolute.

  160. Ensure the URL uses HTTPS.

  161. Ensure the hostname is exactly "hamplard.com".

  162. Ensure the path is exactly "/sitemap.xml".

  163. Ensure the sitemap directive is generated.

  164. Ensure the sitemap appears in "/robots.txt".

  165. Confirm there are no typos in the domain.

  166. Confirm there is no trailing whitespace.

  167. Confirm the sitemap URL is not relative.

  168. Confirm the sitemap URL is not accidentally duplicated.

  169. Check whether an existing sitemap implementation uses the same domain.

  170. Keep robots and sitemap configuration consistent.

  171. Verify the sitemap directive follows the generated robots syntax.

  172. Confirm search engines can identify the sitemap.

  173. Confirm the sitemap directive is not placed inside an invalid user-agent rule.

  174. Confirm the generated output contains exactly the required sitemap.

  175. Avoid adding unrelated sitemap URLs.

  176. Verify the sitemap requirement is fully satisfied.

  177. Local Development Validation

  178. Start the Next.js development server.

  179. Confirm the application starts without errors.

  180. Open "/robots.txt".

  181. Confirm "/robots.txt" returns HTTP 200.

  182. Confirm the response is plain text.

  183. Confirm the generated content is not HTML.

  184. Confirm the user-agent directive exists.

  185. Confirm the root allow rule exists.

  186. Confirm the courses allow rule exists.

  187. Confirm course wildcard behavior is represented.

  188. Confirm categories wildcard behavior is represented.

  189. Confirm "/about" is allowed.

  190. Confirm "/teach" is allowed.

  191. Confirm "/teams" is allowed.

  192. Confirm dashboard is disallowed.

  193. Confirm checkout is disallowed.

  194. Confirm API is disallowed.

  195. Confirm auth is disallowed.

  196. Confirm "/_next/" is disallowed.

  197. Confirm the sitemap URL is present.

  198. Confirm the sitemap URL is correct.

  199. Confirm there are no unexpected directives.

  200. Confirm there are no duplicate directives.

  201. Confirm there are no TypeScript runtime errors.

  202. Confirm hot reload detects changes if applicable.

  203. Confirm the generated robots output updates after changes.

  204. Test the route after restarting the dev server.

  205. Test the route in a clean browser request.

  206. Test the route using an HTTP client if available.

  207. Record the final generated output for review.

  208. Automated Testing

  209. Search for existing metadata route tests.

  210. Determine the project's preferred testing approach.

  211. Add a test for "/robots.txt".

  212. Verify the route exists.

  213. Verify the route returns successfully.

  214. Verify the output contains the user-agent directive.

  215. Verify the root path is allowed.

  216. Verify "/courses" is allowed.

  217. Verify course wildcard paths are allowed.

  218. Verify category wildcard paths are allowed.

  219. Verify "/about" is allowed.

  220. Verify "/teach" is allowed.

  221. Verify "/teams" is allowed.

  222. Verify "/dashboard/*" is disallowed.

  223. Verify "/checkout" is disallowed.

  224. Verify "/api/*" is disallowed.

  225. Verify "/auth/*" is disallowed.

  226. Verify "/_next/" is disallowed.

  227. Verify the sitemap URL is included.

  228. Verify the exact sitemap URL.

  229. Verify no required allow rule is missing.

  230. Verify no required disallow rule is missing.

  231. Verify the response format.

  232. Verify the generated robots configuration is deterministic.

  233. Ensure tests do not depend on production infrastructure.

  234. Ensure tests do not require external network access.

  235. Ensure tests are repeatable.

  236. Ensure tests use the project's existing testing conventions.

  237. Add regression coverage for future changes.

  238. Confirm the tests pass locally.

  239. TypeScript & Build Verification

  240. Run the project's type-check command.

  241. Confirm "robots.ts" passes TypeScript validation.

  242. Confirm the "MetadataRoute.Robots" type is valid.

  243. Confirm there are no implicit "any" errors.

  244. Confirm there are no unused imports.

  245. Confirm there are no unused variables.

  246. Run the project linter.

  247. Fix any lint errors caused by the new file.

  248. Run formatting checks.

  249. Format the new file according to project standards.

  250. Run the production build.

  251. Confirm the build completes successfully.

  252. Confirm "/robots.txt" is generated correctly by the production build.

  253. Confirm the App Router recognizes the metadata route.

  254. Confirm no route conflicts occur.

  255. Confirm no existing sitemap functionality breaks.

  256. Confirm no existing pages break.

  257. Confirm no unrelated build warnings are introduced.

  258. Review the final build output.

  259. Confirm the implementation is production-ready.

  260. Final Review & PR

  261. Review the complete Git diff.

  262. Confirm only intended files were changed.

  263. Confirm "src/app/robots.ts" is included.

  264. Confirm ".env" files were not modified unnecessarily.

  265. Confirm no generated files were accidentally committed.

  266. Confirm no dependencies were added unnecessarily.

  267. Confirm no unrelated refactoring was included.

  268. Confirm the implementation follows Next.js 14.

  269. Confirm the implementation uses "MetadataRoute.Robots".

  270. Confirm App Router requirements are satisfied.

  271. Confirm all public pages are allowed.

  272. Confirm all specified private paths are disallowed.

  273. Confirm the sitemap URL is correct.

  274. Confirm "/robots.txt" works in development.

  275. Confirm "/robots.txt" works in production build validation.

  276. Confirm automated tests pass.

  277. Confirm linting passes.

  278. Confirm type checking passes.

  279. Confirm build passes.

  280. Confirm acceptance criteria are fully satisfied.

  281. PR Description

  282. Create the pull request.

  283. Use a clear PR title.

  284. Summarize the robots.txt implementation.

  285. Mention that the App Router Metadata API is used.

  286. Mention the public routes that remain crawlable.

  287. Mention the private routes that are disallowed.

  288. Mention the sitemap configuration.

  289. Mention "/robots.txt" validation.

  290. Mention automated test coverage.

  291. Include the required issue-closing syntax.

  292. Replace "[issue_id]" with the actual issue number.

  293. Ensure the PR description contains "Closes #[issue_id]".

  294. Ensure the closing syntax is not accidentally written as plain placeholder text.

  295. Verify GitHub recognizes the issue-closing syntax.

  296. Include testing performed.

  297. Include build/type-check results.

  298. Include any relevant screenshots or output if required.

  299. Confirm the PR description is concise.

  300. Confirm the PR description accurately describes the changes.

  301. Confirm no unrelated work is mentioned as completed.

  302. Final Acceptance Checklist

  303. "src/app/robots.ts" exists.

  304. "MetadataRoute.Robots" is used.

  305. "/robots.txt" returns the expected content.

  306. Dashboard routes are disallowed.

  307. API routes are disallowed.

  308. Authentication routes are disallowed.

  309. Checkout is disallowed.

  310. Public pages are allowed.

  311. "https://hamplard.com/sitemap.xml" is included.

  312. PR description contains "Closes #[issue_id]" and the task is ready for review.

About

Next.js app for browsing courses, learning, teaching, and verifying certificates; signs payments via wallet.

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

56 forks
Report repository

Releases

Packages

Contributors

Languages