Giter Club home page Giter Club logo

goal-coach's Introduction

Goal Coach

License

Goal Coach is responsive React and Redux app with authentication and database from Firebase to allow users to add tasks and mark them as completed.

This project was bootstrapped with Create React App.

Demo

Goal Coach - Live DEMO

Tools

Key tools used in this React project are:

Installation

node.js is required to get npm.

If you would like to download the code and try it for yourself:

  1. Clone the repo: git clone https://github.com/himank-goel/Goal-Coach.git
  2. cd Goal-Coach
  3. Install packages: npm install
  4. Type git config core.hooksPath .githooks
  5. Start dev server: npm start
  6. Open your browser at: http://localhost:3000

Firebase Setup

  1. Go to the Firebase website and sign up or log in
  2. Go to the Firebase console and make a new project
  3. Click Add project
  4. Choose a name and a location
  5. Click Add Firebase to your web app
  6. Copy the config variable and replace it in the src/firebase.js

Enabling Authentication on Firebase

  1. Go to the Firebase console
  2. Choose the previously made project
  3. Open Develop options on the sidebar
  4. Choose Authentication and under Sign-in Methods enable Email/Password
  5. Click Save

Note:
To enable OAuth using Google and Facebook follow the links and read Before you Begin:

For Google
For Facebook

Browser Support

  • Chrome 42+
  • Firefox 39+
  • Safari 10+
  • Internet Explorer 11+
  • Edge 14+

Node.js

Supports LTS version (v8).

Author

Himank Goel

License

MIT

goal-coach's People

Contributors

subclassy avatar tlazypanda avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

goal-coach's Issues

Improve the UI of the /App route page

UI of the /App page should be improved. All the while maintaining the responsiveness the website. The color scheme, fonts, sizing, etc. should match to that of the rest of the website. Any bootstrap or react template system can be used besides the current one.

Height of background image not setting

When the page is zoomed to more than a 100%, there is a blank white space below the image.
What should be done is that the background image should always cover the height of the screen. This can be done with either CSS or Javascript.

Only allow users with verified email addresses to login.

Only users who have verified their email addresses from the link in the email sent to the email address provided. Also alert should be popped up to notify users that an email for verification has been sent.
This should be done every time users sign ups or firebase checks for auth state change.

Add Name field to Sign-Up form

A name field should be added to the sign up form using the same styling as it is in the other fields. Also save the name along with the user in the database.

Design a logo for the webpage.

Design a logo for the webpage. It should be minimal and should match the color scheme of the webpage.

  • It should be placed alongside Goal-Coach at every page all the while maintaining the responsiveness
  • It should also be updated as a favicon
  • Change the title of the page to Goal-Coach

Add OAuth options for Github and Twitter

Along with google and Facebook, OAuth should be added for both GitHub and Twitter using Firebase. Also add buttons on the signin forms for the same all the while maintaining the responsiveness of the page.

Add a Password Reset option

For users who have signed up using email address and password should be allowed to reset their password after they have logged in. This should be done by using firebase services to reset password.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.