Most probably setting outline to none will fix it .

Create a State(underMaintenance, setUnderMaintainence) hook initially to set false in app.js which when true the App fill return that page to the user

The Login Page and Register Box are not responsive

Screenshots:

Needs changes in the designing of the website including navigation bar and styling

You have two sub-tasks :
1)Add a rule under the section explaining pull request in readme to add screenshot or screen-recording when submitting a PR.
2)Add a GSSOC logo in the 2nd last section . (Part of these open source programs . )

Currently one redirects to calendar page only on logging in and on registering one needs to log in again to enter the website .

Hint : You can use async await or then() to resolve this issue . Once the user has been create , log in by calling the same API called for logging in the user proving it with email and password .

On clicking the edit button in the test should become editable and a save button should appear. This will replace the current usage of Modal to edit task names and description.

• If you have gone through the website you must have seen there is a quote section. Now when you try to edit, it just omits the last quote completely and take whatever is written in the box(Modal) it even disappears if no change is made.
• You can go through the Notes and Movie list section which has edit features but they don't disappear like in here(quote section).
• For better understand pleasing ping me on discord .

A small triangular button should come near the IMDb header to sort the list based on the IMDb rating.

You must have observed when deleting a task just clicking on the cross button deletes it. I want you to display a pop-up to confirm the deletion.
Message can be "Are you sure you want to delete the task".
Earlier:
Click on Cross -> Task Deleted
How it should be ?
Click on Cross -> Modal Pops Up -> Confirm ? Task Deleted : Modal Closes .

In the Movie list, there is an option to edit the description but not the movie name. The modal should have the option to edit both movie name and description, you can refer to how the notes and ideas section functions. It has an edit feature for both the heading and the note.

You must have encountered that when you go to the movie list page, notes page, or tasks page. The page shows a blank white screen before fetching the lists. To solve this issue you need to show a loading sign till the list has been fetched.

You can look at how the app.js returns a loading page till it has got a response using the useState react hook.

Best of Luck

Currently, the date selection is allowed for future dates as well which is not logical according to what diary is meant for. Solution proposed : The user will only be able to select date till today or past dates but not future ones.

A blue line appears on the login page please fix it. It should not appear.

The images load slowly causing bad UI experience for the user . Maybe display a circular loader till the images have loaded .

On entering email generally, password shows up. But this is not happening here .

The current index.js in the Backend folder is becoming quite complex. So create new files (1 each more movie list , diary and notes)that will containers queries for Movie List, Diary and notes .

Just create the UI. The link should come below Movie List in the navbar.

When a user clicks on done a Confetti celebration should throw up.

You can use this library or any other package of your choice

https://www.npmjs.com/package/react-confetti

https://planzap.netlify.app/Calendar This link takes you the tasks and progress page make sure you change it .

The structure and understanding of the documentation can be improved . For example, diving it into sections like installing required apps to run the app on local machines. Telling about how the app is structured. Improve UI of the documentation.

While running the app by running the npm start command on the console then there is a number of warnings that are coming on the console.
These warnings will be resolved in this issue.

Snapshot of warning-

Checkout on how trying to delete a task gives out a pop-up to confirm it. To close the issue you have brought in the same feature to confirm deletion of Movie/Task.
A message like "Are you sure you want to delete the movie from movielisr" or something similar would suffice .

Try to follow the same pattern as other parts of the documentation.
You have to add the following things to the documentation.
1)How to merge latest changes to the forked project repo from the remote (Orig.) repo ,?
2) How to create a PR?
3)How to resolve merge conflicts.

You must have observed a new confetti feature on our website. The thing is this appears even when a user deletes a task (clicking on a cross button) . To resolve this call the API call when user wants to delete and API call when user has completed the task should come inside different functions .

This should be replaces by an icon on trashcan from material UI and should be next to the edit icon .

• The UI of the login page has to be improved
• There should be a login window for registered users.
• There should be a registration pop-up for non-registered users.
• After user has completed registration , display a message saying registration complete and a link to redirect to login page

If the confirm password and password doesn't match it should show "Password" doesn't match . There are multiple npm packages which you can use to implement this feature .

following should be added .

1. only npm to be used for managing packages.
   2)only those libraries and packages which have >1000 downloads per weeks to be used .
   3)spamming issues may lead to banning user from contributing to the project.
   4)No disrespectful comments towards any gender , sex , caste , nationality will be tolerated .

If you have checked out the diary page . You must have noticed once user puts and new entry or updates a entry , the new /updated entry doesn't automatically appear . User has to select the date and click on view to see his entry . This should be replaced by whenever the user submits a new entry it should appear below the date selection region,

On click Add/Update entry the Modal should close . Also the Update/Add entry button should be smaller .

A section should come below the "Ideas and Notes" section explaining to new users how the website needs to be used. Like how to add tasks, how to edit them, how to add a new note etc.

You can use Yup package for this .

A button should come up beside the Add New Task clicking on which a pop showing all tasks will appear. Now there should be an option to arrange the tasks in the following manner :

1)Based on deadline (a task with the earliest deadline should come at the top)

2)Based on % of work left (a task with most work left will come at the top)

3)Based on both (here you should or can use the fractional knapsack concept, you will arrange elements by the
following formula: (% work left / No. of days left )* (3/2/1 for highest/medium/lowest priority) , the one with the highest value of the given formula will come at top)

You can refer to the following article : https://stackoverflow.com/questions/5002848/how-to-define-custom-sort-function-in-javascript

The diary entry page seems non-functional , a user cannot see his entries after entering it .

You must have seen our website is not quite responsive, the thing is its design in a such a way it's not possible to make it one but what we can do here is just switch the entire app to landscape mode when the width is less than 600px

You have to display a warning message this website is viewable only in landscape mode and block the rest of the website.

Currently, the user is able to select previous dates than today which is not feasible.
Solution proposed. The calendar should disable the selection of past dates than today and allow only selection of future dates.

You must have observed the modal is not exactly responsive when viewing the site in landscape mode . You need to fix it .

I think there are conflicts in CSS imports in the mentioned pop-ups. Try to resolve it.
The size of the add entry is too big

The button is too big for the modal .

Remove the View button in the diary section. The diary entry view api should be called on changing i.e selecting a date .

The current loading page has a very poor UI this can be improved. I am open to suggestions

The imdb column should be thinner as it will contain max 3 digits . The movie name and description should has more padding on left add 2X nbsp; or just increase the left padding .

These things are to improved :

1. The late loading the images (screenshots)
   2)General UI ,.

You should use localStorage to check if the user has visited the website or not.

On logging, in the first time, a pop-up should suggest the user to visit the how to use section a button in the popup "Go to How to use" should re-direct her to how to use section /

When the cursor hovers over the logout section it modifies itself to think it as a text element but it should be a pointer .

There are some errors for smaller screens. I am attaching the screenshots

The title content is hiding behind the screen

The "Update/Add" button and "Date" button content is hiding

The Imdb button has error

The current deletion Pop-up needs to be enhanced. Do your best and attach a screenshot . Also change the message from are you sure to delete to Do you want to delete the task (for tasks ), movie (for movies )