- Database Design: How to structure tasks and assignees.
- Code me some Back end: Connect MongoDB with your Node.js app.
- 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:
- User interacts with Slack interface then slack sends these interactions via events to our plugin via
.../slack/events
- 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 - 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
- Create a MongoDB cluster using their free tier, which should suffice for this project. Follow the instructions here.
- Obtain your MongoDB connection URL. It should resemble:
mongodb+srv://<username>:<password>@cluster0.b71kbmb.mongodb.net/?retryWrites=true&w=majority
Backend Code Walkthrough
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.
Models: Examine the
Tasks
model to understand our data structure. Initially, I thought of creating bothPerson
andTasks
models, but later realized that storing user IDs inTasks
is sufficient.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.
Routes: Look into the routes exposed via Express in the BE.
Services: This section includes the connector for MongoDB and JSON validation for our collections.
Plugin Code Walkthrough
- Navigate to the
step-3/plugin
directory to see the updated code. - You'll find a new
env
file for specifying the BE URL. - Multiple files in the
/src/api
directory segregate each call to the BE, making the architecture more modular. - 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:
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)