udacityfrontendscholarship / task-master

This application is a collaborative project made by the Google Udacity Front End Web Developer Scholars.

Table of Contents

• Current Live Pages
• Back-End Implementation
• Current Status
• Next Up
• What you can do?
• Usage
• Background
• Color Palette
• Key Features
  • Probable Front End Work
  • Probable Back End Work
• Features in detail
• New to this? Maybe this can help

Current Live Pages

Home Page
Login Page
Signup Page
User Dashboard
ThankYou Page

Back-End Implementation

TaskMaster

Current Status

• Home Page, Login Page, Signup Page, Profile Page & ThankYou Page has been designed (Thanks to collective effort)

- Also Back-End is implementated as well as deployed

Next Up

• Upgrade, Bug Fixes & Testing! Minor improvements required!

What you can do?

• Fork this repo, understand the code. Whatever work has to be done, you can find it in the issues tab. If you want to work on something by you own, raise an issue, WAIT FOR COLLABORATORS to APPROVE it, then go ahead with you code.

Usage

This is an online goal setting app where the number of goals and tasks to be done are written down and includes various additional features.

Background

TaskMaster is an opensource software created with the help of Udacity scholars in front end web development. This software is made with a hope and a vision that the traditional way of setting everyday TO-DO's and goals should be replaced with a more advanced version for the modern digitized era.

Color Palette

Shades of Primary colors

Some Funky colors

Of the second link, the teal , both shades of pink will be used for border/buttons only.

Key Features

Probable Front End Work

• Home page/landing page setup
• Activating and linking the different sites from the home page
• Linking the different additional pages to the homepage
• Adding more tabs in the additional navigation bar
• Making the layout of different additional pages
• Beautifying pages in the best way possible and with special emphasis on visual appearance
• Beautifying the <user_home_page>(after someone has logged in)[refer to pg. 3 of the pdf] after backend work has been completed provides a basic structure
• Designing the alarm feature (along with popups)
• Implementing the notification of upcoming goal deadlines and important goals feed

Probable Back End Work

• Getting the Contact Me form in the landing(home) page to actually be able to contact someone
• Getting the Login with Google feature to actually work
• Designing a sync feature with your Gmail account
• Attaching pictures with your goals
• Devise a system to prioritize your goals
• Using different colors for different priority of goals

Features in detail

HOMEPAGE - This page contains three sections viz. Home, Introduction & Why TaskMaster? on the navigation bar and clicking any one of them would trigger a smooth scrolling down the home page. These three sections fit into the first page of the web app. As stated in the mockup pdf there should be a ‘Tick’ in Home which when clicked on, starts an animation explaining what TaskMaster is all about. Below this, a button entitled ‘Get Started’ enables a user to visit the Login/Sign-up page. Lastly, on the footer various media links like Quora, LinkedIn can be provided. Other modifications can be open-ended and suggestions are welcome for improving the UI/UX!

LOGIN / SIGNUP PAGE - This page contains the login (for the existing users) or sign-up (for the new users) option. Signing in via Google is also supported. There is also a button to share about this app on Facebook. It includes a live background with video or canvas elements.

USER DASHBOARD - This page basically would be divided into three columns with a lot of interactivity. The leftmost column will include the list of upcoming goals along with deadlines. The rightmost column includes the list of prioritized goals which can be displayed as a pop-up to the browser whenever a user opens up his/her browser. The middle column consists of a section for creating the goal itself with several buttons as follows:

Calendar Tool - This tool will set the date on which the reminder will come up as a popup.

Alarm Popup - This tool will set the required alarm (if any) & the time of the alarm.

Goal Priority - This tool will set the priority of the goal by assigning it a number which automatically updates the list in the
rightmost column.

Flash Button - This tool enables a pop-up of prioritizing goal whenever a user opens up his/her browser.

Add Media - This tool enables a user to add any media files like images, music, videos attached with the goal when creating it.

Create Goal - This tool will finally create the goal and the page would be updated.

Only the first page would include a Contact Us section which can be accessed by clicking on it as shown in the mockup pdf.

New to this? Maybe this can help

• Getting the hang of the code

• MUST READ THIS BEFORE YOU COMMIT

• Don't contact moderators if you see an anomaly in the code and if you think some function is not working properly. Just raise an issue on github. That way more and more contributors can see that and the issue can be resolved faster

