Add a common layout for all pages.

Layout design specs

• The layout should have a navbar section and page section
• The page section should render one of the page based on the selection of tabs and route path
• The navbar should contain:
  • Public: Home and About tabs (ideally in the center or to the left) for HomePage and About Page display in the page section
  • Private(Should be visible only when logged in): Tasks and Calendar tabs along with the above mentioned for Tasks page and Calendar page
  • A small profile pic image on the right of the navbar or alongside the tabs mentioned above, with the name. Clicking on which should change the route to profile page.

Use the process environment variable to distinguish between the requests made to endpoints and serve them accordingly

Add a Calendar component.

• The calendar should look similar to the one in GitHub.
  
• There should be a button on both sides(towards left and right) to move the calendar.
• All the cells should allow to darken the commit but not to make lighter. i.e., you can't undo commits but you can create commits.
• When clicked on buttons to move the calendar all the labels that indicate month and week should update.

The created on field in the profile tab is not showing the date and time in proper format. It is only showing the time.

Create a logo to place in the navbar of the site @ gragitty.netlify.com

Suggestion:
A logo similar to that of Github with a paint brush and grafitty sprayer in each hand.

Running locally results in
Unable to connect Firefox can’t establish a connection to the server at localhost:8000. after login

Add an About page

This is a public page can be visible to any user irrespective of logged in or not.

The page should contain

• A description of the site
• Authors and Contributors to gragitty-frontend, gragitty and gragitty-backend repositories
• Links to the above repositories
• Terms and conditions or any disclaimer content
• Hosted using Heroku, Netlify and Pythonanywhere logos and links
• Contact us section - where we can add links and emails, twitter handles

Add a profile page to view the user profile

This should be a private page and should be available only on login

The page should contain

• All the profile details, Name, Email, Username, GitProfile link, Profile picture from Github, 'user since' date, Tasks completed, Tasks pending and other stats
• None of them should be editable and updatable.
• A logout button

Add a Tasks page

This is a private route. Should only be visible to logged-in users.

The page should have these

• A search bar, dropdown to filter fields related to data
• A list view by default visible, where I can see the list of tasks that belong to the user, sorted in chronological order of latest first.
• Clicking on a task should show a detailed view section in between the search bar and list view section. Once the detailed view section is visible the selected record should be on top of the list if the list view long enough to be scrolled.
• Detailed section should allow edit and update of values of fields for each task. If already completed task is edited then by default it should be marked back to not completed.

Add a login page and a mechanism to handle logins and redirects required to get the user logged in.

Add a Homepage - all routes must be implemented using react-router.

For all users - this is public content

• It should contain the hero image or name of the application 'gragitty' and description of the site and service provided
• A foreword saying the terms and conditions and instruction for the user to make the email and name fields public in their profile, with a link to settings page
• A login button to log in using GitHub and authorize the GitHub gragitty application to do its things
• An about page that is visible to all - even if the user is logged in

If user is logged in

• He should see the recent 10 activities and commits made with his name
• Also a list of usernames who recently used the application to paint their profile calendar - limit it to maybe 20 or 50
• The user should see a nav bar to navigate to editable calendar and tasks section where he can see scheduled and completed tasks that belong to him.

Add a Calendar page

This is a private route. Should only be visible to logged-in users.

The page should have these

• Should contain the calendar similar to that of GitHub profile
• Refer https://codepen.io/sebdeckers/pen/vOXeKV for more information
• It should receive an initial state similar to the one in the above link. Which will help painting the commits that have already been made by the user.
• There should be a save button which should save the state and make a POST request to an endpoint
• There should be a next and prev buttons to show next/prev week or month or year. So ideally 3 previous and 3 next buttons for each of the types mentioned.
• For the state instead of having just 0-4 enum values for each color. It is better to have a tuple in the form of (color, contributions_made_on_that_day).

  Suppose if I made 12 contributions on a day and that day is shown with dark green color then the tuple should be (4, 12)