covid-19-electronic-health-system / corona-tracker Goto Github PK

Hello all, I want to use this thread to pool our translating resources together so that we can provide as many options as we have available for the app when the time comes to translate.

I have a relative proficiency in French and Italian, with comprehensive skills in Spanish. None of these are my first language.

Please comment below your comfort with languages other than English and definitely note if you are a native speaker and if you have experience using these languages in healthcare.

I am going to create a Translations.md for us to be working in

Task
Use the mockup in the design directory to create a component for the login view called Login.js.

See the following for the design/wireframes/CORONATRACKER UI-#1

What done looks like:

1. See if you can find a component that already handles this online. If so, just import it, and figure out how to style it in Login.css like the mock up.
2. Add comments to explain code if necessary
3. We have Login.js component in /components.
4. We have Login.css file in /css to style the Login.js sub-component.

Design considerations:
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> Login.js
CSS file -> Login.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .Login-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

Testing:
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

Task
Use the mockup in the design directory to create a component that houses the Average Temperature display, called Temperature.js

This will be a sub-component of DiagnosticContainer.js as per design/wireframes/CORONATRACKER UI - #17

What done looks like
Add comments to explain code.
We have a Temperature.js component in /components.
We have a Temperature.css file in /css to style the Temperature.js sub-component.

Design considerations
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> Temperature.js
CSS file -> Temperature.js

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .Temperature-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

Testing:
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

3/17/20 @ 1:30pm Project overview with some Access Labs, Flatiron School alums to get front end help.

See:
https://wework.zoom.com/j/5921238737

Update the README in order to reflect discussion from previous issues and in the Discord.

• What our tech stack is
• The main feature we want to complete for our IPR early next week

Reformat the README in order to emphasize the things we're working on and de-emphasize the things that come after the IPR.

Hey @SomeMoosery, i created a blockstack id, it was registered successfully, then i tried login with the login and got this error. Just wanted to flag. Everything else is looking great though!

Task
Use the mockup in the design directory to create a component that toggles between Symptoms.js and Temperature.js, called ToggleInfo.js.

This will be a sub-component of DiagnosticContainer.js as per design/wireframes/CORONATRACKER UI-#17

What done looks like:
Add comments to explain code.
We have a ToggleInfo.js component in /components.
We have a ToggleInfo.css file in /css to style the ToggleInfo.js sub-component.

Design considerations:
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> ToggleInfo.js.
CSS file -> ToggleInfo.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .ToggleInfo-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

Testing:
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

Hey Team,

In order to elicit users to share information about themselves, I've used Progressive Profiling, a feature for forms, where new questions appear for returning users who've completed the form prior.

As we think about how to garnish data, without overloading the user, let's consider 3 or 4 sets of questions that could be rotated as users engage with the app.

A description can be found here: https://auth0.com/docs/users/concepts/overview-progressive-profiling

1. For this to really take off the whole nation needs to be on the app. What's the incentive to be on the app as opposed to just watching the news and staying clear of pockets of high infection. What's the plan to get people on board at scale?
2. Who's the target audience? Essential workers in sectors such as healthcare, transportation etc? Most people are in self-quarantine right now and WFH so they won't be going outside much.
3. How specific are we getting when it comes to marking locations on the map as to an infection location? Are we marking neighborhoods? Individual homes? The concern is the privacy aspect, because if you're marking individual homes then it's easy to figure out who lives there, especially if you live on the same street.

Task
Use the mockup in the design directory to create a weeklyTracker.js container component.

See the following for the design/wireframes/CORONATRACKER UI-#1
This component is the container component that holds the sliders which show "You said you felt x/10 today". It is below the Calendar.

weeklyTracker.js will hold four dailyTracker.js.

What done looks like:

1. See if you can find a component that already handles this online. If so, just import it, and figure out how to style it in weeklyTracker.css like the mockup.
2. Add comments to explain code if necessary
3. We have weeklyTracker.js component in /components.
   We have weeklyTracker.css file in /css to style the weeklyTracker.js sub-component.