• REFER TO THE PDF FOR A ROUGH IDEA ON THE PROJECT

Refer to CONTRIBUTING.MD for more information on how to contribute to this project!

The TaskMaster Team

task-master's Issues

Need of Contribution guidelines

As mentioned in slack earlier we need Contribution guideline so that we can keep our repository clean and avoid any conflicts between 2 people while making any PR.

I'll be working on this :)

The Entire Landing page should be a One Page Template.

If you don't know what is one page template, please google it :)
Make sure all template uses Materialize and not Bootstrap.

One page template will give the scrolling Feature.

Page 1:

Since it is a one page template, when we scroll down, the introduction page slides downwards. :)

Page 2:

Introduction should be on the same page . It should be a ONE PAGE TEMPLATE.
Text in introduction should preferably be the same.

Page 3: Within the first Page.

The Footer

The footer should contain the Contact me form where the Contact me form slides into the page.

Login & signup page card not responsive for mobile device

The width for the mobile should be expanded

Remove slider.js

Can any mod/comod can remove or give permission to remove slider.js? because it's code is not used but it is linked in pages which is throwing error to console.

why you are using two versions of css

we should remove the minified version, it will be easy to work with the normal version

No proper folder structure

The folder structure is not organized.

see: Dealing with files - Learn web development | MDN

Why are we using templates all of a sudden?

Thought we had already settled on folder structure and Materialize CSS/JS framework in #10. Hence PR #12 was merged.

However the commits a26d0c5, 0ae4042, 0bee36b overwrite those changes made by the PR.
Now as a result all the files for Materialize framework are gone and replaced with the "Grayscale" template.

Navigation Bar should look like this.

Leave a feature to add extra pages using from the dropdown bar.
The navigation should be responsive.

Designing Profile Page view

It is just the Frontend part of Profile page which needs to be done with the help of materialize css.

back-ground animation of signup, also colors are not synchronised !

synchronised

JS are not managed

script are written in html files as of now. making separate js files for each page will make it more manageable .

We will switch the whole Framework to materialise.

The whole framework will be switched to materialise which is not very different than bootstrap, but very different feel when it comes to looks. Everyone please be stay tuned and refork the repository when we announce it.

https://www.youtube.com/watch?v=nqT8c5OFjEQ&t=89s&list=PLjVyJ3LWJ8eD58MX3O_lNTmo9Z2op2RCF&index=1

A crash course on this. :)

Making Login Page

Making Login Page so that people could login from there.

No introduction section in index and navbar not responsive

also slider image is changing too fast

Footer comes up with the keyboard when input field is selected on login & signup page

The screenshot was taken from Lenovo-5inch-android os phone
also, the login& signup card is not exactly scrollable, the top part goes over the screen when an input field is selected & it's not scrollable
Whom so ever interested in this issue say so, wait for the moderator's permission then go ahead with resolving the issue

Setup GitHub pages

We should create GitHub pages to have live demo of our app.

Implementation of task-master dashboard

I want to work on its layout

Proposing a Material Design Revamp for the Home Page layout (Retina ready)

Proposal for a revamped Material Design Responsive Home Page

I propose the following changes to the current build as I feel I can contribute in the design and overall aesthetics of TASKMASTER.

1. One Pager Website : Although the current homepage is a one pager, but to make it more interactive I would like to convert it to a more clean material theme while maintaining the current colour scheme (Black, White and Turquoise).

2. Introduction Section | Why Taskmaster and Contact Section : These section come into same viewport while it would be more easy for the user's readability if these three sections come into three viewports respectively (that is one screen-one section-one scroll at a time).

3. The Contact Section : I am working on making the current form materialized and also working towards fixing the latest industry standard icons (my functional design snap attached with gradient of Turquoise Colour).

OR A MORE INTERACTIVE CONTACT FORM VERSION (for the intricacies / corner-case or other expectations from the project )

4. The Footer : Aligning the Footer in accordance with the material theme. Giving an enhanced layout to the sitemap column. Aligning the social media icons in Links Column.

5. Alignment of Sections in the Navigation Bar: Currently the section stretch to the end of the screen and not with the website's content.

6. Banner Images : The banner images are pixelated do not fit the screen (at-least not my system). Will work on fixing this or using better quality copyright images that ensure full width compatibility.

