Code Monkey home page Code Monkey logo

oils-api's Introduction

myBlendology

myBlendology is a responsive web application comprised of a PERN stack (Postgres, Express, React, & NodeJS) that allows you to create diffuser essential oil blends based off of a user's choice of mood. It also has local authentication as a feature.

homepage

Functionality of myBlendology

Home Page

The home page begins by urging a user to select one of three moods: Calm, Awaken, or Sensual. Each choice will generate three separate carousels divided by level.

  • Base oils provide the lasting impression of your blend. These oils are typically heavy and will provide the final note of your blend.
  • Middle oils are considered the heart of your blend and will emerge after your top oil has faded. These oils often balance your blend and are typically well-rounded.
  • Top oils provide your first impression of your blend. These oils are often described as light and fresh, but tend to fade quickly.

carousel

After the user selects one oil from each carousel, they will be provided a calculation of the essential oils needed to create the right balance for their mood blend (via a diffuser).

calculation

After the blend has been created, the user has the option to either:

  • Share their blend via a modal component that uses MailGun
  • Save their blend (bringing them to their user page if logged in or the login page if not logged in)
  • Make a new blend, moving them back up to the top of the homepage

Authentication - Sign Up & Log In

The user has the ability to create a local user account via the sign up page as well as return to their user page by logging into the site via the log in page.

signup

login

UserPage

The userpage will allow users to see their previously created blends as well as mark their favorite blends. In addition, it has the option to return to the home page to create another blend to add to their user collection.

userpage

FAQ Page

The FAQ page answers the basic questions any user might have about the functionality of the site from a user experience perspective.

faq

About Us Page

The about us page allows users to see the authors of the site and show our playful side. In addition, the user has the option to contact the authors at [email protected] (an active email account).

aboutus

Additional Information

Installation

Please install the following packages

Axios, Radium, React, React-Bootstrap, React-Coverflow, React-Dom, React-Router-Dom, SmoothScroll, Bcrypt, Cookie-Parser, Debug, Dotenv, Express, Express-Session, HBS, HTTP-Errors, Logger, LS, Morgan, Nodemailer, Nodemon, Passport, Passport-Google-OAuth, Passport-Local, Path, PG, React-Router, Sequelize, Sequelize-CLI

Port Information

http://localhost:3000

Authors

License

This project is licensed under the MIT License.

Acknowledgments

  • Our instructors, Adam Szaruga and Lachlan Haywood, at DigitalCrafts
  • Create-React-App Developers at Facebook

oils-api's People

Contributors

kaconant avatar lachieh avatar stacyelle avatar theredwillow avatar

Watchers

 avatar

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.