Overview of Next.Js Crowd

It's an app that monitors Twitter for users who mention the react framework Next.js. It constantly collects tweets and user data, creates curious stats and then rank them by a "Score".

Every elligible tweet, user or stat JSON document is recorded in a Redis database. Later, when a visitor opens the app, it fetches those documents to show them.

You can find the repo here...

You can find a working demo of the app here:
https://nextjs.buhalbu.com

What technologies did we use to build it?

We used TypeScript, Next.Js, and Redis, as well as HTML and CSS for the front-end part.

Here's a diagram of the architecture:

So the app works in two primary modes. We have a scheduled job that emits messages every two minutes. Our app listens for those messages, and on every message, it "asks" Twitter whether there are new tweets with the desired keyword next.js.

If there aren't any new tweets, then everything is cool, and that's the end of the story.

If there are new tweets, the app processes them by mapping their data to our internal data types, and it calculates their "scores" that it later uses to rank them by popularity.

In the next step, the new data is saved in a Redis Database as documents. We use the awesome RedisJSON module.

Then the app gets a JSON document from Redis with the current day's general stats. It updates those stats and saves them.

That's the final step.

In the second mode, the app is accessible on the web. When a web visitor opens it with their browser, it fetches data from our Redis database, generates the response, and then sends it back to the browser.

Now the web visitor can see either a list of ranked Twitter users or a list of ranked tweets.

Submission Category:

MEAN/MERN Mavericks

App Video Overvew

Language Used

JS/TS/Node.js

Link to Code

Additional Resources / Info

TypeScript - JavaScript with syntax for types.
https://www.typescriptlang.org/

Next.Js - The React Framework
https://github.com/vercel/next.js/

React.Js - A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://github.com/facebook/react

Bootstrap5 - world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
https://getbootstrap.com/

twitter-api-sdk - A TypeScript SDK for the Twitter API
https://github.com/twitterdev/twitter-api-typescript-sdk

Redis Om for Node - Object mapping, and more, for Redis and Node.js. Written in TypeScript.
https://github.com/redis/redis-om-node

Feather – Simply beautiful open source icons
https://feathericons.com/

App Screenshots

Collaborators

Maureen Ononiwu, backend developer
https://dev.to/chinwendu20

Sashe Vuchkov, full-stack developer
https://dev.to/sashevuchkov

• Check out Redis OM, client libraries for working with Redis as a multi-model database.
• Use RedisInsight to visualize your data in Redis.
• Sign up for a free Redis database.