Our inspiration for this project was from the sample ideas, especially the idea where a virtual robot could be created to keep self-quarantine-rs company. We wanted to modify it so people used their their time to entertain themselves, while doing something relevant to the pandemic. We also remembered that during the quarantine, Instagram and TikTok challenges became super popular, so we wanted to create a challenge where it helps the person who's doing it, their community, and positively influences others, as opposed to just tagging others or circulating a hashtag. That's where 14 Day Quarantine was born!

What it does

14 Day Quarantine is a website which has a challenge for each day of your self-quarantine. By clicking on the day of your quarantine, you get a challenge. Each challenge has a link for you to read and complete! Some challenges involve learning more about COVID-19 from the official CDC website and taking a quiz to test your knowledge, while other challenges are more fun and involve putting together care packages or making cards to send to COVID patients! Creating your own mask and supporting local businesses are also part of the challenges :) We didn't create an Instagram page or any social media for the challenge, but the challenge is designed to be very social -- virtually. You can share your progress as you complete the challenge using hashtags, and the 14 Day Quarantine social media is supposed to share participants' photos on their account and help promote social distancing and wearing masks!

How we built it

Originally, we created a prototype on Figma, so that we knew how exactly we wanted our website to be like. We tried coding it through HTML/CSS and JavaScript, but we didn't know how to achieve the backgrounds we wanted or how to create lightboxes using HTML. For this reason, we switched to Wix. Creating the website through Wix was very easy, and we were able to achieve all the effects that we had thought of. We did use a little HTML to embed other websites in our website, however, which wasn't too complex.

Challenges we ran into

1) The initial challenge we ran into was building the website through HTML/CSS and JavaScript, as we had no idea how to create the backgrounds or create lightboxes. We decided to switch platforms, since coding what we wanted would be very hard to achieve with two people (especially since only one of us knew HTML while the other knew Python). 2) Another challenge that we ran into while making the challenges (get the joke?) was collaborating together on Wix. Wix does not allow two people to work simultaneously on the editor, so we had to split up the work so that one person could take care of the actual content and the other person could take care of the design. 3) The third and final problem we ran into was in our animations. We used the Wix editor to animate all the little coronavirus icons on the page to glide into place, however, when you clicked on the day to get your challenge, the icons disappeared completely, along with some of the text. It took us some time to figure out what was wrong, but we figured it out. The animation was set to glide every single time you landed on the page, and since the lightbox was technically on the same page, the viruses disappeared. We changed the animations to work only the first time, and it was fixed!

Accomplishments that we're proud of

Some accomplishments that we're proud of include: 1) Our graphics. We think that our website looks really aesthetically pleasing to the eye, which is really good for challenges. When the word challenge comes to mind, some people already start groaning! With a good looking website, sometimes your motivation goes up, which is the case for me :) Good aesthetics definitely improve the interest factor for many people! The sliding little viruses are also super cute! 2) Our content. We're proud of the challenges we were able to create, and how official they look. We're proud of the quizzes we have created, and how our website turned out overall! 3) Our teamwork. As twins, me and my brother are CONSTANTLY fighting. There is not a single day where we went without fighting, and as polar opposites, there's no chance that can happen, either! That is the case for this project too -- we definitely fought a LOT. I wanted to try coding using HTML/CSS and figure it out, but my brother had no experience with HTML -- so he wanted Wix. We eventually compromised, and a little HTML was used in the process of embedding. We also fought about what challenges to include and what not to include, but that's normal! At the end of the day, I'm proud that we put our differences aside in many areas to create this project. 4) Our fake Instagram page. I photoshopped it all :)

What we learned

We learned so much from the hackathon! 1) This was our first hackathon! We learned so much about how a hackathon works, and this was a really fun experience! We learned about attending workshops, working together to create something we were passionate about, and we learned a LOT about coding! 2) We attended the workshops! We attend four out of the seven workshops, and we learned a lot! Even though we knew the languages already that were presented in the workshops, it was good to get a review of them. I learned so much about boostraps and UI kits, and I'm definitely going to use them in the future for more coding projects! 3) We learned more about our problem. We learned more about COVID-19, and it was interesting to know! We learned so much about coronavirus that we didn't know about before, such as how we approximate six feet, etc.!

What's next for 14 Day Quarantine

Some additional features we wanted to implement were: 1) A user login that keeps track of your progress, and gives you badges, etc. to keep you motivated! 2) A challenge count which keeps track of how many people have challenged themselves to date 3) A certificate to be given out after completing the challenge 4)Additional links for people who wanted to do/know more Once we are satisfied with the end result, we might release it to the public via social media so that people can actually take part in the challenge! Our user base is designed to be broad and applicable to everyone, so anyone can take part!! We will also work on converting this into a website using HTML/CSS and JavaScript, instead of Wix (after this hackathon in a more relaxed manner, and for practicing purposes!)

Built With

Share this project: