Need A little help with assignment

Create a local react application

• Create an SPA
• Login Page
  • Will check to see if there are any accounts already created (web storage indicator of some sort)
  • If there is none, display a page to create an account
    • User name, password and display name
    • The password will be a number only password
  • If there is one or more, display a page to allow the user to log in, or to allow them to create an account
    • Upon successfully logging in
      • display the display name on every page (part of a component?), this information should be passed around using properties, not session variables
      • allow the user to press a log out button at any point
        • will return user to the login page

• A Data component will be used throughout. This component will contain:
  • An h1 element that will display the title of this data component
  • An element to display the authors name, in italics
  • An element to display the data

• First page
  • The title of this page (both the tab title and some indicator on the page itself) will display My Playground
    • Remember, we have access to Javascript, which allows access to the DOM, which will allow us to see/set the title of the page
  • Will display your name, the course code and course title, and the date you started this assignment
  • Will contain an initially empty data component (see above)
  • 4 buttons
    • Appropriate text will be used for the caption of each button
    • When button 1 is pressed, display Surprise in an alert box
    • When button 2 is pressed the empty data component will be populated with:
      • Toes in the ocean, seat in the sand as the title
      • Your name as the author
      • The data displayed will be the name of a travel destination that you would like to go to and a description of that location
      • Use React to populate these, not getElementByID
    • When button 3 is pressed the empty data component will display
      • The name of a poem that you like/found
      • The author of the poem as the author of the component
      • The text of the poem as the data
      • Use React to populate these, not getElementByID
    • The fourth button will clear the data component of all text
      • This button will use CSS to somehow change the display of the button (freedom of choice)
        • Remember, you need to use className, not class, when setting a class for an object in React
• Second page
  • The title of this page (both tab title and an indicator on the page itself) will display Fun Technology
  • Will contain an initially empty data component (see above)
  • Will contain
    • 3 interesting technologies (hypothetical or new or old)
    • A more details option to get more details on the technology
    • When more details is clicked the empty data component will display
      • The Technology of interest as the title
      • The author will be the author of the information that will be displayed in the data section. If it has no author that you can find, enter the name of the webpage the data was retrieved from (e.g. Wikipedia)
      • The data that will be displayed will be
        • a description of the data
        • a personal addition of why you think it is interesting (in italics)
• Third page
  • The title of this page (both tab title and an indicator on the page itself) will display Where Am I?
  • Will contain an initially empty data component (see below)
  • Will contain
    • A button titled Start Tracking, and another titled Stop Tracking
    • When start tracking is pressed, the data component will be populated
      • Title will display Current location
      • The authors name will display currently tracking when tracking, or not tracking if stop tracking has been pressed
      • The authors name will be the author of the book
      • The data will display the latitude and longitude, constantly updated

• All pages will have a navigation component
  • This component will have three buttons to allow navigation to any of the three pages
  • The button that corresponds to the page the user is on will be a light blue, all the others will be a default colour (you can choose a different one, or use the system default)
    • I recommend using a custom button component to manage this (different from the one in the first page)

This application can be developed in any way that you want (doing minimally what is requested above). It needs to use React. It will need to use JavaScript and HTML tags. Functions/methods will need to be used to make it work appropriately

Thanks