## 2: Collections

Meteor already sets up MongoDB for you. In order to use our database, we need to create a _collection_, which is where we will store our _documents_, in our case our `tasks`.

> You can read more about collections [here](https://v3-docs.meteor.com/api/collections.html).

In this step we will implement all the necessary code to have a basic collection for our tasks up and running.

### 2.1: Create Tasks Collection

We can create a new collection to store our tasks by creating a new file at `imports/api/TasksCollection.js` which instantiates a new Mongo collection and exports it.

::: code-group

```js [imports/api/TasksCollection.js]
import { Mongo } from "meteor/mongo";

export const TasksCollection = new Mongo.Collection("tasks");
```
:::

Notice that we stored the file in the `imports/api` directory, which is a place to store API-related code, like publications and methods. You can name this folder as you want, this is just a choice.

If there is a `imports/api/links.js` file from the starter project, you can delete that now as we don't need it. 

> You can read more about app structure and imports/exports [here](http://guide.meteor.com/structure.html).

### 2.2: Initialize Tasks Collection

For our collection to work, you need to import it in the server so it sets some plumbing up.

You can either use `import "/imports/api/TasksCollection"` or `import { TasksCollection } from "/imports/api/TasksCollection"` if you are going to use on the same file, but make sure it is imported.

Now it is easy to check if there is data or not in our collection, otherwise, we can insert some sample data easily as well.

You don't need to keep the old content of `server/main.js`.

::: code-group

```js [server/main.js]
import { Meteor } from "meteor/meteor";
import { TasksCollection } from "/imports/api/TasksCollection";

const insertTask = async (taskText) =>
  await TasksCollection.insertAsync({ text: taskText });

Meteor.startup(async () => {
  if (await TasksCollection.find().countAsync() === 0) {
    [
      "First Task",
      "Second Task",
      "Third Task",
      "Fourth Task",
      "Fifth Task",
      "Sixth Task",
      "Seventh Task",
    ].forEach(insertTask);
  }
});
```
:::

So you are importing the `TasksCollection` and adding a few tasks to it iterating over an array of strings and for each string calling a function to insert this string as our `text` field in our `task` document.

### 2.3: Render Tasks Collection

Now comes the fun part, you will render the tasks with Svelte. That will be pretty simple.

In your `App.svelte` file, import the `TasksCollection` file and, instead of returning a static array, return the tasks saved in the database:

::: code-group

```html [imports/ui/App.svelte]
<script>
  import { Meteor } from "meteor/meteor";
  import { TasksCollection } from "../api/TasksCollection";

  $m: handle = Meteor.subscribe("tasks");
  $m: subIsReady = handle.ready();
  $m: tasks = TasksCollection.find().fetch();
</script>

<div class="container">
  <header>
    <h1>Todo List</h1>
  </header>

  <ul>
    {#if subIsReady}
      {#each tasks as task (task._id)}
        <li>{task.text}</li>
      {/each}
    {:else}
      <div>Loading ...</div>
    {/if}
  </ul>
</div>
```
:::

But wait! Something is missing. If you run your app now, you'll see that you don't render any tasks.

That's because we need to publish our data to the client.

> For more information on Publications/Subscriptions, please check our [docs](https://v3-docs.meteor.com/api/meteor.html#pubsub).

Meteor doesn't need REST calls. It instead relies on synchronizing the MongoDB on the server with a MiniMongoDB on the client. It does this by first publishing collections on the server and then subscribing to them on the client.

First, create a publication for our tasks:

::: code-group

```javascript [imports/api/TasksPublications.js]
import { Meteor } from "meteor/meteor";
import { TasksCollection } from "./TasksCollection";

Meteor.publish("tasks", function () {
  return TasksCollection.find();
});
```
:::

Now, we need to import this file in our server:

::: code-group

```js [server/main.js]
...
import { TasksCollection } from '/imports/api/TasksCollection';

import "../imports/api/TasksPublications"; // [!code highlight]

const insertTask = taskText => TasksCollection.insertAsync({ text: taskText });
...
```
:::

The only thing left is subscribe to this publication, which we've already added in `App.svelte` using:

::: code-group

```javascript [imports/ui/App.svelte]
...

$m: handle = Meteor.subscribe("tasks");

...
```
:::

See how your app should look like now:

<img width="200px" src="/tutorials/svelte/assets/collections-tasks-list.png"/>

You can change your data on MongoDB in the server and your app will react and re-render for you.

You can connect to your MongoDB running `meteor mongo` in the terminal from your app folder or using a Mongo UI client, like [NoSQLBooster](https://nosqlbooster.com/downloads). Your embedded MongoDB is running in port `3001`.

See how to connect:

<img width="500px" src="/tutorials/svelte/assets/collections-connect-db.png"/>

See your database:

<img width="500px" src="/tutorials/svelte/assets/collections-see-database.png"/>

You can double-click your collection to see the documents stored on it:

<img width="500px" src="/tutorials/svelte/assets/collections-documents.png"/>

In the next step, we are going to create tasks using a form.
