DEV Community

Cover image for 🎬 Episode 3: Designing Database & le communication
MEHMET ALI IZCI
MEHMET ALI IZCI

Posted on

🎬 Episode 3: Designing Database & le communication

  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

  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.
  2. Obtain your MongoDB connection URL. It should resemble:
mongodb+srv://<username>:<password>@cluster0.b71kbmb.mongodb.net/?retryWrites=true&w=majority  
Enter fullscreen mode Exit fullscreen mode

Backend Code Walkthrough

Get the code from here

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
Enter fullscreen mode Exit fullscreen mode

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

Rest of the commands:

Rest of the commands

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 :)

Top comments (0)