rarceneaux / my-dash-capstone Goto Github PK

My-Dashbook built in React is a single page CRUD web application allowing users to create a digital legacy journal.

Home Page: https://my-dash-93e26.firebaseapp.com/

HTML 10.56% JavaScript 77.41% SCSS 12.03%

react javascript bootstrap4 facebook-sdk firebase-auth firebase-database firebase-storage facebook-developers react-router reat-router-dom

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

Stargazers

Watchers

my-dash-capstone's Issues

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

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

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

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.

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

Send Email

User Story

Dev Notes

AC

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.

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.

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

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

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

User Profile

User Story

Dev Notes

AC

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.

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

MVP Demo Prototype

User Story

As a User, I will be able to follow the hot spots on the demo and get a sense of what the app will do.

Dev Notes

Please click link to see Prototype
https://xd.adobe.com/view/75647b20-ab07-442b-6dda-d242fe2c499d-0355/?fullscreen

AC

My capstone mentor approves the flow of app.

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.

ERD

ERD:
https://www.lucidchart.com/invitations/accept/c059fd04-05f0-43a1-a18f-34ed804f568e

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

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

Share with Friends

User Story

Dev Notes

AC

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

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

Bible Api

User Story

Dev Notes

AC

base.json

User Story

n/a

Dev Notes

{
  "events": "events"
}

AC

base is imported into firebase project