COVID Heroes

We are applying for the best domain registered with domain.com prize (our domain name is covidheroes.space)

Inspiration

Covid has brought the best in our communities where individuals and organizations have rallied around those serving at the front lines; health care professionals, emergency personnel, police officers, mail carriers, grocery staff, and other essential professionals. We want to recognize those that are serving, inspire others to join, and become allies to those in need.

Small Acts, when performed by millions, create a movement! Through COVID Heroes, we want to spread the energy of our heroes and create a movement in our communities to ride through these times.

What it does

1. Displays Nominated Heroes and profiles their work (a user can Sign Up to Nominate a Hero)
2. Inspires Users to Signup as an Ally to Help the community
3. Allows Users to Signup to Request Help from an Ally
4. Users can Browse the List of Ally Requests and Ally Available (like a Craigslist)

How We built it

1. Using HTML, CSS, and JS, we built the interactive content of our website and styled it. To display the information of heroes, we used CSS Grids and Flexbox.
2. We host the website content and store user information in a database. We created the schema in PHPMyAdmin using XAMPP.
3. We used SQL to communicate with our database; update and retrieve information.
4. We used Table Filter JS library, which renders database content in an aesthetically pleasing way.

Challenges We ran into

1. Hero Image Display: When we first started to send images to our database, the images were showing up as an encrypted link and not as an actual image. When we looked into our database, we saw that the image was being stored as a BLOB. After doing some research online, we came to the conclusion that in order for our image to be properly rendered on our website, we would have to store the file path in the database. In order to make this possible, we wrote a PHP Script that takes the uploaded file and converts it into a file path, which is then stored in the database.

2. Too Many Library Versions: When calling the Table Filter.js library into our application code, we ran into a plethora of issues. After looking at the installation folder, we found that our link to import the library was wrong. We changed the file but that did not work either. After reading more about the Table Filter. js library, we found out that there was another version of the library. After downloading this new library, our code started to work.

3. Inconsistent size of Hero Grid: When we were trying to display the CSS Grid of the COVID-Heroes, our grids were showing up in different sizes which were ruining the layout of our website. In order to fix this issue, we used the module attribute of CSS Grids, which allowed us to evenly space out the grids. We also readjusted our values for the max and min-width of the grids, which helped restrict the sizes of the grids and appear consistent.

Accomplishments that We're proud of

1. Based on our research, there is not a single website globally dedicated to recognizing the heroes of COVID-19.
2. Technically, we are very proud that we were able to create a fully functional PHP login system and database in 42 hours.

What We learned

1. Before Distance Hacks, Riya and I had never used PHP, SQL, CSS Grids, or the Table Filter.js library. When Distance Hacks kicked off on Friday evening, Riya and I started by brainstorming ideas that would enable us to be of help for the community during Covid.

2. After deciding on building COVID Heroes, we created a draft on paper for what our website would look like. We researched some of the technologies that we needed, decided to use PHP and XAMPP/ PHPMyAdmin for hosting our database and for the backend to retrieve the content from the database.

3. We then looked at the PHP documentation and learned the basic syntax and logic. With this new knowledge, we were able to create the login system for COVID-Heroes. When we first started to create the format for COVID-Heroes, we found that the basic CSS properties such as float and margin were not going to work. While researching alternate methods, we stumbled upon CSS grids.

4. We learned that it was best for us to let our requirements determine what technologies we need. We stayed focused on results and learned what we needed to know to get the task done at hand that was based on the draft of the Covid website we created on a piece of paper.

What's next for Distance Hacks Submission - COVID-Heroes

Technical

1. Create a mobile version of our website - In order to do this, we would need to implement React.js as we have currently designed our website for desktop users.
2. Add a feature in the search for heroes page that will bring up COVID-Heroes in nearby zip codes if the current zip code has no COVID-Heroes.
3. Add an “Inspired” Feature to the COVID-Heroes page, where users can click the “Inspired” icon if they like what a COVID-Hero has done. 4.Add advanced filters on the COVID-Allies page so users can search for people in a certain occupation. Use the information that is tracked in the database to implement a profile feature for each user. There are a lot more features that we want to add to COVID-Heroes to make it more user friendly (like login by Google), add error handlers, allow for more functionality, and make it more scalable (like host it into the Public Cloud).

Adoption

1. Release COVID-Heroes website to the public - start with adoption in Millburn. Share on Facebook, Nextdoor, and local chat groups, and encourage the community to nominate their heroes (heroes can be from any part of the World)
2. Create a Twitter and Facebook page for Covid-Heroes. Profile one Hero every day
3. Share broadly in the community with help from Millburn Township office, and Dr. Miron’s announcements
4. As we ensure website scales locally, we will expand outreach into other communities in NJ, other States, and Globally

Built With

• css3
• html
• javascript