Skip to content

Conversation

@Alessandro100
Copy link
Contributor

@Alessandro100 Alessandro100 commented Jan 21, 2026

This PR introduces the migration to a SSR application using NextJs. For this PR, the Feed Detail Page (partially) and the About page were made server components as a proof of concept. This PR is not ready for PROD but as a great benchmark to keep development on SSR.

High Level Changes

  • Introduced NextJs (SSR Library)
  • Updating to React 19
  • Updating to MUI 7
  • Updating to using Node 24
  • Updated i18n library for SSR support
  • Removed Leaflet in favour of maplibre (full cleanup to come)
  • Updated Authentication for SSR support (to continue)
  • Feed Detail page -> started SSR support (to continue)

Important follow up tasks

  • Revisiting Firebase Remote Configs to be SSR ready
  • Updating the Authentication system for Firebase Session Management
  • Setting up CICD

Future Improvements

  • Better use of MUI theme in RSC
  • More use of code splitting / lazy loading

Developer Tooling & Configuration:

  • Updated ESLint configuration to auto-detect React version for better linting compatibility. (.eslintrc.json)
  • Added a Next.js-compatible Jest configuration for improved unit testing support. (jest.config.ts)
  • Removed the old Babel config, which is no longer needed with Next.js. (babel.config.js)
  • Included vercel-react-best-practices skills to improve copilot Agent code + review

Testing & E2E Updates:

  • Refactored Cypress E2E and support files to use new Next.js environment variable conventions (NEXT_PUBLIC_*), updated test routes to match Next.js routing, and improved test reliability with more robust selectors and timeouts. (cypress.config.ts, cypress/e2e/addFeedForm.cy.ts, cypress/e2e/feeds.cy.ts, cypress/support/commands.ts) [1] [2] [3] [4] [5] [6] [7]
  • Updated fixture data to include new fields for validation reports, supporting new UI features and tests. (cypress/fixtures/gtfs_feed_test-516.json)

Documentation Improvements:

  • Overhauled README.md to reflect the migration to Next.js, updated environment variable instructions, added new scripts, and documented API type generation and E2E testing workflows. (README.md) [1] [2] [3]

These changes collectively modernize the project, streamline development and deployment, and ensure tests and documentation are aligned with the new Next.js architecture.

@Alessandro100 Alessandro100 self-assigned this Jan 21, 2026
@@ -0,0 +1,1801 @@
openapi: 3.0.0
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't this file be obtained from the mobiity-feed-api project?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's copy and pasted from the mobiity-feed-api repo manually. It's one of the drawbacks of separating the repos. For the fastest fix this is it. Maybe we can think of a better long term solution ex: publishing a github asset and having the frontend consume it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand that the PR is big enough as it is.
But I would suggest sometimes in the future maybe to get the file directly from git: https://github.com/MobilityData/mobility-feed-api/blob/main/docs/DatabaseCatalogAPI.yaml

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes I agree, for that to happen we would have to publish some sort of asset. I'll make a follow up ticket

@davidgamez
Copy link
Member

I found a few issues testing locally

  • The URL http://localhost:3000/feeds/gtfs/map renders a 404 page.
  • The links to the notices(errors, warnings, and infos) don't go anywhere. Clicking those buttons doesn't open the validator's report. The links in the list of datasets at the bottom of the page work as expected.
Screenshot 2026-01-28 at 9 39 30 AM
  • The account details links(http://localhost:3000/account) don't render the expected page, it re-render the current page.
  • When the dark theme is selected, switching from page to page, a white screen is visible, creating a "flashing effec.t"

As this is not production-ready, I suggest merging it and addressing the mentioned issues in a separate PR.

@Alessandro100
Copy link
Contributor Author

For The URL http://localhost:3000/feeds/gtfs/map renders a 404 page. this is expected behaviour as that is not a valid url. There is a link that I found that brings you to that url that needs to be fixed

The links to the notices: yes this is a small fix

Account detail link: good find

For the theme, this is a known issue that can be solved with MUI CSS Variables: https://mui.com/material-ui/customization/css-theme-variables/overview/. It's a decent effort to make this switch

Agreed about merging it and addressing in other tickets

@davidgamez davidgamez merged commit 068b0d9 into main Jan 28, 2026
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.

4 participants