• FOCUS is built with React. v16.14.0 is used for compatibility with the Enzyme testing library.
• Material UI (core and icon) and Font Awesome are used for the application look and feel.
• use-persisted-state library is used to store data when an API endpoint is not yet available.

SCSS module files are used for styling. That is, style.module.scss files are included within each component folder.

Widgets are currently laid out in a flex container. (Ideally, this would be replaced with a CSS Grid solution for better alignment with incomplete rows.) Each widget is contained within a styled div that enforces a width of 340px.

<div className={styles.widget}>
    <WidgetName />
</div>

Accordingly, widgets should not attempt to make any assumptions about their sizing, but instead size themselves to width: 100%;, thus deferring to the parent container.

(see Coding Conventions for more details on how to comply with this file structure)

src
--- App
--- components
--- images
--- pages
--- index.js
--- style.css

App component defines the app routes:
/ and /signup paths show the LandingPage
/login path shows the LoginPage
/home path shows the HomePage

LandingPage is where the user can signup (note, not currently linked to backend so redirects to home page) or redirect to the login page
LoginPage is where the user can login with their credentials
HomePage shows the main application contents

Header component is shown on the HomePage. It contains the DateTime, SearchBar, and SelectWidgetsModal.

Body component is shown on the HomePage. When empty, it contains the SelectWidgetsModel. Otherwise, it contains the selected Core Widget Components.

The aim of the CalendarWidget is to allow the user to keep track of the present day, week, month, or year. It allows the user to create, update, and delete events.

The calendar widget is implemented using the React-Calendar package.

The widget has three components; the first component is the month view. The second component is the event list which will list the events of a selected day (current day by default) underneath the month view. The third component is where users can add new events to the selected day.

The aim of the "QuoteOfTheDayWidget" is to show the user entertaining/inspirational/knowledgeable quotes. The widget also allows the user to change the categories of quotes that the user gets.

The "QuoteOfTheDayWidget" utilizes the following APIs in order to get the quotes needed.

• Kanye West: https://api.kanye.rest
• Inspirational: https://type.fit/api/quotes
• Programming: http://quotes.stormconsultancy.co.uk/random.json
• Taylor Swift: https://api.taylor.rest/
• Anime: https://animechan.vercel.app/api/random

The ToDoList component has two views: UpcomingToDO and TodaysToDo. The items that appear on each list depend on the date that was set for the todo item when it was created. Todolist items are stored in local storage with the key "todoList" Accumulated Task Points for use in the plant game are stored in local storage with the key "taskPoints". Task points increment when a to do list item is checked off, and decrement to a minimum of 0 when one is unchecked.

On click, the PlantButton will open the PlantTreesModal. This modal contains a ControlButton (a watering can that can be clicked), a Plant (an image showing a different state of growth depending on the player's progress), and UserFeedback - a progress bar and a message to the user. On click of the watering can, a task point is spent and the progress will increment by 1. Plant growing progress is stored in local storage with the key "progress". Task points are decrement to a minimum of 0 when the watering can is clicked.

On click of Start, the timer will start counting up. On click of Stop, the count will pause. One Reset, the timer will stop and reset to 0.

The Weather component contains three parts: the current weather situation, 6-hour weather forecast and 5-days weather forecast. It calls on an external Weather API (OpenWeatherMap: https://openweathermap.org/) to display the weather of the user's current location. If the user does not allow the website access to their location, then the weather widget will default to displaying the weather in Auckland, New Zealand.

When the component is added, the fact of the day will display today's fact. Additionally, there is a button to generate a random fact. This component uses the Fact API (Random Useless Fact: https://uselessfacts.jsph.pl/) to generate today's fact and random facts.

If the user has a premium Spotify account, they can login through this widget and play music. However, it is not a web player and needs its own instance of Spotify running (e.g Spotify for Desktop or Spotify app on mobile). The default music is from the public playlist "lofi hip hop music - beats to relax/study to", but the user can select their own playlist in their Spotify instance if the user wishes. This widget uses the Spotify Web API.

The News Widget will display 20 headlines in a scrollable window. The headlines can be filtered by topics such as sport, technology, business, health, or entertainment using a drop down selection. Headlines can also be filtered by either New Zealand, Australian, US news sources. Each headline is a link to the original article. News headlines are generated using the News API.

The DateTime component shows the date in the format of hh:mm AM/PM | day date month . The setTimeout method is used so that every minute the component will rerender and fetch the new time. DateTime component was created as a React functional component.

The SearchBar component allows the user to perform a Google search. It is a Material UI InputBase component with an IconButton. On click, a search query will be sent to www.google.co.nz/search with the contents of the input box, which opens in a new tab.

Selected widgets are stored in local storage with the key "selectedWidgets"