Design considerations:
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> weeklyTracker.js
CSS file -> weeklyTracker.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .weeklyTracker-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

Testing:
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

Task
Create RESOURCES.MD to help onboard developers

What done looks like

1. Create RESOURCES.MD in root
2. Links RESOURCES.MD to README.md and CONTRIBUTING.md
3. Breaks up resources for devs to lookup by tech: Front-End, Backend, Blockstack, Design, Analytics etc.

Tasks
Break up designs into components and create issues

What does done look like

1. We have a series of issues that looks at each view, identifies components.
2. If a component looks like it has sub-components, create an separate issue for the sub-component. The main component will be a container component. Link both the issues.

Questions
If you have any questions, please comment on the issue and message me on the discord.

Once we establish a Radiks connection, the next step would be to create and start utilizing user, doctor, and symptom models so we can start dynamically creating views.

We should at least loosely decide on how we want to model our data (this ticket) before I go about making these models with Radiks. Feel free to add comments and make edits to my draw.io file I've included in desgin/database_models!

As this project grows and the number of contributors increases, it's important to create a set of guidelines regarding how we use git and GitHub in order to maintain relative order.

Regarding git, we'll cover things such as

• branch naming conventions
• squashing commits before merge
• commit messages
• etc...

Regarding GitHub, we'll cover things such as

• PR formatting
• Branch rules
• etc...

Task
Create a UI view of the map feature of the app.
Add to /designs

Questions to consider:
What information will it provide?
What information will it need?
This will help with database decisions.

What done looks like:

1. We have a view that outlines how the maps features will look like.
2. It will outline what functionalities it will have

the functionality for the user to do things like talk to the doctor cannot be done if they are not logged in. WIll need to change by removing or disabling user only features.

You can use the map or settings but cannot use the health log or the talk to a doc feature.

Task
Create CONTRIBUTING.MD to help onboard developers

What done looks like

1. Create CONTRIBUTING.MD in root
2. Mention workflow to understand the project
3. Link to README.md
4. Add ideas from issue #55
5. Add roles of different people like: design, backend/systems, front end, documentation, analytics, analytics...etc.
6. Use Github's suggested CONTRIBUTING.md standards found in
7. Make clear that its ok to fail forward, experiment and try new things. Just don't push to master.
8. Add language related to peer programming.
9. Add links to RESOURCES.MD

Task
Create base css theme style based on the wireframe. The colours are listed below.
See the app brand guide in brand guide.

Theme palette:
CORE COLORS
Red: #f64141
Dark-Grey: #2c2c2c
Light-Grey: #aaaaaa
Off-White: #ebebeb
White: #ffffff

SLIDING SCALE
Selected-Red: #f64141
Unselected-Grey: #b8b8b8
Grey-slide-bar: #666666
Box-outline: #dfdfdf

TEMPERATURE GRADIENT:
Blue #3100fe --> Red #f33443

What done looks like:

1. We have a themePalette.css file in /css to style the website's theme.

Design considerations:
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css

Style guide for CSS files:
Naming convention:
CSS file -> themePalette.css

Task
Create Slider.js component.
See the following for the design.

It is the slider in the view.

What done looks like:

1. You created the Slider.js component as per the instruction above.
2. Add comments to explain code if necessary.
3. We have Slider.js component in /components.
4. You have used the themePalette.css file and the corresponding classes to style the button and imported at the top of the file BEFORE your component.
5. Create a Slider.css file. Also Use themePalette.css for styling.
6. You have used the name Slider.js for the component.

Design considerations:
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> Slider.js
CSS file -> Use themePalette.css and create a Slider.css file.

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

Testing:
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

Task
Use the mockup in the design directory to create a separate component for the calendar.

What done looks like
We have a Calendar.js component in /components.
We have a .css file to style the Calendar.js component in /css.

