Inspiration

Our inspiration for this project was how annoying it can be to find articles on large topics with misleading headlines and information, so we wanted to create an app that could give users actual information about the article before clicking on the link. We also wanted to integrate a more interactive approach too so that users could see other articles with similar information/topics if they wanted.

What it does

The project is a simple web-interface that has you search up a keyword/topic and the app will get information from an api and return a news article about your selected topic. Then you have two options once the article is pulled up, you can select to go right, which is to say you like the article and want to see more like it, or you can select the left arrow which means you don't like the article so it will attempt to find another one.

How we built it

We built this using react, flask with python, and some css files for formatting. We started by separating the work into front end with react, and back end with flask. We then created our react home page and created the search bar and display of information. Our flask has an init.py file for easy readability and better structure. In our main.py we have 3 methods before the server address function, the first one is used to store our keywords from articles which are then used to provide new, similar articles. The next two methods are just ways to extract the text from the website the news api generates. The important address in the flask file are "@main.route("/news_query_bad")", "("/news_query_good")".

"News query good" is called depending on if you click right and when it is called it adds the three most common keywords from the article into the list of words to be used to create similar articles. It then redirects the user to the website that they swiped right on so that they can view the information. ""News query bad" is if you get tired of a subject and click left, so it generates a new article based on a series of random topics and if it is interesting, you would swipe right to find more like it. We also run sentiment analysis which provides user with a clear picture of how biased and polarized the source that the user is seeing depending on the language the article uses.

On the front end with react we create our home page with the search bar for your topic, after entering your topic it redirects to our page that calls the flask backend to get a relevant website about your topic, and after that you then select which arrow and the process repeats

Challenges we ran into

We had trouble learning react because neither of us had used it before so it was a challenging to adapt to this new style we didn't know. We also had trouble trying pass our parameter from the search bar into the flask program. The next issue we had was that we had our project working for a little bit but we attempted to push it to the main branch and it merged with some other branch causing it to no longer work. But we eventually fixed it. The final challenge was that the program runs a bit slow but there wasn't much we could do about that

Accomplishments that we're proud of

Creating the app so that you can swipe left or right was difficult so we are very proud of that aspect of the website. Also the UI for the website information because it looks so clean and even has images on the slides.

What we learned

We learned a lot about react and how it works, we also learned how beautiful-soup works which was interesting. We learned about how to call api's using flask and react which was confusing at first because the formatting is so specific. We also learned how to extract keywords from a file using yake

What's next for ReliaNews

Due to the time constraint we were not able to implement all the features we wanted to like having a user profile, combing the flask and react onto one server so they don't run separately, and there was an idea of creating a preference of topic rather a keyword which is shown in the website when you click the "Curate your feed" button. So given that we had more time we would implement all of these features to provide greater access to our educational app.

Built With

Share this project:

Updates