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
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.
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]
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
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.
Top comments (1)
Good job!