Time Ranger

An extension made for Devpost that can quickly & effectively change time within 50 timezones, bookmark your favorite events & even quickly search out new events. An extension made for the participants

Comment 1

Inspiration

From the day I visited Devpost, I have learned a lot of things and from there onwards I have excelled a lot in the programming domain. I can fairly admit that I have experienced the entire software development lifecycle and the best part is that all of the knowledge & hard work has been put into my personal growth. Devpost is the right place to get a sneak peek of how interesting & challenging it is to develop a project from the inception of an idea.

Taking part in an event, creating a project according to the guidelines, exploring various software domains in that journey, failing, and finally achieving what you want, all those factors make the toiling trip memorable & joyful. What can go wrong with this?

1. Well, one can miss the deadline because the time zones aren't in the correct manner (in the user's timezone), and that creates a huge mistake in decoding what are the starting & ending dates and time for the event & its various phases.

2. Prizes are definitely great in the events but as the participants are from anywhere around the globe, the currency conversion matters a lot so that the participant can compare the prize money with their nation's denomination.

3. Searching various events through the devpost site can be a bit overwhelming and also there is no way to follow an event without enrolling in it.

The devpost team has tried their best by creating a discord server for the communications and say, around 4000 participants are in that server. But it's fairly visible that the active participation is fairly low & very few pay attention to the posts. I have also attached one screenshot of the server's post and you can hardly see any engagement. In another screenshot, you can see that one of the participants said that they had worked hard on the project but missed the deadline due to some mistakes in the conversion of time zones.

So, I have made a chrome extension for devpost that can help the participants a lot and thus can ensure that no one misses out on the deadline, can keep track of some of their favorite events, hop onto the event's page in a jiffy, share the events with others through WhatsApp & more importantly, can effectively do the time & prize conversions of the dates & prizes listed on the page respectively.

With these things to resurrect, I made the chrome extension for devpost: Time Ranger

What it does

Being a chrome extension, the participants can easily use them and it is super lightweight and thus can work in a jiffy. The things which the extension can do are as follows:

1️⃣For any live event (by live, I mean those events that are in the submission phase), the user can go to the event's main page (for example, the OVERVIEW page of the HackDevpost event) and use the extension to convert the timings & prize money in the choice of their timezone and denomination respectively. Before doing that, the user has to select the desired timezone out of the available 50 zones, and with that, the denominations are attached already.

2️⃣For the events, that are not in the submission phase, the user can just go to the dates section of the event, where the date and timeframes of every phase (submission/judging/result) are available and that can be converted to the correct timezones just by a mere click.

3️⃣If one just wants to follow an event, then there is no way of bookmarking it. The only way to do this is by enrolling in the event. The extension saves the users' time by bookmarking a total of 5 events in the extension that will be containing all the required details regarding the event dates, prizes, name, organizing company & a direct link to the event page, all with the combination of converting the prize & time to your preferred choice.

4️⃣There is a unique way of searching for events through the extension itself by interacting with the various tags present. I have provided the following search tags: location, status, length & interest. If a user wants to do a combined search for events like "What are the available online upcoming events that are one week long and belongs to the social friendly theme?" So, through a mere click, the user will be directed to the devpost page in which the page link will be dynamically generated on the go so that the extension can generate what the user needs. That's not it, there are very rare chances that the user wants to search for such long event details, so one can just click on a single tag (with the Control key being pressed) and accordingly the results will be shown for that tag only 🕶️

5️⃣ Not only that, if you want to share your go-to/bookmarked events with your peer group, then you can use the clipboard icon that will copy all of the bookmarked-events data into the laptop's clipboard and will automatically open WhatsApp web on the browser so that you can directly send the clipped text to your friends in a moment. Don't forget to experience the elegant markdown tailor-made for WhatsApp

6️⃣ On the devpost site, there are social links provided in the footer, but to no surprise, it is evident that many few participants reach the bottom of the site because all the eye-catching event details are in the top section itself and that is why very few people join the discord server or interact with the other social platforms of Devpost.** But don't worry, TIME RANGER has got everything covered*. Being a 500px tall popup extension, the footer of the extension is always right before the eyes every time (this is the reason I have added a scrollbar to the bookmarked events section) and thus each and every user of the application will definitely click on the social links and thus will not only ease the **participation process of the users* but will also increase the social media engagement of devpost.

