Project Info
This project did not submit a demo video on Devpost.
Inspiration
Our inspiration for this came from the narrow perspective that people have on reading the news. Most people (us included), whether intentional or not, default to the same news source every time. For many this is either a force of habit, a strong preference, or a heavy political bias. Many Americans also exclusively view American news sources, even when viewing international events. Our goal for this project was to make a convenient way for our users to broaden their perspectives by being given a list of similar articles published by other news publications.
What it does
Our program is a Google Chrome extension, that, when opened, reads the title of the current page, and then searches for similar results on other news sources. These results are then read out for users to click on to be redirected.
How we built it
We built this program using HTML, CSS, and Javascript with Node.js, Axios, Cheerio, and Browserify. Our program runs fully in the browser. It uses Axios to request HTML data from the current website and Cheerio is used to parse that data. This data is used to form new URLs which direct to searches for the title of the current news article in other news sources. These responses are then also read with Cheerio to generate a list of links for the user.
Challenges we ran into
We ran into many challenges as this was our first attempt at creating a browser extension beyond the most basic parts and also our first time using Node.js, Axios, Cheerio, npm, and Browserify. One of our largest problems was requesting data from searches on websites. Much of the data on websites cannot be read with just the basic HTML from a simple request. Instead, Javascript code has to receive data from the website’s backend, but these can't be run in an extension. The first ideas we had for this were to use packages like puppeteer and Selenium but they also wouldn't work in a browser extension. The next idea was to create an API backend server to run these browser pages and send data back to the browser through GET requests. This would work but would take a long time to program and would run slower then our final idea. This idea was to request data from a search engine instead of directly from a news source. This idea was very effective and didn't require us to host a server (currently it would have to be locally) and could instead be done fully in the browser extension's Javascript code.
Accomplishments we're proud of
First and foremost we are proud of making a functional minimum viable product for our idea. We participated as a group in the previous CruzHacks and were way over our heads with our idea and couldn't create a product we felt satisfied with. This year our product fulfilled all the necessities we wanted met and even some of our stretch goals. It also looks visually appealing and is easy enough to use. We also came out of this event much more proficient in tools and languages we previously haven't touched.
What we learned
This project taught all of us many valuable skills. We learned how to create stylings with CSS, how to make and await asynchronous HTML requests with Axios, how to create a full Javascript project with Node.js, how HTML is laid out and how to parse it with Cheerios, how to install and manage packages with npm, and some basics of how backend development works.
What's next
for the Banana Bulletin All four of us are genuinely interested in continuing development of this project and are thinking of next steps. At the end of the day this is a hackathon project and many shortcuts were taken that should be implemented in better ways that we didn’t have time for. One of the larger things that needs some improvement for this project is how we request HTML data. The GET requests have to be followed by a timer so we don’t send too many requests as Axios only allows so many requests in a given time so we ideally should switch to some other way to request page information. There are also many features we didn’t have the time to add or complete. Some of these include options for users such as only showing news sources that don’t require subscriptions, or allowing users to choose which news sources to search. We are also interested in adding support for an LLM to help summarize and compare articles.
Banana Bulletin
Broadened perspectives on news
Banana Bulletin is a browser-extension that, upon visiting a news article, recommends users a broad range of articles from other publications on the same topic. It provides statistics on each recommended publication's political learning, and additionally recommends region-specific news articles. The intent is to broaden user's perspectives, and be more aware of the political bias that is present in their consumption of news.
Product Pitch
Developers
Future Features
- Options to toggle paywall only suggestions
- Options for user to input only publications that they enter
- Utilize AI to summarize other articles, compare writing style and biases
- Statistics! Give users statistics to see how many articles from other publications they clicked, to see how they’ve broadened their perspective
- Make global statistics so people can see which sources and articles are more popular before clicking
- Slider for how often the sources they’ve looked at are left/centrist/right, and slider provides a point that describes where their news sources average
Developer Tools
Banana Bulletin utilizes the following frameworks:
- [NodeJS] — Primary framework for interacting with web elements through Javascript
- [Browserify] — Package to allow for NodeJS features to run in an extension environment
- [Axios] — NodeJS package to get a page's source HTML
- [Cheerio] — NodeJS package to parse a page's source HTML and extract relevant information
- [CSS] — Utilized for styling front-end elements
Analysis
View
Metric
- 38
- 3
- 3
- 2
- 1
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- HTMLIn code
- JavaScriptIn code
- Node.jsClaimed
3 of 4 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
911 KB
Source files
15
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
JMack21/cruzhacks24
28 files · 2.7 MB · @ 2111bf3
Structure
Interface
2 files · 7%Screens, components and styles rendered to the user.
Application logic
3 files · 11%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- JavaScript99%
- CSS0%
- Markdown0%
- HTML0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 5- axios
- cheerio
- puppeteer
- +2 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.