Inspiration:
Foresight is the result of three girls looking to create a more efficient way to do research online. During our brainstorming stage, we wanted to build a program that would be useful for college students. At the same time, we wanted a simple idea as we were also beginners in coding. We decided to make a chrome extension because we had friends who had been able to carry out similar projects within a limited time frame, and we had a simple goal for our first hackathon to build a project that worked.
What it does
Designed for Google Search optimization, when the mouse hovers over a link, it generates an image of the website so that you can quickly view what it looks like before you visit the site. When you are doing research or may be looking for a product, we often stick to the first page of the Google search page. However, you can still fall into clicking suspicious or unreliable websites by reading the text alone. Including a visual preview of the website beforehand can help a user quickly assess whether it’s a site worth visiting. This saves time for the user and helps saves the unnecessary loading time from clicking the website. Similar to “zooming in” by mouse hovering with online products, this method allows you to quickly triple-check the credibility of a website.
How we built it
The core of this program is built with JavaScript. It is supplemented with HTML and CSS for styling purposes and better UX.
Challenges we ran into
The biggest challenge of our team is our lack of experience. While we had unanimously agreed on developing a chrome extension, none of us had used JavaScript before (C++ was our main language) and we also had limited experience with HTML and CSS. However, we really liked our idea and powered through. While our idea was unique enough that there were currently no well-made “link-viewers” in the store, we did manage to find an old non-working program similar to what we wanted on GitHub that we used as source material. We were constantly doing research on what the code did and received generous help from the mentors for things such as to how to use GitHub collaboratively.
Accomplishments that we're proud of
Our first accomplishment was simply getting the extension into chrome and successfully getting the popup to appear. It was the first part of our program that we were able to get running and gave us hope in what we were doing as beginners. Another, larger, accomplishment was getting the mouse to detect the website link. This was the core of what our program did, and was the gateway for us into getting the rest of our program running. It was the most difficult, but educational part for all of us. Three cheers for that! Whoo! But in truth, accomplishing this program is a proud accomplishment for all of us because we were able to learn so much and succeed our goals when we started from negative five.
What we learned
In short, our team collectively gained knowledge in five areas: Github, Javascript, Chrome extensions, collaboration, and perseverance. We had very minimal experience with Github, so after pitching our ideas to a mentor to determine feasibility, they also helped us get started on how to use Github so we could simultaneously work on the project together. Next, we learned JavaScript and Chrome extensions for development purposes. While we are still not experts, we have received a significant amount of new knowledge that we did not have before by carrying over the current knowledge we currently had from our classes. Collaboration was also something we came to appreciate; while our team formed spontaneously, we had no problem getting along and voicing our opinions with each other. We would frequently discuss the new concepts we learned together to reinforce what we learned. Lastly, the project taught us to persevere in what we were doing. The long hours on confusion led to a lot of frustration, but we have still gained a lot experience-wise.
What's next for Foresight
The current problem we need to fix with foresight is getting information from websites. The extension is currently having trouble displaying images for site URLs that do not have https.
After finishing the debugging of the current version, next steps for Foresight include better improving on the UX. Some ideas include fixing an on/off functionality, making the preview viewer customizable so the user can control the size of the box, and better controlling where the preview appears. Additionally, we would like the preview to appear on the right side of the screen where there tends to be white space. Since this is where popular sites like Wikipedia information can displays visual information, we would like to find a way to replace or cover over that so that it prevents the screen from being too crowded.
Once more people start using Foresight, we anticipate that this will improve search results for users along because search algorithms will notice which sites are being visited more often and better find which ones are more useful to others. This will encourage more people to work on website development too because they will want users to see that they are the right source they are looking for. It will be useful for SEM (search engine marketing).
Built With: JavaScript, HTML, CSS, Blood, Sweat, Tears
Log in or sign up for Devpost to join the conversation.