Giter VIP home page Giter VIP logo

catch-of-the-day's Introduction

Catch of the Day

This is my first React project that I did as part of the React For Beginners by Wes Bos. The purpose of this project was to create an online fish market where all the features were created using React. Also, it uses Firebase for real-time application persistence and authentication as well as LocalStorage for browser persistence.

Getting Started

Software requirements

  • React 15.0.0

  • Firebase 2.3.1

  • LocalStorage

Note:  Please see package.json for additional details regarding dependencies.
       Also, Firebase 2.3.1 only works with the Firebase legacy platform.

Create Firebase Account

https://firebase.google.com

Create Firebase Project

  1. Click to console in the upper hand of the web page.

  2. Click Create New Project

  3. Set Project name to catch of the day

  4. Click Create Project

Update the Firebase Project path to your project

  1. Replace YOUR-FIREBASE-PROJECT-URL with the URL that appears in the Database section within the Firebase console. Thus, you'll need to update the following files:

    /path/to/project/scripts/components/App.js
    /path/to/project/scripts/components/Inventory.js
    

Starting the local server

$ gulp

Note: This will allow you to make changes to the running application without having to restart the server.

Configuring Authentication

  • create a Github application and connect it with Firebase console

    • on Github.com, https://github.com/settings/developers

    • enter Application name as

      Catch of the Day
      
    • enter Homepage URL as

      http://localhost:3000
      
    • enter Application description as

      Catch of the Day
      
    • enter Authorization callback URL as

      https://auth.firebase.com/v2/catch-of-the-day-cwt/auth/github/callback
      
    • click Register application

    • on Firbase.com console, navigate to Login & Auth

    • click the Github tab

    • enter GitHub Client ID and GitHub Client ID

  • create a Facebook application and connect it with Firebase console

    • on Facebook.com, https://developers.facebook.com/apps/

    • click, Add a New App

    • click, Website

    • click Skip and Create App ID

    • enter Display Name

      Catch of the Day
      
    • enter contact e-mail address as

      YOUR-EMAIL-ADDRESS
      
    • enter Choose a Category as

      Food & Drink
      
    • click Create App ID

    • enter App Domains as

      http://localhost:3000
      
    • click Add platform

    • enter Site URL as

      http://localhost:3000
      
    • click Save Changes

    • on Firbase.com console, navigate to Login & Auth

    • click the Facebook tab

    • click Enable Facebook Authentication checkbox

    • enter Facebook App Id and Facebook App Secret

  • create a Twitter application and connect it with Firebase console

    • on Twitter.com, https://apps.twitter.com

    • click, Create New App

    • enter Name as

      Catch of the Day
      
    • enter Description as

      Catch of the Day
      
    • enter Website as

      http://localhost:3000
      
    • enter Callback URL as

      https://auth.firebase.com/v2/catch-of-the-day-cwt/auth/twitter/callback
      
    • accept the Twitter Developer Agreement by clicking checkbox

    • click Create your Twitter application

    • on Firbase.com console, navigate to Login & Auth

    • click the Twitter tab

    • click Enable Twitter Authentication checkbox

    • enter Twitter API Key and Twitter API Secret

Production Deployment

TBD

Support

Bug reports and feature requests can be filed against this project here:

License

Catch of the Day is released under the MIT license.

Copyright

copyright:: (c) Copyright 2016 Conrad Taylor. All Rights Reserved.

catch-of-the-day's People

Contributors

conradwt avatar

Watchers

 avatar

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.