Giter Site home page Giter Site logo

davidmoed / stress-gripe-happy Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 9.69 MB

A very simple web app built on Node.js that allows you to enter whatever is stressing you out, gripe (complain) about it, and blow off some steam with some happy gifs.

JavaScript 63.99% CSS 11.22% Handlebars 24.79%
giphy-api gif stresses jsdoc nodejs heroku

stress-gripe-happy's Introduction

Stress, Gripe, Happy

Overview

School and work are hard, life is stressful, and complaining too much to friends can only end badly. Stress, Gripe, Happy is a platform that allows a user to upload their stresses, write as many gripes as they want for each of these stresses, and finally, find bliss and comfort in the form of happy gifs. Users can upload new stresses and gripes, see their old stresses and gripes, and click the "Make Me Happy" button in order to generate a random gif with the tag "happy".

Stress, Gripe, Happy uses the Giphy API to bring in gifs with the tag happy, and angluar.js to make it all look pretty.

Data Model

The application will have a database that contains users, stresses, and gripes

  • each user will have a username and password
    • the user will have a collection with stresses
    • each stress will have an array of gripes (with embedding)

Sample Documents

An example user:

{
  username: "frustration1",
  password: // a password hash
}

An example shema with Embedded stresses and gripes:

{
  user: // a reference to a User object
  Stresses = {
     'homework' : {
                    'gripe1' : "I have way too much homework and I can't keep up",
                    'gripe2' : "I miss sleep",
                    'gripe3' : "Does the professor even know how to do this???"
                },

    'dating' : {
                    'gripe1' : "I'm undateable!",
                    'gripe2' : "Notice me, gosh!",
                    'gripe3' : "Dating is so time consuming"
                }
  }

}

Wireframes

/login - login page for the site

Login

/index - a page to stress and gripe

Home

/add - a page to add stresses and gripes

Add New

/happy - a page with a random gif with the tag "happy", and where you can delete stresses

Gifs

Site map

Login Page --- Signup Page
|
|
Homepage
|
|
Add Stresses/Gripes  /  Make Happy (gifs)

User Stories or Use Cases

  1. as non-registered user, I can register a new account with the site
  2. as a user, I can log in to the site
  3. as a user, I can add a stress
  4. as a user, for each stress created, I can add gripes
  5. as a user, I can view my stresses and gripes
  6. as a user, I can click the "Make Me Happy" button to view a gif with the tag "happy"
  7. as a user, I can remove and delete stresses

Research Topics

Integrate user authentication - 5 points (using passport)

Giphy API (https://developers.Giphy.com/docs/) - 2 points

  • The Giphy API allows gifs from the Giphy library to appear on a different site. It has a number of use cases that allows gifs to be loaded in based on different inputs and variables
  • I will be using the Giphy API to load in gifs with the tag "happy" as a simple stress reliever.
  • I think the Giphy API is worth 2 points because I have never used it and I have very little experience using APIs in general. Getting the Giphy API to work is also central to my site.

Bootstrap - 2 points

  • Bootstrap is a css framework that makes sites very easy to organize and arrange. It also provides some build in styling for elements of a page
  • I will be using Bootstrap to ensure that my site looks clean and organized, and to make it responsive.

JSDoc (http://usejsdoc.org/) - 2 points

  • JSDoc creates a comprehensive documentation page that can be used by developers to understand how the program works. It uses special comments in the code to generate an html page with a breakdown of the functions that make the app function and will help with clear documentation

11 points total out of 8 required points

Annotations / References Used

Amazing scotch.io reference for passport: https://scotch.io/tutorials/easy-node-authentication-setup-and-local

To correctly display user specific schema from the database on the front-end: https://stackoverflow.com/questions/16256193/how-to-post-and-get-data-unique-to-each-logged-in-user-with-express-and-mongoose

Reference for JSDoc: http://usejsdoc.org/

JSDoc for Express Routes: https://www.npmjs.com/package/jsdoc-route-plugin

Giphy API reference: https://github.com/Giphy/giphy-js-sdk-core#setup

For Express 404 page: https://stackoverflow.com/questions/6528876/how-to-redirect-404-errors-to-a-page-in-expressjs

stress-gripe-happy's People

Contributors

davidmoed avatar dependabot[bot] 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.