use vue navbar in react

Makefile

@@ -1,8 +1,10 @@
 .PHONY: run_all run watch test clean prod_build deps dev_db fmt
 
-# Runs the application.
+# Runs the application (builds Vue.js files, starts Next.js dev server, starts Go server).
 run_all:
-	cd frontend && npm run dev-build
+	. ~/.nvm/nvm.sh && \
+    (cd frontend && nvm install 16 && npm run dev-build) && \
+	(cd frontend-v2 && nvm install 18 && nvm use 18 && pnpm dev) &
 	$(MAKE) run
 
 # Just start the go program without recompiling the JS.
@@ -13,15 +15,16 @@ run:
 	export TEMPLATES_DIRECTORY=../templates; \
 	export STATIC_DIRECTORY=../../frontend/static; \
 	export DIST_DIRECTORY=../../frontend/dist; \
-	export JS_DIRECTORY=../../frontend-v2/out; \
+	export JS_V2_DIRECTORY=../../frontend-v2/out; \
+	export NEXT_JS_PROXY_URL=http://localhost:3000; \
 	go run main.go
 
-# Builds the frontend JS.
+# Builds the frontend Vue JS files.
 js:
-	cd frontend && npm run dev-build
+	. ~/.nvm/nvm.sh && nvm use 16 && cd frontend && npm run dev-build
 
-# Automatically rebuild the JS when you edit a JS file. This is more
-# convenient then manually running `make run_all` every time you
+# Automatically rebuilds the Vue JS app when you edit a file. This is
+# more convenient then manually running `make run_all` every time you
 # update the JS. You'll need to do this in a separate terminal.
 watch:
 	cd frontend && npm run watch
@@ -34,6 +37,7 @@ dev_db:
 # Install all deps for this project.
 deps:
 	cd frontend && npm install --legacy-peer-deps
+	cd frontend-v2 && pnpm i
 	cd server/src && go get -t github.com/dxe/adb/...
 
 # Run all tests
@@ -44,6 +48,7 @@ test:
 clean:
 	rm -f server/adb
 	rm -rf frontend/dist
+	rm -rf frontend-v2/out
 
 # Set git hooks
 set_git_hooks:
@@ -71,3 +76,4 @@ prod_build: clean set_git_hooks
 fmt:
 	cd server && gofmt -w `find . -name '*.go'`
 	cd frontend && npx prettier --write *.{ts,vue,js}
+	cd frontend-v2 && pnpm fmt

README.md

@@ -10,9 +10,10 @@ Activist Database Project
 
 The following dependencies are required to run this project and will be already
 installed if using the devcontainer:
- * go
- * node.js v16
- * docker
+
+- go
+- nvm
+- docker
 
 Running this command is required to download all the go and node dependencies:
 
@@ -31,6 +32,7 @@ make dev_db
 ```
 
 If you are using the devcontainer, just run this command in the container:
+
 ```bash
 make dev_db
 ```
@@ -65,12 +67,12 @@ This project uses webpack to compile our frontend files. Frontend
 files that need to be compiled are in `frontend/`, and the compiled
 outputs are in `frontend/dist/`.
 
- * package.json: file with all frontend dependencies
+- package.json: file with all frontend dependencies
 
- * webpack.config.js: configuration file for webpack, which builds the js
+- webpack.config.js: configuration file for webpack, which builds the js
 
- * `make watch`: watch the frontend folder for changes and
-   automatically build the file if anything changes.
+- `make watch`: watch the frontend folder for changes and
+  automatically build the file if anything changes.
 
 The most convenient workflow is to run `make watch` in one terminal
 and `make run` in another one. Then your JS changes will automatically
@@ -93,35 +95,43 @@ be built as you edit them.
 ## Optional environment variables
 
 ### For signing people up to DxE's main mailing list & chapter-specific mailing lists (please reach out to [email protected] to get an API key to sign people up)
+
 - SIGNUP_ENDPOINT
 - SIGNUP_KEY
 
 ### For syncing with a chapter's internal Google Groups (for example, working group lists):
+
 - SYNC_MAILING_LISTS_CONFIG_FILE: relative path to client_secrets.json if syncing with google groups
 - SYNC_MAILING_LISTS_OAUTH_SUBJECT: google account to use to sync
 
 ### For sending emails via SMTP:
+
 - SMTP_HOST
-- SMTP_PORT  
+- SMTP_PORT
 - SMTP_USER
 - SMTP_PASSWORD
 
 ### For sending surveys to event attendees:
+
 - SURVEY_FROM_EMAIL
 - SURVEY_MISSING_EMAIL: Email to send survey errors to
 
 ### Google Cloud client ID/secret for the Members page:
+
 - MEMBERS_CLIENT_ID
 - MEMBERS_CLIENT_SECRET
 
 ### ipgeolocation.io key for finding nearby upcoming events based on a user's IP address (used w/ public-facing API):
+
 - IPGEOLOCATION_KEY
 
 ### Discord config for verifying accounts:
+
 - DISCORD_SECRET
 - DISCORD_BOT_BASE_URL
 - DISCORD_FROM_EMAIL
 - DISCORD_MODERATOR_EMAIL
 
 ### Google Places API Key for finding city information on public-facing forms
+
 - GOOGLE_PLACES_API_KEY

frontend-v2/README.md

@@ -5,36 +5,16 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-
 First, run the development server:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
 pnpm dev
-# or
-bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.

frontend-v2/package.json

@@ -6,22 +6,27 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "fmt": "pnpm prettier --write *.{ts,json}"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.63.0",
+    "ky": "^1.7.4",
+    "next": "15.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.1.3"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "prettier": "^3.4.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }