Skip to content

Esraa-Alaarag/Buzzy

Repository files navigation

Live:Buzzy

app-logo

Esraa Alaarag

Table of Contents

  1. App description
  2. User Stories
  3. Wireframes Web Version
  4. Visual representation of the database
  5. Pseudocode
  6. APP flowChart
  7. ERD or other visual representation of your database
  8. Technologies used
  9. Live deployment

An app that connects user to activities available on ticket masters around his location or any other location.

Step 1: The user enters an address or click to let the app finds his location.

Step 2: The app displays a map with user's location and the surrounding events around that location.

Step 3: The user can click on save event to save the event that s/he is interested in.

Step 4: The user can see the saved events in my events page.

Step 5:The user can adjust the radius of the area that he wants to find out about.

Step 6:The user can search the events based on event's Category.

  • As a user, I want the app to get my location without entering it in the app.

  • As a user, I want the app to display the events around certain location.

  • As a user, to see a link that i can click to take me where I can buy a ticket.

  • As a user I want to see the events in order.

  • As a user, I want to search the events according to the events location.

  • As a user, I want to see events information

  • As a user, I want to be see the events location on map.

  • As a user, I want to click on the marker on the map to take me to the event information .

  • As a user, I want to my location comparing to event's location.

  • As a user, I want to be able to adjust the searched area.

  • As a user, I want to be able to save the events that I'm interested in.

  • As a user, I want to be able to delete the events that I'm no longer interested in.

  • As a user, I want to be able to search the any city with out specifying the address.

  • As a user, I want to be able to search the event based on their category.

  • As a user, I want to be able to search the events based on their date.

  • As a user, I want to be able to share the events on social media.

  • As a user, I want to know how many events the search generates for me.

  • As a user , I want to be able the events arranged in pages where the maximum number of events in one page = 15 events.

  • As s user , I want the app to tell me if I want to add already added event.

  • As a user, I want to be able click a button to reset my search.

  • As a user, I want when I click a location on map to see a list of activates in that place.

  • As a user, I want to be able when I click on the any activity on the map to go to the card of this certain activity

(Web/Browser Version)

Homepage:

my-places

Search Result:

search-result

My Events:

my-places

Homepage options:

  1. The user enters the address that he wants to find the events around.

    or

  2. Get the user address automatically

  3. disable the input field

  4. send it to Geocoder to get the coordinate

  5. display the user current address in the input field

  6. display the user location on the map

then

  1. The user will fill the form and hit enter.
  2. if the user entered the address by himself send it to google coding to get the address coordinate.
  3. if the address is incorrect tell the user to enter a valid address.
  4. Send the coordinate to API to get the events around that area
  5. display the user location on the map with the other events location.
  6. display number of events found
  7. display events in card grid. max number of activities = 15 per page
  8. If the user clicked “save events” the events will be saved in the database.
  9. if the event is already saved in the database , display error msg
  10. If the user clicked my events .
  11. load all the saved events in the databse. display it as a table
  12. if the user clicked delete , delete the evant from the database reload the database.

Events_db

myEvents
ID (PK)
event
date
time
location
catergory
picture

Core Stack:

  • Node.js
  • Express
  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Heroku
  • Git

Middleware:

APIs:

Also

  • Zenhub
  • Balsamiq (wireframes)
  • Postman (API and DB testing)

Live Deployment of App:

Download Project & Install

app-logo

Go Back to the Table of Content