Code Monkey home page Code Monkey logo

my-dash-capstone's Introduction

This project was bootstrapped with Create React App.

My-Dashbook Application Overview

My-Dashbook is a online legacy journal single-page application that allows users to sign-in with Google. Once a user is logged-in they will have the ability to add a new journal entry, edit an entry, view all entries, and delete an entry. Users can create, edit, and delete comments within the My-Dashbook app and post them to Facebook with a photo to share with anyone on Facebook.

Inspired by the poem "The Dash" written by Linda Ellis

Technologies Used

  • React
  • Facebook for Developers
  • JavaScript
  • Bootstrap 4
  • HTML5
  • CSS/Sass
  • Webpack
  • Firebase
    • Authentication Google Sign-In
    • Realtime Database
    • Storage
  • AWS S3

Application Features

  • User can SIGN-IN with Google
  • User can CREATE an event entry with a title, summary, and upload an entry photoe
  • User can READ all existing event entries
  • User can UPDATE an existing entry by changing one or all given entry fields (title, summary, photo)
  • User can DELETE an event entry entirely from their journal
  • Users can COMMENT within the My-Dashbook App and post them to Facebook with a photo.
  • User can SHARE My-Dashbook App on Facebook

My-Dashbook Screenshots

HOME LOGIN

Google Sign-In

My-Dashbook USER PROFILE PAGE

(Create) New My-Dashbook EVENT FORM

(Read) My-Dashbook EVENTS

(Update) My-Dashbook EVENTS FORM

My-Dashbook Comments CREATE

My-Dashbook Posted in App

My-Dashbook Comments Confirm Post to Facebook

My-Dashbook Posted on Facebook Profile

FACEBOOK SHARE My-Dashbook App

my-dash-capstone's People

Contributors

rarceneaux avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

my-dash-capstone's Issues

Event (component) State will live here

User Story

As a user, when I am logged in on the page load I will see the event seed data events show on the page as cards.

