🎬 Episode 3: Designing Database & le communication
Tags: mongodb, node, tutorial, automation
Published: 2023-09-02 11:53:05


1. **Database Design**: How to structure tasks and assignees.
2. **Code me some Back end**: Connect MongoDB with your Node.js app.
3. **Code me some Front end**: Update Slash Commands to manage tasks and assignees.

---

#### System Design and Connection Architecture

I've designed a simple schema to illustrate the project's flow:

![SYSTEM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd8y2cvxy3hegsv5oryp.png)

1. User interacts with **Slack interface** then slack sends these interactions via events to our plugin via `.../slack/events`
2. Our **slack plugin** handles these events which we created in Episodes 1-2, allowing us to filter out invalid requests or events from Slack then sends `POST` requests to **BE**
3. **BE**, which exclusively handles the connection to the **database**. This modular design provides the flexibility to switch  the any BE if needed and feeds data back to the **slack plugin**

_Some side note here_: You could bypass the BE and connect directly to the database through the middleware, but I prefer a cleaner architecture and want to encourage good design patterns. This approach does require exposing two servers, which means a bit more setup work.

---

#### Why MongoDB and Vercel?

I've chosen MongoDB and Vercel for this project because the solution we need is relatively simple, and I'm interested in learning more about these technologies. Feel free to choose any database that suits your needs, but be aware of the differences between NoSQL and SQL databases, as well as their pros and cons.

---

#### Mongo shenanigans

1. Create a MongoDB cluster using their free tier, which should suffice for this project. Follow the instructions [here](https://www.mongodb.com/basics/create-database).
2. Obtain your MongoDB connection URL. It should resemble:  
```  
mongodb+srv://<username>:<password>@cluster0.b71kbmb.mongodb.net/?retryWrites=true&w=majority  
```

---

#### Backend Code Walkthrough

[Get the code from here](https://github.com/mmehmetAliIzci/Tasky.git)

Go to step-3. Here you can see that we've added two new folders. `plugin` and `be`. 

After cloning the repository, run `yarn`, adjust the `env` variables, and start the server. You should now have a localhost connected to a public MongoDB instance.

The backend follows classic architecture with Models, Controllers, Routes, and Services.

1. **Models**: Examine the `Tasks` model to understand our data structure. Initially, I thought of creating both `Person` and `Tasks` models, but later realized that storing user IDs in `Tasks` is sufficient.
   
2. **Controllers**: These contain various operations to ensure the system functions as intended. While not entirely foolproof, they include common error-handling measures to ensure proper usage. These methods perform basic CRUD operations on MongoDB.

3. **Routes**: Look into the routes exposed via Express in the BE.
  
4. **Services**: This section includes the connector for MongoDB and JSON validation for our collections.

---

#### Plugin Code Walkthrough

1. Navigate to the `step-3/plugin` directory to see the updated code.
2. You'll find a new `env` file for specifying the BE URL.
3. Multiple files in the `/src/api` directory segregate each call to the BE, making the architecture more modular.
4. In `index.ts`, you'll see the logic for making calls to our exposed BE and handling the responses.

Lets spin up our plugin and connect to Slack.

Run `yarn` and `yarn start:dev`.

In another terminal, forward your localhost to HTTPS with:
   ```
   ssh -o ServerAliveInterval=60 -R kumbaya-my-lord-kumbaya:80:localhost:3000 serveo.net
   ```

---

### See what you build

Now its for the best part. Lets see what we built. 

Task creation and adding new people to task:
![Task creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rdetx6aentpix4ss00u.gif)

Rest of the commands:

![Rest of the commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywh2ge5xdwvrzpzq5qtj.gif)



####

If you've made this far, know that this is my first time being at this side (creator) side.

If you think about doing the same, take a look at what i've found good and the bad about writing an educational content on my next episode :)