👻 GHOSTBUSTR (Client) 👻

https://go-ghostbustr-app.herokuapp.com/

😱 Description

Ghostbustr is an app where you view haunted locales. As a user you view haunted locales, can add haunted locales, edit and delete the haunted locales you have added, view other user's visits, add your visits, and edit and delete your views.

⚛️ Getting Started

Installation

• Fork and Clone this Repo (Client) and The API
• Follow the instructions on the Ghostbustr API Repo to install the API
• Install the necessary dependencies for this repo by copying the code below (or see dependencies to install individually):
  npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @testing-library/jest-dom @testing-library/react @testing-library/user-event axios bootstrap dotenv react react-bootstrap react-dom react-moment react-router-dom react-scripts sass uuid web-vitals
• run npm start for the API (runs on localhost:3000)
• run npm start for the this repo (The Client) and go to localhost:8000 in your browser to view

Dependencies

• @Fortawesome/Fontawesome-Svg-Core npm i @fortawesome/fontawesome-svg-core
• @Fortawesome/Free-Solid-Svg-Icons npm i @fortawesome/free-solid-svg-icons
• @Fortawesome/React-Fontawesome npm i @fortawesome/react-fontawesome
• @Testing-library/Jest-Dom npm i @testing-library/jest-dom
• @Testing-Library/React npm i @testing-library/react
• @Testing-Library/User-Event npm i @testing-library/user-event
• Axios npm i axios
• Bootstrap npm i bootstrap
• Dontenv npm i dotenv
• React npm i react
• React-Bootstrap npm i react-bootstrap
• React-Dom npm i react-dom
• React-Moment npm i react-moment
• React-Router-DOM npm i react-router-dom
• React-Scripts npm i react-scripts
• Sass npm i sass
• Uuid npm i uuid
• Web-Vitals npm i web-vitals

📲 How To Use

How to View a Haunted Locale

1. Once signed in, click the Eye Button on the location you wish to view
2. You will be able to view details of the Haunted Locale on the location's page

How to Add a Haunted Locale

1. Once signed in, click Add New Place in the Navbar
2. Fill in all the fields and then click Submit at the bottom of the page
3. Your Haunted Locale will now appear on the page with all the other locations

How to Edit a Haunted Locale

1. Click on the Eye Button on one of the Haunted Locales you wish to edit
2. If you created it, you will see an Edit Place button on the lower right corner of the page
3. Click the Edit Place Button to be taken to the Edit Form
4. Fill in the fields you wish to Edit
5. Click Submit at the bottom of the Edit Form
6. Your Haunted Locale with the edited details will appear on the location's page

How to Add a Visit

1. Click on the Eye Button on one of the Haunted Locales you wish to Visit
2. Click the Visited! button on the lower right corner of the page
3. Fill in the appropriate details and click Submit at the bottom of the page
4. Your Visit will appear in the My Visits page

How to Edit a Visit

1. Click on My Visits in the Navbar
2. Click the Eye Button on the Visit you wish to Edit
3. Click the Edit Visited button on the bottom right corner of the page
4. Fill in the fields you wish to change and then click the Submit Button
5. Your Visit with edited details will appear on the Visit's page

How to Delete a Visit

1. Click on My Visits in the Navbar
2. Click the Eye Button on the Visit you wish to Edit
3. Click the Delete Visited button on the bottom right corner of the page
4. Your Visit will no longer appear on the My Visits page

➡️ Routes

Home

Endpoint	Component	AuthenticatedRoute?
/	Home	No

Place

Endpoint	Component	AuthenticatedRoute?
/spookyplaces	Index	No
/spookyplaces/:placeId	Show	No
/addPlace	Create	Yes
/spookyplaces/:placeId	Update	Yes

Visit

Endpoint	Component	AuthenticatedRoute?
/myvisit/:userId	Index	Yes
/myvisit/:visitId	Show	Yes
/myvisit/:userId	Create	Yes

User

Endpoint	Component	AuthenticatedRoute?
/sign-up	SignUp	No
/sign-in	SignIn	No
/sign-out	SignOut	Yes
/change-password	ChangePassword	Yes

🖼️ Screenshots

🎨 Wireframes

Description	Screenshot
Index Page
Show Page

⚙️ Functionality

Description	Screenshot
Home Page
Sign In Page
Sign Up Page
Index Page
Show Page
Visit Index Page
Visit Show Page

👤 User Story

As a Public User

• As a public user they want to be able to view haunted locales
• They want be able to click on individual haunted locales and view their details

As a Logged in User

• As a logged in user they want to be able to do all that a public user can do but with added functionality
• They want to be able to add their own haunted locales
• They want to be able to edit their own haunted locales
• They want to be able to view their visits on the haunted locales
• They want to be able to add visits to a haunted locales
• They want to be able to edit visits on a haunted locales
• They want to be able to delete visits on a haunted locales

💻 Technologies Used

⏩ Next Steps

• Add ability for users to favorite haunted locales for later reference
• Add ability for user comments on haunted locales and visits
• Add ability to sort locales by location