returnoftheturk / recall Goto Github PK

https://material-ui.com/components/floating-action-button/

Add a Floating Action Button to the Home page to create a group for names.
Clicking on the button should open up a new view with group input form.

test1

Material UI provides a beautiful template for a Sign Up Page, provided at:
https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/sign-up
Demo is at the link below.
In SignUp.js, incorporate the existing code with the template to make a nice looking signup page.

Using a mixture of original tutorials followed for authentication (using firebase realtime database in the tutorial, which is the older version) and the official docs, integrate Firestore to application.
https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial
https://firebase.google.com/docs/firestore/quickstart?authuser=0#web

Need to have nice groups view, with proper loading and rendering on all sizes.

Fix initial landing page.
Make nice landing page view.
Clicking on RECALL at bottom left corner should take you back to the landing page.
There should be no admin page, remove route completely.

https://material-ui.com/components/bottom-navigation/

Add bottom navbar to go to the basic views:
Home Page
Groups
Names

Create view to show all the groups the user has.
Im thinking something with cards layed out, where you scroll to the bottom. Clicking on each group opens names view of that group.

Make group cards look nicer, add increment to count number of names in group

For first time users / people who havent created any names or groups, the app needs to still look nice and attractive. This is called zero state in UI design.
Need to do some research for how the UI should look, google material UI has some nice documentation:
https://material.io/design/communication/empty-states.html

Material UI provides a beautiful template for a Sign In Page, provided at:
https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/sign-in

Demo is at the link below.
In SignIn.js, incorporate the existing code with the template to make a nice looking signin page.

The profile page needs to have a nice view for the user. Can be a simple card, nicely designed (checkout twitters profile card https://bootsnipp.com/snippets/40Kom)

TBD: Ability to edit information? With a modal?

When looking at names in a group, (ie seeing the names after a group click),
the title of the page should be the groupName.

Can also change group name to Clusters.

Create view to display the names in a group.
Scrollable, shows basic required information on the big view, clicking on each individual item pops open the name view with more information, as a nice card.

Upon new contact card creating, there should be a firebase function that triggers that stores the date of creation for.

Need to have nice groups view, with proper loading and rendering on all sizes.

Create a top navbar with basic information, IE login, the logo, app name, left hand has side bar that expands on click.
https://material-ui.com/components/app-bar/

When a new contact is created, there should be a firebase function that triggers to https://genderize.io/
API to get the gender of the new user, and store an random icon name from that gender group

Have a view (should also be added to the bottom navbar) where the user can filter contacts based on their names (search function)