> For the complete documentation index, see [llms.txt](https://code.janardhanpulivarthi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://code.janardhanpulivarthi.com/development/course-creation.md).

# Course creation

### Process

1. Secure the code base - <https://github.com/j143/openmined>
2. Find a development environment
3. Mentally be prepared for the quantum of time required to complete this project
4. Components - Sanity CMS - yarn - Firebase
5. Know the components may not work out-of-the box
6. The course content is not yet created.
7. link <https://courses.onevara.com>

#### Checklist

* [x] Frontend working fine
* [x] Sanity configuration
* [x] Firebase api
* [ ] Cypress - <https://on.cypress.io/required-dependencies>

![Course dashboard](/files/-MVlnduASf2Ame-vqwkY)

Course content - <https://github.com/OpenMined/openmined/blob/dev/apps/courses-e2e/src/integration/courses.spec.ts#L96>

![](/files/-MVlnYZUTksgr1eENyew)

Auxiliary tools

1. nx - <https://nx.dev/latest/node/getting-started/cli-overview>

### Configuration

`.local.env`

```javascript
NX_FIREBASE_API_KEY=AIzaSyCsgXp-0CkvWsc-iTcO5PmbkU6F-_R8MPY
NX_FIREBASE_AUTH_DOMAIN=openmined-org-dev.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://openmined-org-dev.firebaseio.com
NX_FIREBASE_PROJECT_ID=openmined-org-dev
NX_FIREBASE_STORAGE_BUCKET=openmined-org-dev.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=466298787757
NX_FIREBASE_APP_ID=1:466298787757:web:c9e0cc241b34835d7df324
NX_FIREBASE_MEASUREMENT_ID=G-PQ5T6T7932

NX_SANITY_COURSES_PROJECT_ID=rzeg7i8f
NX_SANITY_COURSES_DATASET=development
```

`.env`

```javascript
NX_FIREBASE_API_KEY=AIzaSyC4B2McdAHd8NsRWhFJUO5Ho9fzp4MY5Co
NX_FIREBASE_AUTH_DOMAIN=openmined-org.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://openmined-org.firebaseio.com
NX_FIREBASE_PROJECT_ID=openmined-org
NX_FIREBASE_STORAGE_BUCKET=openmined-org.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=430689683505
NX_FIREBASE_APP_ID=1:430689683505:web:3a1be74e07cad9ab712d10
NX_FIREBASE_MEASUREMENT_ID=G-EC9MJ6CP8X

NX_SANITY_COURSES_PROJECT_ID=rzeg7i8f
NX_SANITY_COURSES_DATASET=production
```

1. Goto <https://console.firebase.google.com/project/onevara-courses/settings/general> Create a web app to receive the following credentials.
2. Database creation
   * [x] Database creation&#x20;
   * [x] <https://console.firebase.google.com/project/onevara-courses/firestore>
   * [x] Which database to choose - <https://firebase.google.com/docs/database/rtdb-vs-firestore?authuser=0>
   * [x] Cloud firestore location
   * [x] Create index - <https://firebase.google.com/docs/firestore/query-data/indexing?authuser=0#create_a_missing_index_through_an_error_message> &#x20;

![Firestore configuration](/files/-MVp4DboYAcLrGkkEWoq)

{% code title="for .env" %}

```javascript
var firebaseConfig = {
    apiKey: "AIzaSyD5cPfaE4y6UNUCJBJvGgkfTTKF3PNdWwo",
    authDomain: "onevara-courses.firebaseapp.com",
    projectId: "onevara-courses",
    storageBucket: "onevara-courses.appspot.com",
    messagingSenderId: "561704292197",
    appId: "1:561704292197:web:78633a0f954452b0b79b8c",
    measurementId: "G-B2S733DPKH"
  };

NX_FIREBASE_API_KEY=AIzaSyD5cPfaE4y6UNUCJBJvGgkfTTKF3PNdWwo
NX_FIREBASE_AUTH_DOMAIN=onevara-courses.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://onevara-courses.firebaseio.com
NX_FIREBASE_PROJECT_ID=onevara-courses
NX_FIREBASE_STORAGE_BUCKET=onevara-courses.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=561704292197
NX_FIREBASE_APP_ID=1:561704292197:web:78633a0f954452b0b79b8c
NX_FIREBASE_MEASUREMENT_ID=G-B2S733DPKH

NX_SANITY_COURSES_PROJECT_ID=x6ltnsla
```

{% endcode %}

{% code title="for .local.env" %}

```javascript
  var firebaseConfig = {
    apiKey: "AIzaSyAbgi1VBJV1dC0n55EmVoKUHYsZg-eNwd4",
    authDomain: "onevara-courses-dev.firebaseapp.com",
    projectId: "onevara-courses-dev",
    storageBucket: "onevara-courses-dev.appspot.com",
    messagingSenderId: "1079044769160",
    appId: "1:1079044769160:web:e803eb87a5547b1bc9263d",
    measurementId: "G-RYMK55S6QK"
  };


NX_FIREBASE_API_KEY=AIzaSyAbgi1VBJV1dC0n55EmVoKUHYsZg-eNwd4
NX_FIREBASE_AUTH_DOMAIN=onevara-courses-dev.firebaseapp.com
NX_FIREBASE_DATABASE_URL=https://onevara-courses-dev.firebaseio.com
NX_FIREBASE_PROJECT_ID=onevara-courses-dev
NX_FIREBASE_STORAGE_BUCKET=onevara-courses-dev.appspot.com
NX_FIREBASE_MESSAGING_SENDER_ID=1079044769160
NX_FIREBASE_APP_ID=1:1079044769160:web:e803eb87a5547b1bc9263d
NX_FIREBASE_MEASUREMENT_ID=G-RYMK55S6QK

NX_SANITY_COURSES_PROJECT_ID=x6ltnsla
```

{% endcode %}

## Code

### Sanity

**`sanity.json`**

```javascript
{
  "root": true,
  "project": {
    "name": "Courses"
  },
  "api": {
    "projectId": "rzeg7i8f",
    "dataset": "production"
  },
  "plugins": [
    "@sanity/base",
    "@sanity/components",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "intl-input",
    "media"
  ],
  "env": {
    "development": {
      "api": {
        "dataset": "development"
      },
      "plugins": [
        "@sanity/vision"
      ]
    }
  },
  "parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas"
    },
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./desk-structure.ts"
    }
  ]
}
```

`yarn start sanity-api`

Update `projectId` to `x6ltnsla`.

![Sanity studio](/files/-MWGDxr_JohgvELjWPVG)

#### Sanity import data

.<https://www.sanity.io/docs/importing-data>

```bash
sanity dataset import <file.ndjson> <targetDataset>
```

#### Course content schema

![folder structure for sanity cms](/files/-MVlti-EgFUIsvXRZxQK)

#### Sanity errors

`yarn build firebase-api`

![](/files/-MWVZEJN7mom7OWpY1_a)

### Firebase

**`firebase.json`**

| name                        | Type of entity    |
| --------------------------- | ----------------- |
| **`onevara-courses`**       | Organization name |
| **`onevara-courses-dev`**   | Organization name |
| **`onevara-education`**     | App nickname      |
| **`onevara-education-dev`** | App nickname      |

```javascript
{
  "firestore": {
    "rules": "apps/firebase-api/firestore.rules",
    "indexes": "apps/firebase-api/firestore.indexes.json"
  },
  "functions": {
    "source": "/"
  },
  "hosting": [
    {
      "target": "openmined-education",
      "public": "dist/apps/courses",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "openmined-education-dev",
      "public": "dist/apps/courses",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ],
  "storage": {
    "rules": "apps/firebase-api/storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 5500
    },
    "functions": {
      "port": 5501
    },
    "firestore": {
      "port": 5502
    },
    "ui": {
      "enabled": true
    }
  }
}
```

`yarn test firebase-api`

.<https://firebase.google.com/docs/cli#the_firebasejson_file>

.<https://firebase.google.com/docs/cli/targets#configure_your_firebasejson_file_to_use_deploy_targets>

.<https://firebase.google.com/docs/functions/manage-functions#deploy_functions>

#### Region

![issue related to region europe-west1](/files/-MWKuP76S0amFoV_7HsK)

```bash
firebase deploy --only hosting:onevara-education
firebase deploy --only functions:onevara-education
```

#### Firebase deployment

Change the `.env` credentials to that of `.local.env` still the same error

```bash
$ firebase deploy --only "functions,firestore:rules,storage"
!  functions: package.json indicates an outdated version of firebase-functions.
Please upgrade using npm install --save firebase-functions@latest in your functions directory.

=== Deploying to 'onevara-courses-dev'...

i  deploying storage, firestore, functions


There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.

Error: HTTP Error: 404, Could not find Application "onevara-courses-dev".
```

{% code title="firebase deploy -P onevara-courses-dev" %}

```bash
=== Deploying to 'onevara-courses-dev'...

i  deploying storage, firestore, functions, hosting


There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.

Error: HTTP Error: 404, Could not find Application "onevara-courses-dev".
```

{% endcode %}

Based on the error message <https://console.firebase.google.com/project/onevara-courses-dev/firestore/> has been created in `us-central`.

![](/files/-MWVX2Zqmh4yLyIzy5yq)

#### Collection

![](/files/-MWW1Zab-Jak9cHnpdKi)

#### Nodejs API

.<https://googleapis.dev/nodejs/firestore/latest/DocumentReference.html>

### Cypress

![](/files/-MVlzZpyD_arkNqHksEJ)

```bash
 yarn e2e courses-e2e
```

![](/files/-MVm0l3qxTVFd2C1D-kS)

### Billing

.<https://console.firebase.google.com/project/onevara-courses/usage/details>

![](/files/-MWGJq6396PtSuCVatqr)

## Errors

#### 1 Uncaught TypeError

```bash
Uncaught TypeError: data.sort is not a function
    at push../routes/homepage/Learn.tsx.__webpack_exports__.default (/main.js:8811)
    at renderWithHooks (/vendor.js:115827)
    at updateFunctionComponent (/vendor.js:118198)
    at beginWork (/vendor.js:119905)
    at HTMLUnknownElement.callCallback (/vendor.js:104787)
    at Object.invokeGuardedCallbackDev (/vendor.js:104836)
    at invokeGuardedCallback (/vendor.js:104898)
    at beginWork$1 (/vendor.js:124801)
    at performUnitOfWork (/vendor.js:123616)
    at workLoopSync (/vendor.js:123544)
```

```javascript
// webpack:////workspace/onevara/libs/shared/data-access-sanity/src/index.tsx
export const useSanity = (query) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const { client } = useContext(SanityContext);

  const prepareData = (d) => {
    Object.keys(d).forEach((i) => {
      const elem = d[i];

      // Make sure we convert all breaking spaces to <br /> tags
      if (typeof elem === 'string' && elem.includes('\n')) {
        d[i] = (
          <span
            dangerouslySetInnerHTML={{
              __html: elem.split('\n').join('<br />'),
            }}
          />
        );
      }
    });

    return d;
  };
```

#### 2 React will try to recreate this component tree

from scratch using the error boundary you provided, ErrorBoundary. logCapturedError @ vendor.js:120927

```bash
vendor.js:120927 The above error occurred in one of your React components:

    at push../routes/homepage/Learn.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:8803:3)
    at push.../../../libs/shared/util-page/src/index.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:366:5)
    at div
    at https://onevara-education.web.app/vendor.js:31696:73
    at RouteWrapper (https://onevara-education.web.app/main.js:9275:13)
    at D (https://onevara-education.web.app/vendor.js:132094:673)
    at E (https://onevara-education.web.app/vendor.js:132097:804)
    at Suspense
    at SuspenseWithPerf (https://onevara-education.web.app/vendor.js:136028:23)
    at x (https://onevara-education.web.app/vendor.js:132096:23)
    at App (https://onevara-education.web.app/main.js:607:85)
    at ErrorBoundary (https://onevara-education.web.app/vendor.js:58213:47)
    at ErrorBoundary (https://onevara-education.web.app/main.js:1962:1)
    at SEOProvider (https://onevara-education.web.app/main.js:359:3)
    at ColorModeProvider (https://onevara-education.web.app/vendor.js:2997:5)
    at ThemeProvider (https://onevara-education.web.app/vendor.js:31730:71)
    at ChakraProvider (https://onevara-education.web.app/vendor.js:17385:5)
    at r (https://onevara-education.web.app/vendor.js:129077:5327)
    at FirebaseAppProvider (https://onevara-education.web.app/vendor.js:135615:32)
    at WrappedApp
```

#### 3 Can't perform a React state update

```bash
vendor.js:100909 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at push../routes/homepage/Learn.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:8803:3)
    at push.../../../libs/shared/util-page/src/index.tsx.__webpack_exports__.default (https://onevara-education.web.app/main.js:366:5)
    at div
    at https://onevara-education.web.app/vendor.js:31696:73
    at RouteWrapper (https://onevara-education.web.app/main.js:9275:13)
    at D (https://onevara-education.web.app/vendor.js:132094:673)
    at E (https://onevara-education.web.app/vendor.js:132097:804)
    at Suspense
    at SuspenseWithPerf (https://onevara-education.web.app/vendor.js:136028:23)
    at x (https://onevara-education.web.app/vendor.js:132096:23)
    at App (https://onevara-education.web.app/main.js:607:85)
```

#### 4 Signup or signin error

![](/files/-MWfFC-QOCvJvxuY87Ri)

This is due to development server using `.local.env` and pinging with development `projectId`.

#### 5 Sanity is not yet connected

data received from

```bash
https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?database=projects%2Fonevara-courses%2Fdatabases%2F(default)&gsessionid=_bUTEJirdogmUzE0uwJeDAdhRtPSNKoZp0zKiTWXGb0&VER=8&RID=rpc&SID=YBZ06ScVEIwtB4bWMWa2UQ&CI=0&AID=33&TYPE=xmlhttp&zx=9usy97on9ofu&t=1
```

is

```bash
29
[[34,["noop"]],[35,["noop"]]]
```

#### 6 Property '\_path' does not exist on type ' '

```bash
TS2551: Property '_path' does not exist on type 'DocumentReference<DocumentData>'
```

Possible solution could be <https://firebase.google.com/docs/functions/beta-v1-diff>

## Errors2

.<https://github.com/sanity-io/design/blob/next/CONTRIBUTING.md>

1. `yarn dev:docs`

An error occured while attempting to reach the Sanity API.

1. Unable to build sanity ui project documentation

## Lint

.<https://eslint.org/docs/user-guide/getting-started>

```bash
yarn add eslint --dev
yarn run eslint --init
```

.<https://eslint.org/docs/user-guide/configuring/>

### Updates

Add seed data to firestore firebase

Resources. [how do I seed data to firebase firestore](https://stackoverflow.com/questions/63004211/how-do-i-seed-data-to-firebase-firestore)

Check that queries are functioning as intended.

```c
# queries.ts
# Sanity Query for homepageCourses
*[_type == "course"] {

  visual {
    "default": default.asset -> url,
    "full": full.asset -> url
  },
}

# output

{"ms":328,"query":"*[_type == \"course\"] { visual { \"default\": default.asset -\u003e url, \"full\": full.asset -\u003e url }, }","result":[{"visual":{"default":"https://cdn.sanity.io/images/x6ltnsla/production/da22bd244116b6f11efaec65e71273a1149b5804-299x106.png"}},{}]}
```

Keep the fork up to date with the OS repository

```bash
git fetch https://github.com/openmined/openmined dev
git merge https://github.com/openmined/openmined dev
```

## TODO

1. Create design tutorials, and courses
2. make sanity work


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://code.janardhanpulivarthi.com/development/course-creation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.