Working with Your Workspace

File Navigation

• Use the Explorer panel to navigate between all three folders
• The “Monorepo Root” section shows your top-level files
• Use Ctrl+P (or Cmd+P on Mac) to quickly open files from any part of your project

When working on frontend or backend code, always open files from their respective workspace folders (Frontend or Backend), not from the Monorepo Root. This ensures VSCode uses the correct project context for language support, IntelliSense, and tool integration. The Monorepo Root folder should primarily be used for accessing top-level files like README.md, .gitignore, or project configuration files.

Integrated Terminal Management

Open separate terminals for each project:

1. Open terminal (Ctrl + `)
2. Click the + dropdown next to the terminal tabs
3. Select the folder where you want the terminal to open
4. Run your development servers:
   • Frontend terminal: npm run dev
   • Backend terminal: fastapi dev main.py

Git Management

Since everything is in one repository:

• All changes from frontend, backend, and root files appear in a single Source Control panel
• You can commit changes from all projects together
• Branching affects the entire monorepo
• This keeps everything synchronized and simplifies deployment

Common Workflows

Starting Development

1. Open your project.code-workspace file in VSCode
2. Open an integrated terminal for the backend folder
3. Activate the virtual environment: source venv/bin/activate (Linux/Mac) or venv\Scripts\activate (Windows)
4. Start FastAPI: fastapi dev main.py
5. Open a new terminal for the frontend folder
6. Start React: npm run dev

Making Changes Across Projects

1. Modify your FastAPI endpoints in the backend folder
2. Switch to the frontend folder to update API calls
3. Update documentation in the monorepo root if needed
4. All changes appear in one Git panel for easy committing

Managing Documentation and Configuration

• Edit README.md from the Monorepo Root folder
• Update .gitignore to exclude files from both projects
• Add project-wide scripts or configuration files at the root level