gintstir/tea-app

Steep is a full-stack MERN App for Tea-Lovers. Create recipes, post, pictures, learn about tea and enjoy every sip.

Steep

Steep is an app for tea lovers everywhere. Built with the MERN tech stack, this Single Page Application was designed to go with you no matter where you're enjoying that perfectly brewed cup of Darjeeling thanks to its mobile-first, responsive design. Create your own recipes, keep tabs on whats in your pantry with our tea-shelf. Our tea-app will keep you coming back for a second cup!

Click here to see the live site : Steep

Project 3 Requirements

• Use React for the front end.
• Use GraphQL with a Node.js and Express.js server.
• Use MongoDB and the Mongoose ODM for the database.
• Use queries and mutations for retrieving, adding, updating, and deleting data.
• Be deployed using Heroku (with data).
• Meet the minimum requirements of a PWA:
• Uses a web manifest
• Uses a service worker for offline functionality
• Is installable
• Have a polished UI.
• Be responsive.
• Be interactive (i.e., accept and respond to user input).
• Include authentication (JWT).
• Protect sensitive API key information on the server.
• Have a clean repository that meets quality coding standards (file structure, naming conventions, best practices for class and id naming conventions, indentation, high-quality comments, etc.).
• Have a high-quality README (with unique name, description, technologies used, screenshot, and link to deployed application).
• Finally, you must add your project to the portfolio that you created in Module 20.

Table of Contents

• Description
• User-Story
• Screenshots
• Installation
• Usage
• Support
• Roadmap
• Contributing
• Technology
• Tests
• License

Description

This app has a robust back end for compressing and storing images. It also leverages features of Mongoose, graphql, and apollo for lightining fast server response times for getting and fetching data. We use bCrypt for hashing and salting sensitive personal data like passwords while JWT's create a secure link between the user and our back-end. On the front-end, grommet and materialize work in tandem with React to provide the user with a smooth, visually appealing experience.

User-Story

As a new or experienced tea drinker,
I want an app that allows me to track my favorite tea recipes.

As an avid tea drinker,
I want to keep an inventory of all the teas I have at home as well as possible additions like milk, honey and sugar.

As a User, 
I want an inuitive, mobile-first app that has little to no learning curve.

As a User,
I want an application that populates forms with my data, making input easier and 
fun.

As a user,
I want a secure way to login and store my personal data.

Screenshots

Installation

To work on/contribute to this project:

• Fork the repository

• Use npm command from the root of the project:
  npm install
  To install necessary dependencies

Usage

1. To start the server in the terminal and to lauch the application:
   • npm start
2. To quit server in terminal:
   • CTRL+C
3. While the server is open, React will automatically rerender the application upon save assuming there are not errors.
4. If using seeds/seeds.js to test database structure and calls to front-end. In the terminal use the command:
   • npm run seed

Support

For any questions, comments, or feedback please feel free to reach out to our team members:

Team	Email	Github
Joseph Cosgrove	[email protected]	Github
Michele Lee Lynch	[email protected]	Github
David Daly	[email protected]	Github
Gintautas Stirbys	[email protected]	Github

Roadmap

All great projects have room for improvement and innovation. We are open to any and all feedback regarding tweaks and additions to this site. Some elements that we have considered:

• Cross user interaction
  • A global recipe feed
  • Create the ability to like, comment, share recipes
• Adding a tea shop with Teas and Merchandise.
• Integrating a payment service like Stripe.
• Intergrating animated timers into the tea recipes

Contributing

Please refer to the Contributor Covenant for contribution guidelines.

Technology

This project was completed using the following technologies, libraries, and software:

• Front-End:
  • grommet
  • Google Fonts
  • React
  • Materialize
  • React-Flippy
  • Workbox
  • Javascript
  • CSS
  • HTML
    
• Back-End:
  • Node.js
  • bcrypt
  • express-session
  • MongoDB
  • Mongoose
  • JWT
  • express
  • if-env
  • concurrently
  • GraphQL
  • Heroku
  • Moment
  • Nanoid

Tests

No test need to be run at this time.

License

Copyright © Joseph Cosgrove, Michele Lee Lynch, David Daly, and Gintautas Stirbys, 2021. All Rights Reserved.

This Project is licensed under the Apache~2.0 license.