Skip to content

MERN App for Travel Activities featuring: REACT, GraphQL, JWT json web token, Apollo server express, Fortawesome, emailjs, styled-components, Workbox for service worker, react testing library

License

Notifications You must be signed in to change notification settings

adina-hc/pata-de-perro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

License: MIT

Pata de Perro

"Enjoy your vacation activities by booking on-line with Pata de Perro. We offer a wide variety of services."

** Disclaimer: although the app has payment functionality, please do not make payments since we do not provide the services shown in the app **

Pata de perro is a Mexican expression that refers to people who have a strong desire to travel, to leave a place, or just to be out in the street.

Description

AS a tourist, the user wants to look for a wide variety of summer activities where they:
CAN view, select, and book a variety of available tourist experiences,
SO THAT they can make the most of their vacation time.

This application includes functionality described in the Features section below.

Table of Contents


Features

Current features include:

  • Navigator

    • Home, where the paw will take the user to About Us
    • Login for users to enter the page or Signup if visiting for the first time
    • Activities display for the user to pick and book
    • Cart for the user to see the cost of their selected activies before proceeding to pay
    • Profile for the user to update their information (future feature)
    • Logout to leave the session
  • Home or landing page: on-click of the paw, the user is taken to the About Us page

  • When the user clicks on Activities, images with descriptions appear for the user to pick, but they must log in to purchase

  • Login/Signup -> existing users can:

    • view the Order History
    • update their profile information (future feature)
    • pick, book and pay
    • access the full functionality of the website
  • Cart: when the user picks an activity to book, they can see their selected items in the cart

Future features may include:

  1. Ability for the user to update their profile info and password
  2. Booking availability with dates and times
  3. Filter by location
  4. Admin site to update activities and categories
  5. Streaming videos of activities

Technologies

Back-end Front-end
MERN CSS
GraphQL Styled-components
JWT Font awesome
Stripe

We also included the service workers and the manifest.


Installation

You can install this application by running it on the command line

npm install
npm run seed
npm run develop

Tests

We included some reducers testing on functionality for this project.

cd client
npm run test


Mockup images

Functionality is shown below:

Desktop & Mobile Multiple Devices

Animation

  1. The first animation depicts an existing user logging into the website, navigating through the Activities section, selecting an activity and proceeding to checkout in the Cart and submitting payment. Then being redirected back to the page and looking at their Order History.

First Animation Existing User

  1. The second animation depicts the user browsing to the About Us section in the navbar, where when redirected, the user can click on the developers buttons, which will open in a different browser page (depicted on the fourth animation). The user then navigates to the Contact Us page, sending a message. Also, browsing to User Profile where in future features the user will be able to update their information and password.

Second Animation Existing User

  1. Third animation: shows the new user functionality to sign up by creating their account. New users will then have the same access capability as the one depicted in the second animation.

Third Animation New User

  1. The fourth animation depicts the user browsing through the About Us development team, being able to click on each developer to be redirected to the their respective GitHub Repositories. Also, it shows the app manifest and service workers. The user can select activities that will save in their carts while they are off-line, and those will be available and visible when they go on-line.

Fourth Animation


Contributors to this project

Contributors GitHub Repo
Adina Henderson 🐠<
Adriano Armendaris 🏄
German Ramirez 🐬
Jorge Soto 🌴
Victor Vallejo 🐚

Questions

If you have any questions or would like to report any issues, please contact us at:

eMail address


Links to the App

Repo: 🦀

App: Deployed App

About

MERN App for Travel Activities featuring: REACT, GraphQL, JWT json web token, Apollo server express, Fortawesome, emailjs, styled-components, Workbox for service worker, react testing library

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published