Dev Notes

  • import React from 'react';

  • import EventCard from '../EventCard/EventCard';

  • import authData from '../../helpers/data/authData';

  • import EventForm from '../EventForm/EventForm';

  • import eventData from '../../helpers/data/eventData';

  • import './Event.scss';

  • Create Event class

  • Set up my state here =state = { events= [], showEventForm: false, editMode: false, eventToEdit: {}

  • Create an function call getEvents that takes eventData.getEventsByUid(authData.getEventUd())

  • ComponentDidMount will call: this.getEvents

The following functions will live in the Event file:

  • addEvent/ add event button will also live in this file calling the / onClick {this.setShowEventForm}
  • deleteEvent
  • updateEvent
  • setShowEventForm
  • setEditMode
  • setEventToEdit

The following components will be pull into the render method:
state.showEventForm && the functions passed down to the EventForm as props:addEvent,editMode,eventToEdit,updadeEvent

The EventCard will have props to the following:
it will map over all events and return 1 event to make the card for that event:
key={event.id} event={event}
deleteAEvent
eventForm
setEditMode
setEventToEdit

AC

When, the page loads all the event cards are shown.

apiKeys.example.json

User Story

As a user, the file is needed if they want to run api and clone

Dev Notes

{
  "firebaseKeys": {
    "apiKey": "",
    "authDomain": "",
    "databaseURL": "",
    "projectId": "",
    "storageBucket": "",
    "messagingSenderId": "",
    "appId": ""
  }
}

AC

The example keys file is correct

eventData.js

User Story

As a user, this ticket will give me what I need on CRUD

Dev Notes

  • import axios
  • import apiKeys
  • create baseUrl = apiKey.firebaseKeysd.databaseURL
  • create const getEventsByUid function
  • create axios calls (delete, post, put)

AC

The Events from firebase are shown as state in the #4

events.json

User Story

N/A

Dev Notes

"event1": {
      "title" : "December 15, 1989",
       "summary": "This is a test",
       "img": "img here",
        "uid": "17t8696906903707",
 }

AC

The event seed data is in the firebase project

Event Form (component)

User Story

As a user, when I am logged in and click on the add event button a form will appear on the page to add a new event.

Dev Notes

  • import React from 'react';
  • import PropTypes from 'prop-types';
  • import authData from '../../helpers/data/authData';
  • import eventShape from '../../helpers/propz/playerShape';
  • import './EventForm.scss';
  • create EventForm component

Props for EventForm as follows:

  • addEvent
  • eventToEdit
  • editMode
  • updateEvent

State for EventForm

  • title
  • img
  • summary

These functions will live in the EventForm

  • saveEventEvent
  • updateEventEvent
  • titleChange
  • imgChange
  • summaryChange

Create Form from bootstrap form

AC

When a logged in user clicks on the add event button the form will display allowing the user to enter in their event details

Firebase Setup

User Story

As a user, firebase will house the event data

Dev Notes

  • go to firebase console create a new project
  • enable authentication by gmail
  • retrieve my apiKeys and copy into #12

AC

When all my data is in firebase and all axios calls work and login and logout are working correctly

updateEvent (Function)

User Story

As a user, when I click on the edit button a pre-filled form will appear with the selected event info displayed.

Dev Notes

  • Create axios.put call to firebase in the #11 export default
  • Create updateEvent function in #4 and pass it down as props to #6

AC

When, the user clicks on the edit button a pre-filled form will appear with the selected event info displayed in the form. The user can edit any info they would like to info [Title, Summary, Img]
AND, they click on the save button on the updated event info will be in firebase and the updated Event card will be displayed.

deleteEvent (Function)

User Story

As a user, when a user clicks the delete button on the event card the card will be removed from the page.

Dev Notes

  • Create axios.delete call to firebase in #11 export default
  • Create deleteEvent function in #4 and pass it down as props to #6
  • Create deleteEventEvent function this will live in #6

AC

When, a logged in user clicks the delete button on a event card, it will be removed from firebase
And that #6 eventCard will no longer be displayed on the page.

base.json

User Story

n/a

Dev Notes

{
  "events": "events"
}

AC

base is imported into firebase project

NavBar (component)

User Story

As a user when the page loads I will see the navbar with brand and logout btn if I am not logged in. Once user logs in the login btn will no longer appear and a logout btn will appear in upper right had corner in navbar.

Dev Notes

  • import React from 'react'
  • import PropTypes from 'prop-types'
  • import firebase from 'firebase'
  • pass props of authed: PropTypes, func,
  • create logout function event since will the button will live in navbar string
  • render will include navbar string make sure to put onClick on the logout btn

AC

When, the page loads the navbar and btns depending on if logged in or logged out will be displayed or not.

Styling/Scss (Review)

User Story

Dev Notes

  • Review All actions of app check styling is clean and all CRUD actions do not mess up the display

AC

App.js

User Story

As a user, if I have not signed in I will only see the log in btn.
Once I log in I will be able to see the app

Dev Notes

  • import React
  • import firebase
  • import firebaseConnection
  • import Auth
  • set up ternary if user is logged in show app if not then show auth component with login btn
  • In componentDidMouth had listener

AC

When, user logs in they are able to see app
AND when the user logs out they will only see the auth component and login btn

authData.js

User Story

N/A

Dev Notes

  • Create function to setup authed from firebase
import firebase from 'firebase/app';
import 'firebase/auth';

const getEventUid = () => firebase.auth().currentUser.uid;

export default { getEventUid };

AC

When, firebase is called in #9 and login and logout events works

addEvent (Function)

User Story

As a user, when a user clicks on the add blind spot button a form will show to add type in new event info and they can press save to add new event.

Dev Notes

  • Create axios.post call to firebase in #11 eventData.js export default
  • Create addEvent function in #4 and pass it down as props to
    #7 EventForm.
  eventData.addEvent(newEvent)
    .then(() => {
      this.getEvents();
      this.setState({ showEventForm: false });
    })
    .catch((errorFromSaveNewEvent) => console.error({ errorFromSaveNewEvent }));
}

AC

When, the user clicks the add event button the #7 eventForm displays and they are able to type in the event info,
AND when the user clicks the save portion of the eventForm the new event is added to firebase and displays on the page as a new eventCard #6

Auth (component)

User Story

As a logged in user, I will be able to click log in and via google have access to the app.

Dev Notes

  • import React
  • import firebase from 'firebase/app'
  • import '.firebase/auth'
  • import Auth.scss
  • create auth component
  • create login function that will include : const provider = new firebase.auth.GoogleAuthProvider(); #9 AuthData
  • create log-in btn via google with onClick call.

AC

When, a user visits the page they will be able to login and have access to add, delete, and/or edit an event.

apiKeys.json

User Story

As, a user, the apiKeys will be added to .gitignore

Dev Notes

  • add to .gitignore

AC

  • the apiKeys will not be pushed up to github

Event Card (component)

User Story

As a user, when I am logged in I will see the event cards displayed on the page.

Dev Notes

  • import react
  • import proptypes
  • Create card component
  • pass props: events, deleteAEvent, setEditMode, setEventToEvent
  • Create deleteEventEvent function and place onClick on #19
  • Create setEditMode function and place onClick on #19

AC

WHEN the page loads the event cards are displayed on the page

connections.js

User Story

N/A

Dev Notes

import firebaseConfig from '../apiKeys.json';

const firebaseApp = () => {
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig.firebaseKeys);
  }
};

export default firebaseApp;

AC

** When ** the user pushes the log-in and logout btns firebase will do its check to either log them in or log them out thus updating the state of authed

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.