Design considerations
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:

Naming convention:
Component -> Calendar.js
CSS file -> Calendar.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .Calendar-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

testing
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

Task
Use ToggleInfo.js component and pass props to the component that toggles between My Health Log and Show Me More.
See: CORONATRACKER UI - Health Log - Show Me More.png

What done looks like:

1. Add comments to explain code.
2. Reuse ToggleInfo.js component in /components and pass props for custom use.
3. Resue styling from ToggleInfo.css file in /css to style the ToggleInfo.js sub-component.

Design considerations:
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> ToggleInfo.js.
CSS file -> ToggleInfo.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .ToggleInfo-header { ... }

How to handle state:
Don't foresee the button holding state.

Testing:
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

Task
Use the mockup in the design directory to create a Diagnostic container component called DiagnosticContainer.js

This is the component that is below the Calendar component in design/wireframes/CORONATRACKER UI - #1.png

It will hold four sub-components:

1. The chart to track temperature over time -> Chart.js
2. Average Temperature display -> Temperature.js
3. Toggle between symptoms and temperature -> ToggleInfo.js
4. Symptoms component (needs clarification) -> Symptoms.js

In the design directory, it's above the Tab Bar.

What done looks like
We have a Diagnostic.js component in /components.
We have a Diagnostic.css file to style the Diagnostic.js component in /css.

Design considerations
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> Diagnostic.js
CSS file -> Diagnostic.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .Diagnostic-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

Testing
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

There's been a lot of great discussion around what we want to build, and I want to get as much of these suggestions and ideas built as we possibly can. But, the intent is to have an IPR (Initial Public Release) by Monday 3/16 or early next week. I think to get to that point, we should decide on one definitive feature we want fully fleshed-out and working well. That way (correct me if I'm wrong @tesla809 ), we can look for beneficiaries to assist us with things (primarily the cost) of deploying this at scale. In this IPR we can have a highly-visible list of additional features we'll continue to work on and add, but for time being I think we should focus our efforts on getting our "bread and butter" out the door.

I think the primary two features right now are:

1. A individual symptom/well-being monitoring tool used by doctors to triage patients. We will work with medical professionals to outline a list of questions to ask individuals (things like, for example, "are you better or worse than yesterday" or "do you have enough soap"). We will aggregate these responses in order to identify high-risk individuals and present this aggregation as a dashboard that medical professionals can use to better triage healthcare.
2. A crowdsourced inventory-locating tool. Similar to how Waze uses crowdsourced user-submitted data to notify when there is, for example, a police officer nearby - we could use the same format to notify individuals of where there's soap, or non-perishables, etc. This hasn't been fleshed out, but it could be presented as either a simple list, or on a map.

I think we need to put these two up to a vote so that we can start fleshing out features / individual pieces of work so we can all get working towards the same goal in parallel. Vote 🚀 for 1, 🎉 for 2.

Some additional, less-fleshed-out features that could be implemented quickly and in parallel are:

1. A push notification sent every time you leave your house, urging you to practice social distancing, as right now that's the singular best way to stop the spread of disease.
2. Feel free to suggest below. I can either add to this issue or create a backlog of smaller tasks

Task
Configure Chart.js component with dummy data to look like the mockup
See wireframe.

Questions to consider:
What information will it provide?
What information will it need?
This will help with database decisions.

What done looks like:

1. We have a chart.js with dummy data.
   (It will be replaced once all the components are in place and refactored. For now, we are setting things up then polishing it later).

Details here:
Meeting with Dr. Jigna Zatakia- Assistant Professor in Pulmonary Critical Care Medicine at Baylor College of Medicine
https://www.linkedin.com/in/jigna-zatakia-2734b333/

Topic: Coronatracker <> Dr. Jigna Zatakia
Time: Mar 17, 2020 06:30 PM Eastern Time (US and Canada)

Join Zoom Meeting
https://us04web.zoom.us/j/789835902

