Simple React frontend with placeholders
Budget: $10 – $30 USD
Looking to have somebody build out a very simple 3 page react frontend that uses the following -
1. React hooks and contexts
2. React Router for navigation
3. Firebase sdk for basic login/logout auth.
The attached pdf file provides a basic mockup that shows the three pages being requested.
1. Signed out page
Very simple page with navbar, full page background image, main heading, lead text and two buttons for call to action.
Login button should allow user to login with Google (using firebase sdk).
2. "Main" page
Split into 70-30 columns. Main portion should be a list of bootstrap cards with images, card titles, card text. The second card from the top of the list will be a special card that is mainly a TextArea with a dynamic list of buttons appearing below it. The rest of the card list continues below the second card. The user should be able to scroll down to view the card list.
On the right side, you have a set of 3 cards that are static and stay on the screen even when scrolling.
3. "Studio" page
A simple form page that consists of an image on the right side, as well as a title, some text and a set of input elements . There should be a "Reload" button below the image and a "Discard" and "Confirm Changes" button to submit the form. The form must be prepopulated from Firestore (use any simple schema to prove that it works). Submission should result in the appropriate Firestore document being updated.
1. React hooks and contexts
2. React Router for navigation
3. Firebase sdk for basic login/logout auth.
The attached pdf file provides a basic mockup that shows the three pages being requested.
1. Signed out page
Very simple page with navbar, full page background image, main heading, lead text and two buttons for call to action.
Login button should allow user to login with Google (using firebase sdk).
2. "Main" page
Split into 70-30 columns. Main portion should be a list of bootstrap cards with images, card titles, card text. The second card from the top of the list will be a special card that is mainly a TextArea with a dynamic list of buttons appearing below it. The rest of the card list continues below the second card. The user should be able to scroll down to view the card list.
On the right side, you have a set of 3 cards that are static and stay on the screen even when scrolling.
3. "Studio" page
A simple form page that consists of an image on the right side, as well as a title, some text and a set of input elements . There should be a "Reload" button below the image and a "Discard" and "Confirm Changes" button to submit the form. The form must be prepopulated from Firestore (use any simple schema to prove that it works). Submission should result in the appropriate Firestore document being updated.