Next.Js Crowd: See Who Talks About The React Framework
Tags: redishackathon, nextjs, typescript, react
Published: 2022-08-26 12:50:00


### 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](https://github.com/SasheVuchkov/nextjs-crowd)...

You can find a working demo of the app here:
[https://nextjs.buhalbu.com](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jwm833ij698yyscn0ots.jpg)

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

{% youtube QDa-ZEHurxA %}


### Language Used

JS/TS/Node.js

### Link to Code

{% embed https://github.com/SasheVuchkov/nextjs-crowd %}

### Additional Resources / Info

TypeScript - JavaScript with syntax for types.
[https://www.typescriptlang.org/](https://www.typescriptlang.org/)

Next.Js - The React Framework
[https://github.com/vercel/next.js/](https://github.com/vercel/next.js/)

React.Js - A declarative, efficient, and flexible JavaScript library for building user interfaces.
[https://github.com/facebook/react](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/](https://getbootstrap.com/)

twitter-api-sdk - A TypeScript SDK for the Twitter API
[https://github.com/twitterdev/twitter-api-typescript-sdk](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](https://github.com/redis/redis-om-node)

Feather – Simply beautiful open source icons
[https://feathericons.com/](https://feathericons.com/)

### App Screenshots

![App's Top Users Screen](https://nextjs.buhalbu.com/images/nextjs-crowd-screenshot1.jpg)

![App's Top Tweets Screen](https://nextjs.buhalbu.com/images/nextjs-crowd-screenshot2.jpg)

![App's About Screen](https://nextjs.buhalbu.com/images/nextjs-crowd-screenshot3.jpg)

### Collaborators

[Maureen Ononiwu](https://dev.to/chinwendu20), backend developer
https://dev.to/chinwendu20

[Sashe Vuchkov](https://dev.to/sashevuchkov), full-stack developer
https://dev.to/sashevuchkov

- - - 


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._