sglg-communications covid-19 chat react module

sglg-communications is a colorful component which provides element Chat in which a user can query COVID-19 facts. It is deployed at https://sglg-demo.netlify.appThanks, Summer and LG

Comment

Inspiration

We both needed a team and we met up through the #available slack channel and took it from there! We wanted to make something chat-based, reusable, and good looking! Our color palette is actually inspired by a work of art made by SG :)

What it does

Add this react component to your React.js project by importing it from npm, and let your users ask questions to interact with facts and up-to-date statistics about COVID-19

How we built it

We started with a brainstorming and coding session, then some independent work, and some more remote pair programming. We collaborated mostly in our team slack channel.

Challenges we ran into

For a while we were trying to connect to a mongodb atlas from the frontend, which is impossible- we would have needed a server, and we wanted an entirely frontend component. So we pivoted to using an API for COVID-19 statistics instead

Accomplishments that we're proud of

It looks really good! It was a lot of work and tuning to get the nice touches like "autoscroll to bottom" working. Also our communication within the team was very good, especially for people who just met!

What we learned

Lots about how to make a react module! Some new stats about COVID-19 in countries provided by the API that I wouldn't have otherwise looked up. How to make "autoscroll to bottom" work better to not ignore the last message shown! More about CORS. Storybook.js is great for local viewing of individual components being built!

What's next for sglg-communications covid-19 chat react module

More auth0 integration, migrating to the mongodb atlas COVID-19 dataset, migrating the deploy to Vercel :)

Built With

  • auth0
  • covid19api
  • materialui
  • netlify
  • react
Share this project:

Updates