search

mnich0ls / evee-sd

An event aggregation app for events in San Diego
1 stars 2 forks source link

UI - version 1 #3

Closed mnich0ls closed 5 years ago

mnich0ls commented 5 years ago

For the first version of the UI, I would like to focus on a simple chronological list of events. This initial implementation should solve the following problems:

  1. Responsive layout
  2. Event summary -- Title -- Thumbnail -- Date (shown either graphically or textually) -- Type (shown either graphically or textually) -- Price (shown either graphically or textually) -- Time (shown either graphically or textually) -- Location (shown either graphically or textually)
  3. Infinte scroll

For the first version of the UI, it is not necessary to show detailed information about the event beyond what is outlined above. Clicking any area of the event container should take the user to the source page of the event in a new window/tab where the user can find more information. In future versions, we will make this information available through our service without taking the user to another page.

UI mockup

For now, the requests to retrieve data from the events API can be stubbed. Other details like formatting the data returned from the API, such as dates, can be handled in another task.

The following is an example of how events should be grouped by date:

Screen Shot 2019-03-13 at 3 09 32 PM
jremi commented 5 years ago

This could look good using VueJS to provide the single page app (SPA) experience and maybe couple that with Vuetify which is based on the elegance of Googles Material Design.

jremi commented 5 years ago

I now have a basic web app fully responsive and linked to the Firebase scraped data. I setup the breakpoints for fully responsive layout on all device sizes: It will default to 4 events per row and then as you size down the screen it will show 3 per row , then 2 per row and finally 1 per row on mobile size devices.

For now its just pulling all records, but infinite scrolling and other features can be added later.

Its built with Vue + Vuetify

Quick video demo: https://youtu.be/HZ8C633lmUg

Here is a screenshot: https://imgur.com/a/akdy9HI

mnich0ls commented 5 years ago

This is excellent! I am very impressed. I think pulling all records is totally acceptable for v1. I like the idea of using VueJS and Vueify too. I've used VueJS before and love the way it's structured.

Let me get a few more tasks outlined. We'll need to get the event dates we're scraping into a standardized format so we can sort them in chronological order.

Let me know what you would bid for this task so I can start to account for it in the budget.

jremi commented 5 years ago

For the starter UI pulling the current scraped data ... the way that I have it in the video demo... I would bid $150. This does not include the infinite scrolling.

mnich0ls commented 5 years ago

Ok, I'm good with that price. Take a look at #5 and #6 and let me know if you can bid on those first. As much as I would love to get the UI up, I know those issues need to be resolved first.

jremi commented 5 years ago

@mnich0ls - I just got the base version of the UI up and running and have now also implemented the code and template layout logic for allowing the event data to automatically be "grouped by date"

Check it out, looks nice with the grouped by date title headers above each set of events... https://youtu.be/ESY7-qCw_TY

jremi commented 5 years ago

If we have events that have a start_date that already has passed and the user comes to the website should they be able to see these past events?

So for example:

We have events from April 10. However, today is April 12.

When the user gets to the site are the first set of events they see displaying starting at April 12?

Let me know if that makes sense.

mnich0ls commented 5 years ago

This looks fantastic!

You’re correct, when the user comes to the site, they should see an even listed under the current date if that event is still active, for example if an event started on April 10, the user views the site on the 11th, and the event ends on the 12th, the user should see that event under the April 11th date. Does that answer your question?

jremi commented 5 years ago

Ok makes sense. I will tweak code to accommodate that.

On Fri, Apr 12, 2019 at 10:12 PM Mike Nichols notifications@github.com wrote:

This looks fantastic!

You’re correct, when the user comes to the site, they should see an even listed under the current date if that event is still active, for example if an event started on April 10, the user views the site on the 11th, and the event ends on the 12th, the user should see that event under the April 11th date. Does that answer your question?

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/mnich0ls/evee-sd/issues/3#issuecomment-482777273, or mute the thread https://github.com/notifications/unsubscribe-auth/AFE47DNdM76JiogogLeHc3yXO2Px6iyPks5vgWdCgaJpZM4bnl2- .

jremi commented 5 years ago

Code pushed to new repo: https://github.com/mnich0ls/evee-sd-ui