Slack Lunch Club, Part 1/7: Deep Dive into a Modern Web App

Introduction

Are you interested in learning about React, GraphQL, Serverless, and Graph Databases? Did you know that these technologies can be combined to create a world-class developer experience, that let’s you move fast while being highly scalable as well? If this sounds interesting to you, this blog series is well worth your time. So get comfortable, and follow me as I walk you through my most recent side project…

Recently, I was lucky enough to enjoy a much-needed sabbatical. I planned to spend my time relaxing, reading, traveling, spending time with loved ones, and of course — learning new tech. I wanted to create something, simple, useful, and fun. I am a huge believer in side projects, and there is one of mine in particular that has been in my mind for far too long. Peapods.com is the app that I wish existed when I first moved to San Francisco in 2012. The idea of an event-based social network is not new, but I do not believe any product has successfully executed a vision that unlocks its true potential yet. But before I started working on such an ambitious side project, I wanted to build something on a much smaller scale, to prototype the tech stack and practice shipping an actual service. Enter Slack Lunch Club (SLC).

This idea is also not original. There exists letslunch.com, likelunch.com, lunch buddy, and others. The idea to use slack teams was I thought original, until I discovered donut.ai, which looks great. I guess the only interesting thing about SLC is that it’s open source and uses cool tech. The following is a list of technology I decided to use for the implementation:

React: Of course.

GraphQL: For apps, this is a much better option then REST.

Serverless: As someone who’s wrangled servers, the promises of FaaS are extremely enticing. The pricing model is also perfect for an indie dev / entrepreneur. The goal is to use the AWS free tier for almost all components to reduce cost.

Node.js: A perfect fit for FaaS model, and the lack of context switching between frontend / backend languages is great.

ArangoDB: This multi-model database is extremely underrated in my opinion. We have used it at Autodesk with great success, and the graph features are a perfect fit for any social / recommendation app. It has native javascript support by embedding the V8 engine. If you are a small team / startup, the flexibility of this database is a huge competitive advantage. This one database can replace MongoDB, Neo4j, and redis for many use cases. The less things to learn the better!

The implementation of the actual app will be broken down into the following parts:

Part 2: Project Setup

Part 3: Backend

Part 4: Frontend

Part 5: Testing and Deployment

Part 6: Matcher Service

Part 7: Conclusion

Each part will contain descriptions of what I am doing, along with references to pull requests which will also contain comments and descriptions of the code. This way the reader can follow along from start to finish, and hopefully have a complete understanding of the entire implementation by the end. This is intended to be more of an intermediate / advanced tutorial, but hopefully even a beginner can follow along. I have 3 main goals.

1. Share what I have learned.
2. Get feedback from you, the reader. What do you think? What can I improve?
3. Recruit developers to join me in furthering the development of this app.

Ok, enough preamble. Ready? Let’s go!

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.