I was inspired to make this website because I have a close friend that is a high risk individual and his whole family is high risk so they rarely ever leave the house. I know in the future this is not sustainable and eventually you will have to leave your home. So this website is great for high risk individuals looking to shop or even apply at a company. They get to see what kind of guidelines and restrictions the company has in place so that they know where is the safest place to go shop at or work at.

What it does

The app lets you view companies and their COVID-19 guidelines and restrictions so that you can make the choice to support them or boycott them. Also if you are a company you can post your own company on the website and to show people your guidelines and restrictions.

How we built it

We started with the back-end so that we can have data to pull from when we start building the website. We used NodeJS and a SQlite3 database. There are two simple requests. A get to receive a list of all the companies and a post to post your own company. We then created a react app and used tailwindCSS to style the website and axios to fetch the list of data and to display the data using props. There are three pages. Landing page, company list page, and register company page. Zach Coleman was in charge of designing the website and Muamer Kukic created the website.

Challenges we ran into

 We ran into a lot of challenges early on because Zach was extremely busy but was able to get a nice layout of how he wanted the website to look and Muamer Kukic was in charge of creating the website as close to as he could. Also setting up Tailwind was a pain as it as my first time ever using Tailwindcss. The biggest challenge we faced was deciding on how the register page should look. We ended up going with radio buttons as it looked the cleanest and was easiest to work with.

It may take a second to load when you click on the companies list because the backend is hosted on heroku.

Accomplishments that we're proud of

We are extremely proud of how responsive the website is. It looks great on mobile phones/tablets/desktop and the animations are extremely smooth. We also like the look of the emojis on the website because it gives it a more upbeat feel.

What we learned

TailwindCSS is the best library for styling. It is extremely easy to use and it makes it extremely responsive. Also creating tables with booleans. It wasn't difficult but it was the first time I used booleans for something like this and it was quite fun and I have new ideas on what to make now.

What's next for Covid Compromise

There is a lot coming for Covid Compromise. Firstly I would like to implement a search bar on the company page so that you can search for a specific company. Once you click on a card I would like for it to take you to that companies website. Also down the line I would like to add accounts to register with different permissions. A basic account just the view companies and to be able to favorite your favorite companies and save it to your account. Also a CEO account with special permissions to post a company.

Built With

Share this project: