Initial SSR Migration

.eslintrc.json

@@ -1,35 +1,40 @@
 {
-    "env": {
-      "browser": true,
-      "es2021": true
-    },
-    "extends": [
-      "standard-with-typescript",
-      "plugin:react/recommended",
-      "eslint:recommended",
-      "plugin:@typescript-eslint/eslint-recommended",
-      "plugin:@typescript-eslint/recommended",
-      "prettier",
-      "plugin:prettier/recommended"
-    ],
-    "parserOptions": {
-      "ecmaVersion": "latest"
-    },
-    "plugins": [
-      "react",
-      "@typescript-eslint",
-      "unused-imports",
-      "prettier"
-    ],
-    "rules": {
-      "@typescript-eslint/no-unused-vars": "error",
-      "no-console": "warn",
-      "unused-imports/no-unused-imports": "error",
-      "react/react-in-jsx-scope": "off",
-      "prettier/prettier": "error",
-      "@typescript-eslint/ban-tslint-comment": "off",
-      "react/prop-types": "off",
-      "eqeqeq": "off"
+  "ignorePatterns": [
+    "dist/",
+    "build/",
+    "node_modules/",
+    ".next/",
+    "coverage/",
+    "*.config.js"
+  ],
+  "env": { "browser": true, "es2021": true },
+  "extends": [
+    "standard-with-typescript",
+    "plugin:react/recommended",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": { 
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.json",
+    "ecmaFeatures": {
+      "jsx": true
     }
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react", "@typescript-eslint", "unused-imports", "prettier"],
+  "settings": { "react": { "version": "detect" } },
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "unused-imports/no-unused-imports": "error",
+    "react/react-in-jsx-scope": "off",
+    "prettier/prettier": "error",
+    "@typescript-eslint/ban-tslint-comment": "off",
+    "react/prop-types": "off",
+    "eqeqeq": "off"
   }
-  
+}

.gitignore

@@ -28,4 +28,9 @@ yarn-error.log*
 cypress/screenshots
 cypress/videos
 
-.env.*
+.env
+.env.*
+
+.next
+next-env.d.ts
+.vercel

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "next-devtools": {
+      "command": "npx",
+      "args": ["-y", "next-devtools-mcp@latest"]
+    }
+  }
+}

README.md