Note:In the working video of the extension, I forgot about telling one more functionality. There may be instances while using the extension where the user may be not aware of what his/her nation's timezone is called or might not be aware of the GMT offset with respect to Greenwich Mean Time. And to rescue those users, below the timezone selection dropdown, there is a text which says "Not sure about my timezone? Use the system clock" and by clicking on that, the extension will fetch the current clock of the system and will convert that into a GMT format so that the user will not only know about his/her timezone but also will get to know about the GMT offset and thus can wisely choose from the dropdown and things will work fine for everyone.

Image

How I built it

I chose to make a chrome extension because a user has to use the devpost website on a laptop/desktop to submit the project and get things done. So, indirectly my extension can serve every participant in the event and thus can hugely benefit them. The process involved in making the extension is as follows:

  1. I chose the popup version of the chrome extension so that the user has an extension area where things can be shown to the user and thus interactivity is the best. Then I inspected the devpost's event pages and figure out the HTML markup that is bordering the deadline and prize section of the events. Thus, I collected the lists of HTML tags, classes, and ids that were of my interest and thus I grabbed the data of my interest.

  2. Popup versions cannot interact with the tabs of the browser because it is not meant to do that. So, the next step was to include a content-script that would extract the data from the devpost pages and will pass the same to the extension via message passing. Message passing is also an indigenous process of chrome extensions that allows two-way communication between the popup and the content script. Moreover, only through the content script, the Document Object Model can be changed and thus it was very challenging and tough to get things started for message passing between the script and extension.

  3. As the extension enables the user to store events and their information, I have to use the storage methods provided by the chrome extension so that the user can come back to the extension anytime and will see the things he/she saved previously. Focus on the fact that "the data stored in the extension is not deletable (unless and until you uninstall the extension altogether)", you can try deleting the cookies, hard-refreshing the browser, but nothing will delete the saved data and I think that is a very great functionality because the data is persistent through every session. This pushed me to use the chrome.storage.local functions to get things done and I am proud of the fact that everything worked and is working flawlessly.

  4. There are some instances when some other extension's background scripts are running and blocking the Time Ranger extension's code and in that case, it was very important to handle the erroneous cases because if not handled, then they would spoil the working altogether or one would see error logs in the extension console. This case occurs when there is an error message stating Page scripts are blocking the extension. In that case, refresh the page and if still the extension is not working it means that the extension can't work on that page.

(Majorly this happens, when you are trying to run the extension on google's sensitive pages like Chrome Web Developer Dashboard/payment gateway. It is done for security reasons so that the extension can't read any sensitive information). Keeping all things in mind, the extension works fine for almost every page and if there are some errors then don't worry, the active error-catching is always there. There will never be a dull moment for the user (❁´◡`❁)

Challenges I ran into

Trying out a new thing and making something useful in the first go is very difficult. Be it from not knowing how to write a single line for the chrome extension to making one that can do the above-mentioned functionalities, I think this is been a great learning curve in my development phase and I will cherish that forever.

Accomplishments that I'm proud of

There is a lot that can be mentioned here, but to keep things crisp, these are my high points for this project:

🕐Ask anyone, nothing is more pleasing and attractive than an extension. Despite the extension being a chrome extension, it can be installed on any web browser which makes things even more pleasant. I am 1000% sure that this is the very first extension made specifically for the Devpost platform and it rightly covers the gray areas that are there on the website.

🕑Most of the time, an extension is supposed to do a single work, but mine is covering more than 6 things at a time with the best User Experience possible.

🕒There is always a background extension file running for the majority of the extensions that not only consume the RAM on the user's end device but also tracks the user's activity all the time. But mine doesn't use any background script and thus fits into the security and scalability aspect in the best manner.

What I learned

Make a chrome extension and integrate it with a content script to do the DOM manipulation along with message passing. Storage functionality was also a difficult call because the set and get calls were promises and I have to ensure that the AJAX code is swiftly running with the extension's processing. And I am sure everyone will not only appreciate the work but will also love the UI/UX ヾ(＠⌒ー⌒＠)ノ

What's next for Time Ranger

Nothing, I am sure of the fact that I have optimized it to the utmost level and I don't think there is any scope for improvement. What can be done, is that it can be officially promoted by the Devpost team so that the participants can really take advantage of it and can use it properly.

Regarding extension's code: To me, my project work is very close to my heart and I really appreciate the code that I wrote to make an idea into reality. Thus, I am not comfortable with sharing the code in a public space. So, I have attached the necessary code files in the GitHub repo so that those who need to see the code see that. 🔏

While installing the chrome extension from the chrome web store, do read the extension's OVERVIEW. (Just to reiterate, the extension can be used on any modern web browser)

Share this project:

Updates