Giter Club home page Giter Club logo

thedailythree's Introduction

☁ TheDailyThree - E16 Final Full Stack Capstone!

Get Started:

 $ git clone git@github.com:marybethhunter/TheDailyThree.git
 $ cd TheDailyThree

About

  • Gratitude helps people feel more positive emotions, relish good experiences, improve their health, deal with adversity, and build strong relationships. We need more of this in our daily lives. Enter The Daily Three, a daily gratitude and mood tracker app.

Features:

Authenticated Users:

  • Users can log into The Daily Three with their Google account and add a daily gratitude entry and mood. They can see a list of all of their past entries, as well as see the details of each past entry. Any entry can also be deleted.
  • Users can create, edit, view the details of, and delete custom goals. They can toggle the goal as completed or uncompleted as they make or do not make progress.
  • Users can create, edit, view the details of, and delete custom vision boards. They can also add images to their vision boards that they can delete individually.

Chart.js:

  • Users can access the Mood Tracker view and see a Chart.js doughnut graph of their moods. This can be used to see their baseline/most common mood and maybe even see it improve over time as the ‘happier’ moods increase in quantity.

Relevant Links:

2022-05-16

Code Snippets:

useEffect(() => {
    let isMounted = true;
    getMostRecentEntryByUid(uid).then((entry) => {
      setNewestEntry(entry);
    });
    const currentDate = new Date().toDateString();
    getAllUserEntriesByUid(uid).then((entriesArray) => {
      if (isMounted) setEntries(entriesArray);
      if (
        entriesArray.length !== 0 &&
        newestEntry.date === currentDate.toString()
      ) {
        setCanAddEntry(false);
      }
      if (
        entriesArray.length !== 0 &&
        newestEntry.date !== currentDate.toString()
      ) {
        setCanAddEntry(true);
      } else if (entriesArray.length === 0) {
        setCanAddEntry(true);
      }
    });
  }, [canAddEntry, uid, entries.length]);

Technology Used:

  • Javascript
  • React
  • Firebase
  • C#
  • SQL
  • Swagger
  • Figma
  • Axios
  • Reactstrap
  • Styled Components
  • Chart.js

Screenshots:

2022-05-28 2022-05-28 (1) 2022-05-28 (2) 2022-06-01 2022-06-01 (1) 2022-06-14

Contributors: Mary Beth Hunter, Github, Portfolio, LinkedIn

thedailythree's People

Contributors

marybethhunter avatar

Watchers

 avatar

thedailythree's Issues

Style

come up with color/theme and make look nice :)

Views

  • Home/SignIn if not signed in
  • EntriesView (useEffect, maps over entires w/ add button or just add button if no entries)
  • MoodTrackerView

STRETCH GOALS

  • Users can create custom goals - create nav link, goal component, back end model, repositories, controllers, form for add/edit. view, route
  • Users can create a vision board- create nav link, vision board component, back end model, repositories, controllers, form for add/edit. view, route, image upload

Components

  • Entry Component - showing all data, delete button
  • Mood Graph Component
  • Nav sidebar with links to Entries and Mood Tracker views
  • Form for addentry

Data

  • entryData
  • userData
  • moodData

Make Models

  • Entry
  • Mood
  • User
//Entry Model
public class Entry {
  public int Id {get; set;}
  public DateTime Date {get; set;}
  public string Thing1 {get; set;}
  public string Thing2 {get; set;}
  public string Thing3 {get; set;}
  public string Comment {get; set;}
  public int MoodId {get; set;}
  public int UserId {get; set;}
}

//Mood Model
public class Mood {
  public int Id {get; set;}
  public string Name {get; set;}
}

//User Model
public class User {
  public string Id {get; set;}
  public string Name {get; set;}
  public int Streak {get; set;}
}

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.