moodcloud

Epicodus Capstone: October 2021

By Shannon Lee

Table of Contents

1. Description
2. Technologies Used
3. Setup/Installation Requirements
4. Known Bugs
5. License
6. Contact Information

Description

moodcloud is a web application that is designed to help users track their mood over time, as well as track what factors are influencing their daily mood. This is meant to help people better understand their mental health and make note of which daily habits are positively or negatively impacting their lifestyles. This app was made as a capstone project for Epicodus Portland 2021.

☁️ VIDEO DEMO ☁️

☁️ SEE LIVE DEMO ☁️

Technologies Used

Main technologies used:

• React.js
• Redux
• JavaScript / JSX
• Firebase / Firestore
• Node Package Manager
• HTML
• CSS

Additional libraries:

• React Redux Firebase
• React Router
• React-Bootstrap
• Styled-Components
• React Tag Input
• React-Spring
• Chart.js

Misc. resources:

• Pexels.com
• FontAwesome

Setup/Installation Requirements

Setup requirements

• Make sure Node.js and Node Package Manager (npm) are set up on your local machine. If not, follow the installation guide here.

• This project's backend is based on Firebase. To run this project on your local machine with your own database, first create a new Firebase project per these instructions.

• In the root directory of this project, create an .env file and save your Firebase configuration:

  Firebase config .env

  REACT_APP_FIREBASE_API_KEY = "YOUR-UNIQUE-CREDENTIALS"
  REACT_APP_FIREBASE_AUTH_DOMAIN = "YOUR-PROJECT-NAME.firebaseapp.com"
  REACT_APP_FIREBASE_DATABASE_URL = "https://YOUR-PROJECT-NAME.firebaseio.com"
  REACT_APP_FIREBASE_PROJECT_ID = "YOUR-PROJECT-FIREBASE-PROJECT-ID"
  REACT_APP_FIREBASE_STORAGE_BUCKET = "YOUR-PROJECT-NAME.appspot.com"
  REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "YOUR-PROJECT-SENDER-ID"
  REACT_APP_FIREBASE_APP_ID = "YOUR-PROJECT-APP-ID"
  

Installation

• Clone this repository to your machine $ git clone https://github.com/shanole/moodcloud
• In the terminal, navigate to the top level of this directory moodcloud/
• Recreate project environment and install required dependencies $ npm install
• Open project in a development server on your web browser $ npm start to open it on http://localhost:3000

Known Bugs/Issues

• PrivateRoute redirects users to LandingPage even when user is authorized - this is especially buggy on deployed page
• making a change to EntryList effectively cancels out pagination/infinite scroll and just loads all the documents in the collection. It might be that I have to make a choice between live updates vs pagination
• Longer entries look bad in mobile
• Keywords that have just been added to database don't show correct color

I am proud of the work I have done for moodcloud, but it is definitely still a work in progress. If you notice any further bugs or issues please let me know!

TO DOs

stretch goals/bonus features

• more animations
• page to confirm delete
• weather widget with openWeather?
• more fleshed out user registration flow
• reset pw, change email, other user customization options
• limit only one post a day

License

MIT

Copyright (c) 2021 Shannon Lee

Contact Information

Shannon Lee mailto