Meeting ID: 789 835 902

One tap mobile
,,789835902# US Toll

Dial by your location
US Toll

Meeting ID: 789 835 902
Find your local number: https://us04web.zoom.us/u/fWebnPsa

In order to clearly define the scope of what we're building, the core features of this health log need to be mapped out and some lower-level details need to be defined.

• What data we need from users and how we'll be storing it

Once a connection with our SPA and Blockstack is established, we need to connect to Radiks in order to start persisting data to Gaia.

Task
Use the mockup in the design directory to create a separate component for the NavBar.
In the design directory its called Tab Bar.

What done looks like
We have a NavBar.js component in /components.
We have a NavBar.css file to style the NavBar.js component in /css.

Design considerations
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:

Naming convention:
Component -> NavBar.js
CSS file -> NavBar.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .NavBar-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

testing
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

Task
Setup basic Redux

• Create folder "redux" in the root directory of the app

• Create reducer.js and add action example

• Create actions.js and add action function example

• Create store in the index.js and wrap App.js in Provider component

• Add dummy data to the store and access it through hooks in the ChartJs.js component

Note on the React routs with Redux:
In order to avoid routing bugs we should use functional components as much as possible. If we have to use class component, make sure that you wrap export statement in withRouter. This function can be imported from 'react-router-dom'.

All HIPAA related data should be block-stack related

Whereas data in news is covid19-tracker wide

and then maps is geolocation wide

and finally settings is saved by cache

Will need a further discussion where data is discussed especially in regards to geolocation data

So I've had a few ideas regarding this, and I'm adding this issue as a Long-Term Change for when the time comes. At a certain point, we'll want to bring this application live, and need a good way to do that. I'm a fan of AWS and have my Certified Solutions Architect certificate (although I got it a while back, and am definitely not super experience with building distributed systems from scratch myself). But, I am relatively comfy with AWS.

I've been thinking of a general architecture that we could use, which I'll attach to this issue when I draw it out. Just adding this here for a placeholder/discussion issue for the time being.

Hi everyone, I've been watching your developments over the last few days and I have to say remarkable teamwork! There is considerable efforts being done to study the COVID-19 outbreak. At Columbia where I reside, the biomedical informatics department is hard at work to support the NYP-hospital system. Also, the Observational Data Science and Informatics consortium leverages real world data in a standardized data to generate evidence from data sources world wide. They are heavily working on an initiative as well. I think the data that may be captured and generated from the app being developed here could be of great use for this community. I think it is a bit early but I think @tesla809 at least should reach out to inform the consortium about the app development and possible contribution by y'all citizen scientists https://forums.ohdsi.org/t/ohdsi-virtual-study-a-thon-to-support-covid-19-response-to-take-place-26-29mar2020-collaborators-wanted/9810

We want to have a baseline landing page design for this application so we know where to build things off of.

Suggestion:

To track progress, should we do stand-ups, every two days at nights?
What time after 6pm EST work for the team?

Standups are used in software development teams to keep everyone in synch.
Different teams summerize their progress, questions, comments and concerns.
Each team debriefs on what has gone on during the day or previous day.
They state any blockers (things that are preventing them from completing a task) and how it can be solved.
Teams also talk about the upcoming tasks they will do.

They usually last 10 to 15 minutes.

Thoughts?

On the frontend, we want to establish a connection with Blockstack.

This requires a little bit of discovery on how to use Blockstack and what's necessary for our app, but for now just a working POC should be good.

Task
Use the mockup in the design directory to create a chart to track temperature over time called Chart.js.

This will be a sub-component of DiagnosticContainer.js as per design/wireframes/CORONATRACKER UI-#17
See issue #16.

What done looks like
Find a suitable package to use and style like mockup. Use the one you think is best.
Add comments to explain code.
We have a Chart.js component in /components.
We have a Chart.css file to style the Chart.js.js component in /css.

Design considerations
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> Chart.js
CSS file -> Chart.js

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .Chart-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