7. Logo for Task Master : I also have a Logo in drafts. I'll be vectorising it pretty soon, once the above task is done.

                               ### - (from a UI Design enthusiast's perspective)
   

sign up page Enhancement!

please do something in the background... make it more interactive ... manipulate particle.js like the login page if you need to! , also provide an or between signup and google...

login page line 149

throwing uncaught reference error. someone familiar with particle do fix this error.

hosting

Can't we have this project hosted on github so that we can see the changes made live ?

Navigation bar drop down should appear when we resize the page.

sign up page not responsive, also glitch problem at very beginning.

Adding Social Media Icons.

Either ADD icons of the social media in the footer, OR add social media SIDEBAR.

Change the background transition time.

We would like you to change delay the time interval of the background image change.

I think adding a few extra seconds between intervals would be great.

The particle.js used in the Login Page doesn't respond to all areas!

The div tag with an id of box keeps blocking the effect of partcle.js in the background! Kindly look into this matter.

Need modification in Homepage | Mobile Compatible

For mobile view it is not looking great. We need to fix this.
If anyone want to work on this please make sure you comment here that you are working on it.

Making Signup Page

The Page from where users will be able to signup

Fix the focussed Input

When focussing on input section for email or password there are lines on either side that appears which needs to be fixed!

Fix those red lines on the side!
NOTE - these lines only appear when you click on the input section! Do not alter or modify other aspects of the code while addressing this issue!

whole page is flickering when we click on nav bar icons!

actually, when I am looking at the site and testing all the buttons I came up with this bug any idea on how to fix that flickering effect?

Designing the Login page view.

Currently Priyabrata is assigned to bring the current framework of the page into effect.

Modification in Login Page | Mobile Compatible

For some reason the login page div is overflowing and overlapping the footer. This needs to be fixed and also it must look nice in Mobile view. (Can be seen in Screenshot)

If you are new to Github and want to take on this issue then please do comment down and start working.

Make the Login Form stunnigly beautiful with Animation

For now, the login page is more or less responsive so focus on making the form itself stunning! Don't change or modify other parts (if you want to open a New Issue about it then do it) The form is simple, make it look good and cool!

Backend for dashboard

How are we going to authenticate a user and how will we generate automatically after signup what is the backend for this

Homepage doesn't Looks Attractive, Check Out this!

Check Out Both.!

Index page - section tag - opening tag is not closed

Here there should be closing arrow

Import framework rather using a cdn

I would suggest not to go with CDN as if we do have to change things we'are overwriting CSS every time and importing framework will give us the flexibility to tweak that.........I

log in page doesn't look good in mobile view

Modification in Loading animation

It would be great if anyone can come up with better implementation to view loading div. (Can be seen in screenshot)
Currently if you will refresh, then you will notice one loading animation but it's looking great.

We can try to put whole background as white when the page is loading and then show the content.

App name can be crowdsourced and picked

How about a renaming our app with crowd suggestion..I felt task master not conveys the goal setting.Its my personal opinion.

Sliding images fit to fullscreen

Make the sliding image of full viewport width and height without compromising the next sections & also add a button as shown -

Improvement of profile page UI

want to work on this.

Size of Submit button on homepage

The size of the submit button in the contact section of homepage looks inappropriate. It should be small and centre aligned or aligned to the right under the feedback input.

Add a wallpaper that changes with time.

Can anyone add a wallpaper that changes with time?

At t=x sec

At t=x+3 sec

At t=6 seconds

Wrong hyperlinks in README.MD

Table of content has two anchor tags with incorrect links to 'Probable Front End Work' & 'Probable Back End Work'.

The footer isn't same as the one in homepage!

Please look into this matter as the footer in the login page lacks certain CSS stylings!

Modified tasks card

Added shades of black according to task priority & scroll bar to task cards
link: https://bhaskarsingh.github.io/task-master/profile

Designing the Social Media Sidebar.(Use Materialize)

The social media sidebar should preferably look like this.

Homepage Slider UI should be better and scroll should be smooth

There is a pending pull request from a user who has done tweaking on sliders issue no. #70
please merge so I can take a pull and fix this up

Designing a "Register Page"

Currently Sahkal is assigned to bring the current framework of the page into effect.