A mern stack application to fetch the tweets by the users
A Twitter App built for fetching user tweets to view it live click here please add the twitter keys in ./server.js and ./app/controllers/searchController
Tech Stack Used : Front End:React,Redux,Bootstrap,Socket.io Client Back End:Express,Socket.io,Validator,dotenv,twitter(npm package to interact with twitter api)
Objective Design and develop a user interface to display real-time Twitter data in an universal Javascript environment
Functional Requirements:
Using Twitter Api , for fetching tweets, Using two types of Api fetching ,one as per user clicks and another streaming notification
One to get the tweets using express to making the Api call for the particular tweets , as we can make a limited number of calls for the api we cannot make the Api calls every time to get the data,we can make only 15 requests per 15 minutes for the tweets
It will be stored inside the redux store , The data is fetched 100 at a time and it is paginated everytime the user , scrolls down and click if wants to see more
The notification has to be updated with out axios call every second , The best solution would be to use WebSocket , I have used a library called as Socket.io which is a implementation of Websockets for realtime datafetch , for viewing the data like twitter we can use twitter widget , for optimal web page performance and to enable tracking of Twitter widget JavaScript events.
The tweets are fetched by default by latest, but It will be an issue if the user wishes to get the tweets based on the retweets or popular ones to tackle it , sorting of the tweets is done
reference : https://javascriptstore.com/2018/03/18/stream-tweets-with-react-express-socket-io-and-twitter/
Making Design Responsive using grid system https://getbootstrap.com/docs/4.1/layout/grid/
Faced an Error in socket-io client
Failed to minify the code from this file:
./node_modules/socket.io-client/node_modules/debug/src/browser.js:155
twitter-tweets
┣ node_modules
┣ client
┣ app
┃ ┣ controllers
┃ ┗ searchController.js (How to handle backend when user searched for it)
┃ ┣ middleware
┃ ┗ models
┃
┣ config
┃ ┗ router.js (Containes all backend points)
┃
┣ .gitignore
┣ package.json (Contains all the packages and dependencies)
┣ README.md ( A Brief Description of the project)
┗ server.js (A Main backend file having all backend functions)
client
┣ build
┃ ┣ static
┃ ┃ ┣ css
┃ ┃ ┃ ┣ main.32898cf0.css
┃ ┃ ┃ ┗ main.32898cf0.css.map
┃ ┃ ┗ js
┃ ┃ ┃ ┣ main.9af315c3.js
┃ ┃ ┃ ┗ main.9af315c3.js.map
┃ ┣ asset-manifest.json
┃ ┣ index.html
┃
┣ public
┃ ┗ index.html (contains header , ico icon , twitter widget)
┃
┗ src
┣ actions
┃ ┣ searchActions.js (action generator for fetching tweets , spinner , errors and sorting)
┃ ┗ textActions.js ( contains what the user searches for)
┣ components
┃ ┣ layouts
┃ ┃ ┗ Navbar.js (Navigation bar contains the header of the nav bar)
┃ ┣ notifications
┃ ┃ ┣ NotificationHeader.js (Navigation header)
┃ ┃ ┣ NotificationsCard.js (card element containing the user name , what he has tweets and the time)
┃ ┃ ┗ NotificationsList.js (List of all fetched tweets)
┃ ┗ search
┃ ┃ ┣ InputField.js (search input for tweets)
┃ ┃ ┣ SearchBar.js (contains search bar, search button and sorting)
┃ ┃ ┣ TweetEmbed.js (For embedding twitter widget)
┃ ┃ ┣ TweetFeed.js (Contains the embedding feed)
┃ ┃ ┗ TweetResult.js (All the tweets are fetched here , can be paginated)
┣ reducers
┃ ┣ errorReducer.js (A reducer for errors)
┃ ┣ searchReducer.js (A redux reducer for tweets data)
┃ ┗ textReducer.js (The user searches are passed here)
┣ selector
┃ ┣ isEmpty.js (Check if the field is empty or not)
┃ ┗ sortMethods.js (Sorting selector for sorting by Date,Retweets and Fav)
┣ App.css (Main css containing necessary styling)
┣ App.js (Main app js file containing navbar and rest of the components)
┣ App.test.js
┣ index.css
┗ index.js
Install latest version of Node JS and Google Chrome
to run in local repository you can run