@@ -1,28 +1,36 @@
 # Mobility Feeds API UI
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-Using node v18.16.0 (npm v9.5.1)
+This project is built with [Next.js](https://nextjs.org/) using the App Router.
+Using node v24.12.0 (npm v11.6.2) (yarn v1.22.22)
 
 ## Installing packages
 It is preferred to install the packages using `yarn` over `npm install`
 
 ## Configuration variables
-React scripts can inject all necessary environment variables into the application in development mode and the JS bundle files. 
+Next.js can inject all necessary environment variables into the application in development mode and the JS bundle files. 
 Steps to set environment variables:
-- Create a file based on `src/.env.rename_me` with the name `src/.env.{environment}`. Example, `src/.env.dev`.
+- Create a file based on `.env.rename_me` with the name `.env.development` (for dev) or `.env` (for prod)
 - Replace all key values with the desired content.
 - Done! You can now start or build the application with the commands described below.
 
 ### Adding a new environment variable
-To add a new environment variable, add the variable name to the `src/.env.{environment}` and modify the GitHub actions injecting the value per environment. When adding a new variable, make sure that the variable name is prefixed with `REACT_APP`; otherwise, the react app will not read the variable.
+To add a new environment variable, add the variable name to the `.env.{environment}` and modify the GitHub actions injecting the value per environment. When adding a new variable, make sure that the variable name is prefixed with `NEXT_PUBLIC_` for client-side usage; otherwise, the Next.js app will not read the variable on the client side.
 
 ## Available Scripts
 
 In the project directory, you can run:
 
 - Runs the app in the development mode:
+It will automatically use environment variables located in `.env.development`
 ```
-yarn start:dev
+yarn run start:dev
+```
+
+- Running a production build
+It will build then run the application in production and serve it locally using environment variables located in `.env`
+Since it uses the files from the build, it will not hot reload
+```
+yarn run start:prod
 ```
 
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -35,19 +43,19 @@ You will also see any lint errors in the console.
 yarn test
 ```
 
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-- Builds the app locally to the `build` folder:
+- Builds the app for production:
 ```
-yarn build:dev
+yarn build:prod
 ```
 
-It bundles React in production mode for a target Firebase environment.
+It bundles the application in production mode using Next.js optimization.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+The build is optimized and ready for deployment.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+- Start the production build locally:
+```
+yarn start:prod
+```
 
 - Linter check
 ```
@@ -82,24 +90,40 @@ npx firebase hosting:channel:deploy {channel_name}
 Component and E2E tests are executed with [Cypress](https://docs.cypress.io/). Cypress tests are located in the cypress folder.
 
 Cypress useful commands:
-- Run the firebase emulator in a separate terminal
+- E2E tests require a mock server to run to mock api endpoints
 ```
-yarn run firebase:auth:emulator:dev
+yarn run e2e:setup
 ```
-- Run local headless tests
+Will start the dev environment with mock server. It's equal to running 
 ```
-yarn start:dev
+yarn run firebase:auth:emulator:dev + yarn run start:dev:mock"
 ```
 In a different terminal,
 ```
-yarn cypress-run
+yarn e2e:run
 ```
 - Opens Cypress in the interactive GUI
 ```
-yarn cypress-open
+yarn e2e:open
 ```
+
+## API Types Generation
+
+The project includes scripts for generating TypeScript types from OpenAPI specifications:
+
+- Generate API types from main database catalog:
+```
+yarn generate:api-types
+```
+
+- Generate GBFS validator types:
+```
+yarn generate:gbfs-validator-types
+```
+
 ## References
 
- - You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+ - You can learn more in the [Next.js documentation](https://nextjs.org/docs).
  - To learn React, check out the [React documentation](https://reactjs.org/).
  - [Firebase Documentation](https://firebase.google.com/docs).
+ - [next-intl Documentation](https://next-intl-docs.vercel.app/) for internationalization.

cypress.config.ts

@@ -1,18 +1,19 @@
 import { defineConfig } from 'cypress';
 import * as dotenv from 'dotenv';
-const localEnv = dotenv.config({ path: './src/.env.dev' }).parsed;
-const ciEnv = dotenv.config({ path: './src/.env.test' }).parsed;
+const localEnv = dotenv.config({ path: './.env.development' }).parsed || {};
+const ciEnv = dotenv.config({ path: './.env.test' }).parsed || {};
 
 const isEnvEmpty = (obj) => {
-  return Object.keys(obj).length === 0;
+  return !obj || Object.keys(obj).length === 0;
 };
 
 const chosenEnv = isEnvEmpty(localEnv) ? ciEnv : localEnv;
 
 export default defineConfig({
   env: chosenEnv,
   e2e: {
-    baseUrl: 'http://localhost:3000',
+    // Use CYPRESS_BASE_URL env var if set (for e2e:run/e2e:open), otherwise default to 3000
+    baseUrl: process.env.CYPRESS_BASE_URL || 'http://localhost:3000',
   },
   video: true,
 });

cypress/e2e/addFeedForm.cy.ts

@@ -8,44 +8,53 @@ describe('Add Feed Form', () => {
     });
     cy.visit('/');
     cy.get('[data-testid="home-title"]').should('exist');
-    cy.createNewUserAndSignIn('cypressTestUser@mobilitydata.org', 'BigCoolPassword123!');
+    cy.createNewUserAndSignIn(
+      'cypressTestUser@mobilitydata.org',
+      'BigCoolPassword123!',
+    );
 
     cy.get('[data-cy="accountHeader"]').should('exist'); // assures that the user is signed in
     cy.visit('/contribute');
     // Assures that the firebase remote config has loaded for the first test
     // Optimizations can be made to make the first test run faster
     // Long timeout is to assure no flakiness
-    cy.get('[data-cy=isOfficialProducerYes]', { timeout: 25000 }).should('exist');
+    cy.get('[data-cy=isOfficialProducerYes]', { timeout: 25000 }).should(
+      'exist',
+    );
   });
 
   describe('Success Flows', () => {
     it('should submit a new gtfs scheduled feed as official producer', () => {
       cy.get('[data-cy=isOfficialProducerYes]').click({ force: true });
       cy.muiDropdownSelect('[data-cy=isOfficialFeed]', 'yes');
-      cy.get('[data-cy=feedLink] input').type('https://example.com/feed', { force: true });
+      cy.get('[data-cy=feedLink] input').type('https://example.com/feed', {
+        force: true,
+      });
       cy.get('[data-cy=submitFirstStep]').click();
       cy.url().should('include', '/contribute?step=2');
       // step 2
       cy.muiDropdownSelect('[data-cy=countryDropdown]', 'CA');
       cy.get('[data-cy=secondStepSubmit]').click();
       cy.url().should('include', '/contribute?step=3');
       // step 3: fill required emptyLicenseUsage if present
-      cy.get('body').then($body => {
+      cy.get('body').then(($body) => {
         if ($body.find('[data-cy="emptyLicenseUsage"]').length) {
           cy.get('[data-cy="emptyLicenseUsage"]').click();
           cy.get('li').should('have.length.at.least', 1);
-          cy.get('li').then($lis => {
+          cy.get('li').then(($lis) => {
             const texts = $lis.map((i, el) => el.textContent).get();
             cy.log('Dropdown options:', texts.join(', '));
-            expect(texts).to.include('Not sure');
+            cy.wrap(texts).should('include', 'Not sure');
           });
           cy.contains('li', 'Not sure').click();
         }
       });
       cy.get('[data-cy=thirdStepSubmit]').click();
       cy.url().should('include', '/contribute?step=4');
       // step 4
-      cy.get('[data-cy=dataProducerEmail] input').type('audio@stm.com', { force: true });
+      cy.get('[data-cy=dataProducerEmail] input').type('audio@stm.com', {
+        force: true,
+      });
       cy.muiDropdownSelect('[data-cy=interestedInAudit]', 'no');
       cy.muiDropdownSelect('[data-cy=logoPermission]', 'yes');
       cy.get('[data-cy=fourthStepSubmit]').click();
@@ -86,7 +95,9 @@ describe('Add Feed Form', () => {
       // Step 1 values
       cy.get('[data-cy=isOfficialProducerYes]').click();
       cy.muiDropdownSelect('[data-cy=isOfficialFeed]', 'yes');
-      cy.get('[data-cy=feedLink] input').type('https://example.com/feed', { force: true });
+      cy.get('[data-cy=feedLink] input').type('https://example.com/feed', {
+        force: true,
+      });
       cy.get('[data-cy=oldFeedLink] input').type('https://example.com/feedOld');
       cy.get('[data-cy=submitFirstStep]').click();
       // Step 2
@@ -135,19 +146,27 @@ describe('Add Feed Form', () => {
     cy.get('[data-cy=unofficialDesc]').should('exist');
     cy.get('[data-cy=updateFreq]').should('exist');
     // Fill in the new fields (ensure only one element is targeted)
-    cy.get('[data-cy=unofficialDesc] textarea').first().type('For research purposes', { force: true });
-    cy.get('[data-cy=updateFreq] input').first().type('every month', { force: true });
+    cy.get('[data-cy=unofficialDesc] textarea')
+      .first()
+      .type('For research purposes', { force: true });
+    cy.get('[data-cy=updateFreq] input')
+      .first()
+      .type('every month', { force: true });
     // Continue with the rest of the form
     cy.muiDropdownSelect('[data-cy=dataType]', 'gtfs');
-    cy.get('[data-cy=feedLink] input').type('https://example.com/feed', { force: true });
+    cy.get('[data-cy=feedLink] input').type('https://example.com/feed', {
+      force: true,
+    });
     cy.get('[data-cy=submitFirstStep]').click();
     cy.url().should('include', '/contribute?step=2');
   });
 
   it('should show and require emptyLicenseUsage with Unsure option if official producer and no license', () => {
     cy.get('[data-cy=isOfficialProducerYes]').click();
     cy.muiDropdownSelect('[data-cy=isOfficialFeed]', 'yes');
-    cy.get('[data-cy=feedLink] input').type('https://example.com/feed', { force: true });
+    cy.get('[data-cy=feedLink] input').type('https://example.com/feed', {
+      force: true,
+    });
     cy.get('[data-cy=submitFirstStep]').click();
     cy.url().should('include', '/contribute?step=2');
     // step 2: leave license blank
@@ -163,11 +182,11 @@ describe('Add Feed Form', () => {
     // Open dropdown and check options with debug output
     cy.get('[data-cy="emptyLicenseUsage"]').click();
     cy.get('li').should('have.length.at.least', 1);
-    cy.get('li').then($lis => {
+    cy.get('li').then(($lis) => {
       const texts = $lis.map((i, el) => el.textContent).get();
       // Debug output
       cy.log('Dropdown options:', texts.join(', '));
-      expect(texts).to.include('Not sure');
+      cy.wrap(texts).should('include', 'Not sure');
     });
     cy.contains('li', 'Not sure').click();
     cy.get('[data-cy="thirdStepSubmit"]').click();