Testing
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

The Navbar component is not functioning as expected probably because of conflicts with CSS in bootstrap. Will need to be refactored so it matches the expected design.

Task:
Refactor navbar to appear as intended design

What done looks like:
It matches the design located at the footer of in /design/wireframes/ CORONATRACKER UI - Login Screen.png

In order to develop this application for an IPR smoothly, we should have flows/wireframes for navigating through the health log functionality of the app.

Here is the link to register for the webinar:
https://ehealthinitiative.zoom.us/webinar/register/WN_Py1oNxobRhqWLoUyP4q2FQ

With wide-scale responses underway by countries to counter the coronavirus’ spread, the use of technologies such as Artificial Intelligence (AI) may prove to be vitally important now and in the future.

The US health system at the brink of operating at above capacity and healthcare organizations need clarity on how to address COVID-19 risk within their population and their community more broadly. AI has the ability to deliver insights that can assist national response to COVID-19 by giving insights into which hospitals will have similar experiences and impacts, insights to help communities plan for when and how healthcare resources will be impacted, insights into highest risk patients, and provide clinicians with point-of-care clinical decision support.

Please join us while we discuss some important developments in AI with real-world examples AI insights and how providers and communities can apply them to drive optimal outcomes during times like these.

Speakers:

• Lori Tremmel Freeman, CEO, NACCHO
• John Frownfelter, MD, CMIO, Jvion
• Priyanka Suiro, Director of Informatics, ASTHO
• John Showalter, MD, Chief Product Officer, Jvion

Task
Create a UI view of the setting feature of the app.
Add to /designs

Questions to consider:
What information will it provide?
What information will it need?

What done looks like:

1. We have a view that outlines how the maps features will look like.
2. It will outline what functionalities it will have

Y'all ready to start a mock survey and recording user data, storing it, and then populating charts?? I can help with survey design, data models, and chart population within components. I just need a developer and a database person to help me figure out how to be the "middle man" and prototype/launch stuff.

Create views for Doctor's dashboard. @BrianHHough is taking care of mocks ups.

It's often possible to mathematically model the spread of a disease given a few parameters. It might be helpful to use this to give a risk assessment to people based on their geographic location and other data we collection about the disease. More information about the basics of mathematically modeling disease spread can be found here.

The due date is 2 days from now.
Due: Friday, March 20 at midnight
Winner: Monday, March 23.

Micro-grant: $5,000

About: The grant is for $5000 and can be spent for just about any activity that helps inform the public.

Info:
This Call for Proposals is open to the general public and an affiliation to Columbia or Stanford is not required. Proposals should follow strict CDC guidelines and not suggest activities that put the grantee or the public at greater risk.

See: https://brown.submittable.com/submit

Grant:
Recognizing a profound need for accurate information about the COVID-19 virus, the Brown Institute for Media Innovation is offering a “rapid” micro-grant to help support journalists, technologists, health researchers, data scientists, social scientists, and any and all communities involved in covering the virus. The grant is for $5000 and can be spent for just about any activity that helps inform the public. Examples include novel modes of tracking the progress of the virus, the responses by various governmental organizations, and predictions of its impact — the subject is open. Outcomes might include data and data visualizations, tools to spot and combat misinformation about the virus, a documentary or a reported story, a VR/AR experience or an interactive of some kind.

Applications to the COVID-19 Reporting Micro-grant are due Friday, March 20 at midnight and we will announce a winner on Monday, March 23. The application itself consists of a 1-page PDF description of your project, together with a small budget outlining how you will spend the funds. Contact [email protected] with any questions.

This Call for Proposals is open to the general public and an affiliation to Columbia or Stanford is not required. Proposals should follow strict CDC guidelines and not suggest activities that put the grantee or the public at greater risk.
https://brown.submittable.com/submit

