This repository contains frontend and backend code to demonstrate OAuth integrations with HubSpot (as well as Airtable and Notion structures) and data loading functionality.

• Node.js (v14+) and npm installed locally
• Python (v3.8+) and pip installed
• Redis instance running locally (e.g., via Memurai or redis-server)[1]

Create a .env file in the backend/ directory with the following keys:

HUBSPOT_CLIENT_ID=<your_client_id>
HUBSPOT_CLIENT_SECRET=<your_client_secret>
HUBSPOT_REDIRECT_URI=http://localhost:8000/integrations/hubspot/oauth2callback
HUBSPOT_SCOPES=oauth crm.objects.contacts.read crm.objects.companies.read

This file is loaded by python-dotenv in hubspot.py to configure HubSpot OAuth.[2]

1. Navigate to the backend/ folder
2. Install dependencies:

   pip install -r requirements.txt

3. Start the FastAPI server (with auto‐reload):

   uvicorn main:app --reload

4. Ensure Redis is running before starting the backend.[1]

1. Navigate to the frontend/ folder
2. Install dependencies:

   npm install

3. Start the React development server:

   npm run start

4. Open http://localhost:3000 in your browser.[3]

05sanjaykumar-vectorshift-interview/
├── backend/
│   ├── main.py
│   ├── redis_client.py
│   ├── requirements.txt
│   └── integrations/
│       ├── airtable.py
│       ├── hubspot.py
│       ├── integration_item.py
│       └── notion.py
└── frontend/
    ├── README.md
    ├── package.json
    ├── public/
    └── src/
        ├── App.js
        ├── data-form.js
        ├── integration-form.js
        └── integrations/
            ├── airtable.js
            ├── hubspot.js
            ├── notion.js
            └── slack.js

1. Click Connect to HubSpot in the UI to initiate the OAuth flow.
2. Approve scopes and close the popup window.
3. Click Load Data to fetch Contacts and Companies from HubSpot.
4. View the resulting JSON in the multiline text field.
5. Use Clear Data to reset the display.