Merge 3dfba9701d into af7f1380bc

DEVELOPMENT.md

@@ -2,7 +2,7 @@
 
 This is probably outdated.
 
-Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the front-end and back-end, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety.
+Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the backend, [Vite with React](https://vite.dev/) for the frontend, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety.
 
 ## Getting started
 
@@ -14,21 +14,21 @@ $ cd tomodachi-share
 $ pnpm install
 ```
 
-Prisma types are generated automatically, however, sometimes you might need to:
+Prisma types are generated automatically, however, if you changed the schema or need to trigger a manual refresh:
 
 ```bash
 # Generate Prisma client types
-$ pnpm prisma generate
+$ pnpm --filter backend prisma generate
 
 # Or, if you've added new database properties
-$ pnpm prisma migrate dev
-$ pnpm prisma generate
+$ pnpm --filter backend prisma migrate dev
+$ pnpm --filter backend prisma generate
 ```
 
 I recommend opting out of Next.js' telemetry program but it is not a requirement.
 
 ```bash
-$ pnpm exec next telemetry disable
+$ pnpm --filter backend exec next telemetry disable
 ```
 
 ## Environment variables
@@ -62,10 +62,11 @@ services:
 After starting the docker applications, apply TomodachiShare's database schema migrations.
 
 ```bash
-$ pnpm prisma migrate dev
+$ pnpm --filter backend prisma migrate dev
 ```
 
-After, make a copy of the `.env.example` file and rename it to `.env`. The database variables should be pre-configured, but you'll need to fill in the rest of the variables.
+After, in both the backend and frontend, make a copy of the `.env.example` file and rename it to `.env`.
+For the backend, the database variables should be pre-configured, but you'll need to fill in the rest of the variables.
 
 For the `AUTH_SECRET`, run the following in the command line:
 
@@ -74,7 +75,7 @@ $ pnpx auth secret
 ```
 
 > [!NOTE]
-> This command may put the secret in a file named `.env.local`, if that happens copy it and paste it into `.env`
+> This command may put the secret in a file named `.env.local`, if that happens copy it and paste it into `backend/.env`
 
 Now, let's get the Discord and GitHub authentication set up. If you don't plan on editing any code associated with authentication, you likely only need to setup one of these services.
 
@@ -84,10 +85,16 @@ For GitHub, navigate to your profile settings, then 'Developer Settings', and cr
 
 Google is annoying so I'm not explaining it.
 
-After configuring the environment variables, you can run a development server.
+## Development Server
+
+The frontend and backend need to be ran simulatenously, therefore you need two separate terminals.
 
 ```bash
-$ pnpm dev
+# Terminal 1
+$ pnpm --filter backend dev
+
+# Terminal 2
+$ pnpm --filter frontend dev
 ```
 
 ## Building
@@ -96,8 +103,10 @@ It's a good idea to build the project locally before submitting a pull request.
 
 ```bash
 # Build the project
-$ pnpm build
+$ pnpm --filter backend build
+$ pnpm --filter frontend build
 
-# Run the built version
-$ pnpm start
+# Run the built version (Note: Vite likes to change the port when this happens, so you probably need to change both .env files)
+$ pnpm --filter backend start
+$ pnpm --filter frontend build
 ```

frontend/.env.example

@@ -0,0 +1,4 @@
+VITE_BASE_URL="http://localhost:5173"
+VITE_API_URL="http://localhost:3000"
+VITE_ADMIN_USER_ID=1
+VITE_CONTRIBUTORS_USER_IDS=1

frontend/src/components/submit-form/mii-editor/index.tsx

@@ -69,7 +69,7 @@ export default function MiiEditor({ instructions }: Props) {
 				{(Object.keys(TAB_COMPONENTS) as Tab[]).map((t) => {
 					const TabComponent = TAB_COMPONENTS[t];
 					return (
-						<div key={t} className={t === tab ? "grow relative p-3" : "hidden"}>
+						<div key={t} className={t === tab ? "grow relative p-3 min-h-0" : "hidden"}>
 							<TabComponent instructions={instructions} />
 						</div>
 					);