softeng701-group5/assignment1

Mello is a web-based application designed to revolutionize the way users organize and break tasks down into sizeable time chunks. This project is associated with The University of Auckland SOFTENG 701.

SOFTENG701 Group5 - Assignment1

Mello is a web-based application designed to revolutionize the way users organize and break tasks down into sizeable time chunks.

This project is associated with The University of Auckland SOFTENG 701.

CI	Status
Tests
End to End Tests
ESLint and Prettier
Build and Deploy

Setting up

1. Go to the shared repository, and click the 'Fork' button in the top right corner
2. Click on your username to create your own copy of the shared repository. This is where you will collate your work
3. Open a command prompt window on your computer, and navigate to the directory you want to store the project
4. In your forked repository, click the green 'Code' button, and copy the github url in it
5. In your command prompt, execute git clone [copied-url]. This should download your forked repository
6. Run the command cd assignment1 to go into the assignment folder
7. Run the command git remote add origin [copied-url] to make sure your project is linked to your forked repository
8. Go to the shared repository, click the green 'Code' button, and copy the link
9. In your command prompt, run git remote add upstream [new-copied-url] to link your project to the shared repository
10. Run npm install to make sure your project is up to date

assignment1's Issues

Update firebase documentation

Update firebase documentation

Task Board Drag and Drop

Add the ability to drag tasks between the 3 vertical columns in the Trello board screen. The ability to drag/reorder tasks within one column can also be added but depending on how much time we have this can be left. This functionality should also be linked to firebease so that the changes are persisted.

Trello initial styling

Initial setup of the Trello screen. Basically just getting the screen to show, ideally with the background. If/when the sidebar is complete, it should also be visible.

Create a global TextInput component

Create UI design mockups

Mockup designs for the Trello Board View of Tasks and Task Features screens.

Sign out from nav bar

Depends on #24

Wiki Pages Documentations

Setting up and maintaining a Wiki documentation of this Github Repository.

• Set up Wiki Page's sidebar and footer
• Set up and add contents to relevant Wiki pages

Task Board columns

Add 3 vertical columns to the screen. The columns are to contain tasks. The leftmost task should have a dummy '+' button that will have its functionality linked up later on. The 'Today's Tasks' screen has a similar list that Yuno mentioned could be heavily reused. in our screen

Add new task modal

• Make add new task button
• Make the modal for creating a new task

Background circles restrict content on smaller viewport

Current behaviour:
On smaller viewport sizes, the background circles cause overflow, pushing the main content in and shrinking it.

Expected behaviour:
The background circles can overflow their parent element without affecting other content. This could involve the circles scaling with viewport size.

scale down navbar icons

Create Welcome Dashboard and add Current Tasks component

Initial project config

• Use scss for styling
• Folder hierarchy

Fix firebase Sign-up method

Change the sign-up method by allowing firebase to associate a first and last name to the user's account upon sign-up.

Login routing

• Default to login
• After login, direct to home page
  Depends on #13

Adding ESLint into the project

ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

• Configure ESLint
• Configure integration of Jest and Prettier
• Fix all current linting issues

Initial set up of repo

Set up project to use react + npm.
Create a .gitignore

Navbar removed from login

currently the Navbar is visible on all screens, including the login screen. This needs to be removed, so it is only visible after the user signs in

Button component changes

The current button component throws errors whenever any of the props aren't specified.
Not all the buttons will be a direct link, and they won't all have icons, so this shouldn't cause errors.

I think there should also be an onClick prop for specifying custom click events

Reset forgotten password

Allow a user to reset their password if they've forgotten it

Depends on #14

Home screen page

Create initial home page in React based on the prototype design.

Firebase Authentication

Using Firebase:

• Create Firebase project
  • Email: [email protected]
  • Password: Goodgradesplease9
• Allow user authentication with Firebase project
  • Create user login/sign-out functionality
  • Create user Sign-up functionality
  • Create “service” file for easy access to Firebase authentication functionality

Firebase create task set's the task as incomplete

The firebase create task method now sets the task as not completed

Adding icons and images

Create Welcome Dashboard page

Create Welcome Dashboard page in React based on the prototype design.

Firebase lint problem

Firebase related files were not "linted".

Current TimerModal shortcuts used

TimerModal is an extension of the dashboard (under the current task component). Made our life easier by using shortcuts to create this component. These need to be refactored when the dashboard is complete:

• Move the TimerContextProvider global state to the appropriate component (currently in index.js)
• Move the TimeModal route to the appropriate component (currently in app.js)

End-to-End Testing

As part of our CI/CD, we need to include some form of end-to-end testing. This will be done using Cypress and integrated into our git actions.

A limitation that might pop up is needing to access the firebase database to log-in, which may cause issues due to the limited amount of accesses our database can have. Will also look into ways to get around this limitation.

Create task button component

Task Board Task Sorting

Change the order that the tasks are sorted within their vertical column. Examples of the way that tasks can be sorted include due date and class priority.

Main content size

Current behaviour:
The main content div doesn't span the width of the page, and instead fits to the width of the content

Expected behaviour:
Main content div spans all available space between the right-side of the page and the navbar

Firebase CRUD

• Create CRUD functions to communicate with Firebase
  • create task
  • get tasks
  • update task
  • delete task

Add Current Task and Notes components to left side of timerModal

Firebase Documentation

Create documentation for:

• The methods provided for Firebase Authentication
• Firebase Cloud Firestore Database CRUD methods

Provide a method of authenticating future requests

• Tokens?
• Store user details and pass through with each request?

Need to decide on approach

Create login box component

• Email entry
• Password entry
• Submit
• Link to signup

Create current task component

Create the central component to display the current task, notes, timer and timer config to be placed on the dashboard.

Create the Code of Conduct

Workflow doc

Create a doc (wiki, readme, etc) to detail the workflow for the project. Should include:

• Forking the main repo
• Setting up local repo with remote & upstream
• Creating new branches
  • Feature branch
  • Issue branch (for a smaller part of a feature)
• Making PRs
• Getting reviews

Missing textinput colour variables

Create timer config screen in current task component

Setup react router

Side navbar

add a side navbar to navigate between different pages.
Also the option for the user to log out.

Create new user account

After user submits signup form

• Send data to firebase
• Get confirmation
• Redirect to login

Depends on #24 & #11

Task Board link functionality of 'add task' button

The 'add task' button was originally added as a dummy. Once the popup for adding a task has been developed, the functionality can be linked up.

Change the resize button in TimerModal

There is no way to access the timer-modal from the dashboard. When the dashboard has completed, change the onClick handler on the maximise button to bring up the timer-modal.

Authorise user login

• Allow authorised users to enter
• Prevent unauthorised logins

Depends on #10 & #24

Navbar account icons bug fix

Create signup box component

• First name entry
• Last name entry
• Email entry
• Password entry
• Confirm password
• Submit entries
• Cancel sign up

Check login/signup inputs for validity, give user feedback if not

The inputs given to the login and signup textfields should be checked. We need to make sure that all the inputs have been provided. If an input isn't provided, we should notify the user that it was missing.
Inputs should also be processed to some degree. At a minimum, we should remove leading/trailing whitespace

Depends on #10 & #11