Location: austin, tx

  Remote: YES

  Willing to relocate: no

  Technologies: JavaScript, TypeScript, React, Redux, Node.js, REST API, Express.js, Fastify, SQL, NoSQL (Mongo Change Streams), Redis, Webpack, Authentication (OAuth, JWT), HTML5, Git/Github, TDD (Jest, Supertest, React Testing Library), Functional Programming, Object Oriented Programming, WebSockets, Agile/Scrum

  Résumé/CV: https://www.linkedin.com/in/stephanie-page-atx/

  Email: stephanieelainepage@gmail.com

I'm a mid-level full-stack SWE.

LiveStateDB leverages React Hooks, WebSocket API, and MongoDB change streams to build responsive front-end and back-end libraries that allow developers to dynamically alter state as it is updated in the database. Most importantly, multiple clients can subscribe to the same source of truth, allowing for cross-client updating of state. Instead of needing a query for each client, any changes to the requested documents in a database will be pushed to every subscribed client. Let’s go over how it all works and how easy it is to implement LiveStateDB into your next project!

Wait, really? Yes, really! LiveStateDB’s lightweight library is extremely easy to implement and will instantly add dynamic state to your project. LiveStateDB can be useful in countless instances where real-time updates to state are needed; a stock tracker, storefront, or auction site are easy-to-imagine examples. To understand more clearly, let’s walk through the flow of data.

1) LiveStateDB’s custom React Hook, useSubscribe, contains the lightweight code to set up a subscription from a front end client to requested documents in a database by ‘hooking’ into MongoDB’s, change streams feature. This also initializes an open line of communication between the server and client via WebSockets.

2) The client id and the database document id are stored in a developer-provided Redis instance and used to track subscriptions.

3) When documents with subscriptions are updated, Redis is checked for subscribers.

4) All clients subscribed to that document are broadcast the updated data.

Add LiveStateDB to your toolkit LiveStateDB is available as both an npm and yarn package. You’ll need to install the front end library to have access to the custom React Hook, useSubscribe. The back end library contains the logic for connecting to your MongoDB and Redis databases for streaming database updates back to the proper clients.

Once you’ve installed and imported the package, it’s as simple as collecting the options for the Hook into an object and invoking the function to open up WebSockets.

{ database: ‘inventory’ collection: ‘bestSellers’ query: {} }

You’ll also want to declare an object in the back end to pass along your database details.

const changeStreamOptions = { mongoDbOptions: { uri: “mongodb+srv://rickAstley:yZ3K@cluster0.cf7qs2t.mongodb.net/? retryWrites=true&w=majority” }, redisDbOptions: { host: ‘redis-421.c841.us-west-1–2.ec2.cloud.redislabs.com’, port: 15711, password: ‘sOmeP@$$w0rd’, family: 4 }, }

You can implement LiveStateDB in a pre-existing project or a new project. LiveStateDB currently works with MongoDB databases only and utilizes the native change streams feature. If your project does not already include a Redis, you’ll need to add one, as this is how your subscribers are tracked and updated with the proper database updates.

How to Contribute LiveStateDB will continue to be a work in progress. If the functionality built out in these libraries is of any interest to you, please feel free to contribute or reach out to us about contributing!

If you like the project or think it is interesting, please star it on GitHub