Mympy Dreams

You can find the deployed project at Mympy Dreamers.

Installation Instructions

Start at the root folder Mympy-Dreamers/FrontEnd in the CLI. cd inside mympy-app, once inside run npm install. After that is finished, run npm start.

Other Scripts

* eject - stops the application
* build - creates a build of the application
* start - starts the production server after a build is created
* test - runs tests in **tests** directory \* eject - copy the configuration files and dependencies into the project so you have full control over them

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Please note we have a code of conduct. Please follow it in all your interactions with the project.

Issue/Bug Request

If you are having an issue with the existing project code, please submit a bug report under the following guidelines:

• Check first to see if your issue has already been reported.
• Check to see if the issue has recently been fixed by attempting to reproduce the issue using the latest master branch in the repository.
• Create a live example of the problem.
• Submit a detailed bug report including your environment & browser, steps to reproduce the issue, actual and expected outcomes, where you believe the issue is originating from, and any potential solutions you have considered.

Feature Requests

We would love to hear from you about new features which would improve this app and further the aims of our project. Please provide as much detail and information as possible to show us why you think your new feature should be implemented.

Pull Requests

If you have developed a patch, bug fix, or new feature that would improve this app, please submit a pull request. It is best to communicate your ideas with the developers first before investing a great deal of time into a pull request to ensure that it will mesh smoothly with the project.

Remember that this project is licensed under the MIT license, and by submitting a pull request, you agree that your work will be, too.

Pull Request Guidelines

• Ensure any install or build dependencies are removed before the end of the layer when doing a build.
• Update the README.md with details of changes to the interface, including new plist variables, exposed ports, useful file locations and container parameters.
• Ensure that your code conforms to our existing code conventions and test coverage.
• Include the relevant issue number, if applicable.
• You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.

Attribution

These contribution guidelines have been adapted from this good-Contributing.md-template.

1️⃣ Contributors

Dakotah Hitze	Krisli Domo	Manju KC	Mylynh Nguyen	Jared Parrish

Tashi Woeser	Nick Stricker	Alex Vargas	Luis Villafranca	Budi Mulyo Stakeholder

2️⃣ Project Overview

• Trello Board

• Product Canvas

• UX Design files

3️⃣ About Mympy Dreams

Mympy Dreams is a marketplace where individuals can create a profile, post their VR project idea(DREAMS), define their needs/goals, and receive funding from the Mympy Dreams community.

Key Features

Dreamers(users) can:

• Create a project(Dream) that describes their project. With each dream, dreamers can:
  • Share their story.
  • Receive funding, after setting fiscal goal.
  • Create journal entries to update donors.
  • Have an email list.
• Donate to other projects.
• Become a mentor.
• Receive mentorship.
• Communicate privately with other members.

4️⃣ Tech Stack

COMPONENT STRUCTURE:

To facilitate hand off to future developers of this project, a flow chart was created. This flow chart depicts data flow and UI flow between the components. Please contact Mylynh Nguyen if you want the pdf and editing links.

Front end deployed to

Frontend built using:

React + Redux

React alone doesn't have efficient data flow (since you must pass down the data locally, which gets incredibly complicated if you have different branched child components). Redux solves this issue by having one store, which stores all the different states needed for the entire application. Then any component from the app can just connect to the store, pulling the data and avoiding multi-level data flow from parent components, avoiding data tracking mistakes, which in turn increases the productivity of the developers.

Overall, the integration of React + Redux allows for the app to be scalable, efficient, and clean.

Other Libraries:

Axios

Axios is used to preform CRUD (create, read, update, delete) requests to our backend. Our app, in turn, receives responses from our backend that subsequently renders such data in the related components.

ReactStrap

Using ReactStrap allows us to be more structural, organizational, and clean in design. It also boosts functional productivity, as we have more time researching on feature creation and less time on manual design creation.

Font Awesome

We use font awesome icons throughout the app for a clean, appealing design.

Slick Carousel

We use this library in order to create stunning carousel designs.

Jwt-decode

Used for decoding tokens received from the backend.

Back end built using:

Node.js

We chose this because...

• NodeJs and express are relatively simple to implement compared to Java which is more verbose.

• Some of the advantages of a java back-end aren't noticeable in a smaller application such as Mympy.

PostgreSQL

• We chose this over SQLite3 due to the limitations of SQLite3 and how it interacts with Heroku.

Express

• It is used for easier creation of web applications and services.
• Consistent routing to modules.
• Consistent, customizable middleware interface.
• Handling post data, session management, static file serving, etc.

BCrypt.js

• Library for securing passwords

5️⃣ APIs

Auth0

• Authentication limits access to only authorized users.
• We chose Auth0 because it works better with payment api's and is more integrated in the app then passport.

Stripe

• Receiving payments and possibly keeping money in escrow.
• we chose stripe because we wanted an api that was easy to learn and works with payments, and stripe can accomplish that for us.

Cloudinary

• Cloudinary allows users to add pictures to user profiles and Dream profiles.
• Cloudinary is a popular and well supported API for storing and retrieving photos.

SendGrid

• emails, for payments and interactions

6️⃣ Environment Variables

In order for the app to function correctly, the user must set up their own environment variables. There should be a .env file containing the following:

* REACT_APP_BE_URL - holds the value of our Backend url used in our `actions` folder.
* PROD_TOKEN - holds the token to the Mixpanel production tracker
* DEV_TOKEN - holds the token to the MixPanel development token
* PK_TEST=*PK KEY FOR STRIPE*

7️⃣ Content Licenses

🚫For all content - images, icons, etc, use this table to document permission of use. Remove the two placeholders and add you content to this table

File/Content	Source / Creator	License
doodles.png	Nicole Bennett	Creative Commons
rings.svg	Sam Herbert	MIT
All icons	Font awesome	CC By 4.0 License
Bootstrap	Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff	MIT License
Slick	Slick	MIT