DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Next.Js Crowd: See Who Talks About The React Framework
Sashe V.
Sashe V.

Posted on

Next.Js Crowd: See Who Talks About The React Framework

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:

Diagram

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

GitHub logo SasheVuchkov / nextjs-crowd

NextJs Crowd monitors Twitter for users that mention the react framework Next.js and it shows some daily stats like "top users", "top tweets", etc

Next.Js Crowd - Who's Talking About Next.Js?

It's a simple app that monitors Twitter and detects users that mention the react framework Next.js. The point is to collect all their tweets, process their public metrics like the number of likes, retweets, and replies, and finally, rank the discovered users by a score.

App's Top Users Screen

App's Top Tweets Screen

App's About Screen

Overview video (Optional)

Here's a short video that explains the project and how it uses Redis:

[Insert your own video here, and remove the one below]

Embed your YouTube video

How it works

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…

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

App's Top Users Screen

App's Top Tweets Screen

App's About Screen

Collaborators

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

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


Top comments (1)

Collapse
 
chinwendu20 profile image
Maureen Ononiwu

Good job!

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.