Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jnaoroji/splash_wine_pairing_application

MERN Full-Stack Wine pairing application, uses React for the front end and GraphQl and Mongo DB for the back end
https://github.com/jnaoroji/splash_wine_pairing_application

apollo-client graphql heroku mern-stack mongodb nodejs react reactjs

Last synced: 10 days ago
JSON representation

MERN Full-Stack Wine pairing application, uses React for the front end and GraphQl and Mongo DB for the back end

Host: GitHub
URL: https://github.com/jnaoroji/splash_wine_pairing_application
Owner: jnaoroji
License: mit
Created: 2023-08-08T04:49:58.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-10-24T06:16:18.000Z (about 1 year ago)
Last Synced: 2024-04-15T09:16:03.214Z (7 months ago)
Topics: apollo-client, graphql, heroku, mern-stack, mongodb, nodejs, react, reactjs
Language: JavaScript
Homepage: https://splash-0f0eb7a8bfa4.herokuapp.com/
Size: 15 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 23 Splash: Jenny's Wine Pairing Application (Final Project: MERN Stack Single-Page Application)

## Description

My Task was to build a MERN Single page full-stack Application. This app is a wine pairing app that responds to user input to pair wine with a user's desired meal.
The Technologies used for this application are:

* React for the Front-End.
* Uses GraphQL with a Node.js and Express.js server.
* Uses MongoDB and the Mongoose ODM for the database.
* Use queries and mutations for retrieving, adding, updating, and deleting data.
* Is deployed using Heroku (with data).
* Has a polished UI.
* Is responsive.
* Is interactive (i.e., accept and respond to user input).
* Includes authentication (JWT).
* Protects sensitive API key information on the server.
* Uses a web manifest
* Uses a service worker for offline functionality
* Is installable
* Uses CSS, Inline Styling in JSX and Bootstrap

This wine pairing Application will showcase my work to other developers and potential employers.

## User Story

```md
AS A Wine Lover,
I WANT to equip all wine lovers with resources to pair their food choices with wine, and learn more about what which flavour profiles go well together and be able to purchase those they enjoy.

```

## Acceptance Criteria

```md
GIVEN a single-page application portfolio for a web developer
WHEN I load the portfolio
THEN I am presented with a page containing a header, a section for content, and a footer
WHEN I view the header
THEN I am presented with the developer's name and navigation with titles corresponding to different sections of the portfolio
WHEN I view the navigation titles
THEN I am presented with the titles About Me, Portfolio, Contact, and Resume, and the title corresponding to the current section is highlighted
WHEN I click on a navigation title
THEN I am presented with the corresponding section below the navigation without the page reloading and that title is highlighted
WHEN I load the portfolio the first time
THEN the About Me title and section are selected by default
WHEN I am presented with the About Me section
THEN I see a recent photo or avatar of the developer and a short bio about them
WHEN I am presented with the Portfolio section
THEN I see titled images of six of the developer’s applications with links to both the deployed applications and the corresponding GitHub repositories
WHEN I am presented with the Contact section
THEN I see a contact form with fields for a name, an email address, and a message
WHEN I move my cursor out of one of the form fields without entering text
THEN I receive a notification that this field is required
WHEN I enter text into the email address field
THEN I receive a notification if I have entered an invalid email address
WHEN I am presented with the Resume section
THEN I see a link to a downloadable resume and a list of the developer’s proficiencies
WHEN I view the footer
THEN I am presented with text or icon links to the developer’s GitHub and LinkedIn profiles, and their profile on a third platform (Stack Overflow, Twitter)
```

## Usage

To use this application visit the deployment link on Heroku!

- https://splash-0f0eb7a8bfa4.herokuapp.com/

## Credits

- [Bootstrap Responsiveness](https://getbootstrap.com/docs/3.4/css/)
- [Guide to Deploy with Heroku and MongoDB Atlas](https://coding-boot-camp.github.io/full-stack/mongodb/deploy-with-heroku-and-mongodb-atlas)
- [Apollo Hooks](https://www.apollographql.com/docs/react/api/react/hooks/)
- [Apollo Params](https://www.apollographql.com/docs/react/api/react/hooks/#params)
- [Apollo useLazyQuery](https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery)
- [Apollo client](https://www.apollographql.com/docs/react/api/react/hooks/#useapolloclient)
- [GraphQl Schema](https://graphql.org/learn/schema/)
- [GraphQl Queries and Mutations](https://graphql.org/learn/queries/)
- [Coolors](https://coolors.co/)
- [React forms](https://legacy.reactjs.org/docs/forms.html)
- Template Code Used: /Users/jennynaoroji/bootcamp/bootcamp-repo/UADEL-VIRT-FSF-PT-03-2023-U-LOLC/21-MERN/01-Activities/26-Stu_Resolver-Context/Solved

## Screenshots
These screenshots show my app's functionality:
- The Home Page:
![Home Page Screenshot](/wine-pairing/client/public/screenshothomepage.png)

- The Pairing Search:
![Pairing Search Screenshot](/wine-pairing/client/public/screenshotsearch.png)

- The Single Wine Page:
![Single Wine Screenshot](/wine-pairing/client/public/screenshotsinglewine.png)

- The Comments Section:
![Comments Section](/wine-pairing/client/public/commentscreenshot.png)

- The Profile Page:
![Profile Page](/wine-pairing/client/public/profilepagescreenshot.png)

## License

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
Please refer to the LICENSE in the repo or click on the badge for documentation.