Task
Create Table.js with React-Bootstrap's Table component to display dummy data from CORONATRACKER UI - Health Log - Show Me More.png
Use either react-bootstrap's table component
See: CORONATRACKER UI - Health Log - Show Me More.png

What done looks like:

1. Add comments to explain code.
2. Use React-Bootstrap's Table component
3. Style it according to the style guide using themePalette.css in /css folder.
4. Import themePalette.css into the file and use appropriate classes. Do not try to redo styling from scratch. Please save time.

Design considerations:
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> Table.js
CSS file -> Table.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .Table-header { ... }
Although, we do not foresee the need to create custom CSS since React-Bootstrap and themePalette.css will take care of it. If so, please follow the style guide.

How to handle state:
Add dummy data for now. Redux will be added later.

Testing:
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

As a baseline for the dev side of things, we want to initialize this project with a clean create-react-app template, and incrementally build off of that.

Task
Use the mockup in the design directory to create a Loading Screen View for App called LoadingScreen.js

See: design/wireframes/CORONATRACKER UI-#1.png

It will have the logo in the /design directory.

What done looks like
We have a LoadingScreen.js component in /components.
We have a LoadingScreen.css file to style the Diagnostic.js component in /css.

Design considerations
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component ->LoadingScreen.js
CSS file -> LoadingScreen.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .LoadingScreen-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

Testing
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

Once we have an idea decided upon, we need to decide upon a tech stack (these could technically be done in parallel as well). So far, the consensus seems to be around:

Frontend: React

Backend: serverless via Blockstack, Django, Express/Node

Database: Blockstack Radisk (need to read into this myself but seems like Mongo), Mongo, PostGIS (Postgres extension - I'm not sure many people know this and neither do I, but if we want to optimze for storing primarily geography-based information, this is great at that).

Personally, my vote kind of forks based on another decision. If we want to develop a decentralized app, I would vote React, Blockstack. If we feel like decentralized isn't necessary (or we want to put it as more of a stretch goal which would require reshaping architecture down the line), I'd vote React, Express/Node (or Go, if anyone else wants but I think that's just me lol), MongoDB.

Let's discuss and try to come up with a decision ASAP so we're all on the same page and can start working towards a cohesive goal.

Task
Use the mockup in the design directory to create a dailyTracker.js sub-component for weeklyTracker.js

See the following for the design/wireframes/CORONATRACKER UI-#1
This component is the sliders which show "You said you felt x/10 today". It is below the Calendar.

weeklyTracker.js will hold the four dailyTracker.js components. One for the last four days.

What done looks like:

1. See if you can find a component that already handles this online. If so, just import it, and figure out how to style it in weeklyTracker.css like the mockup.
2. Add comments to explain code if necessary
3. We have dailyTracker.js component in /components.
4. We have dailyTracker.css file in /css to style the dailyTracker.js sub-component.
5. They are slideable and change color as per the mockup.
6. Takes state of symptoms and passes to the redux store
7. Can set an alert for a reminder to add state later
8. Takes state of symptoms and passes to the database for storage

@BrianHHough to add more clarity on functionality.
@SomeMoosery will add clarity on what needs to passed to the database and/or redux.

Design considerations:
We have decided to use regular CSS files to keep things simple for now. This allows for more contributors and less time to upskill to contribute.

Once MVP is done the team can discuss if we want to transition it to styled-components or something like CSS modules.

Folder paths
CSS is located in /client/src/css
Components are located in /client/src/components

Style guide for CSS files:
Naming convention:
Component -> dailyTracker.js
CSS file -> dailyTracker.css

To avoid naming collisions:
prefix class names with the name of component and link with kebab case.
Class name -> .dailyTracker.js-header { ... }

How to handle state:
If you can use redux, use it.
Create action and reducer with an appropriate name.

Testing:
No need to worry about testing for now.
If you choose to add tests, please place in client/src/tests

The landing page needs to be created in React as per the design laid out (right now just in Discord, we should add these design docs in a directory in this repo somewhere perhaps)