Single Page Web App

Single Page Web App: Manchester
Tech Meetups
by Sean O’Mahoney (@Sean12697)

Who?
 Computer Science at Manchester Metropolitan University
 Prolific Networker: ~200 Networking Events Attended
 Hackathons: 1st Place once, 2nd place three times, lost none
 Workshops/Talks: Run 4 (5 now), done 15 times (now 16)
 Likes Web & Data stuffs, does Photography
@Sean12697

What? (http://mcrmeetup.tech/)
Essentially, a service which will allow
you to find Meetup Groups, their
events, and filter through both.
@Sean12697

Inspiration / Research
 Spotify Playlist Generator - https://www.youtube.com/watch?v=eV3WkDAM3Hw
 GitHub Repository Video - https://github.com/lets-learn/spotify-playlist-generator
 Meetup RESTFUL API - https://www.meetup.com/meetup_api/
@Sean12697

How to get there?
MVP! MVP! MVP!!! (Minimum Viable Product)
Ideas (Features):
 Show All Meetups
 Search
 Filter into Categories
 Show Events
 Filter Events
 TechNW Integration
 Sorting
 Activity
Essential Features:
 Show Events
 Search
MVP:
Release:
 + Show Events
 + Search
Iteration x:
 + Filters
@Sean12697

MVP
 API Call compared from the tutorial, to research from the Meetup API
app.getAlbumTracks = (id) => $.ajax({
url: `https://api.spotify.com/v1/albums/${id}/tracks`,
method: 'GET',
dataType: 'json'
});
app.getMeetups = (meetup) => $.ajax({
url: 'https://api.meetup.com/' + meetup,
method: 'GET',
dataType: 'jsonp'
});
@Sean12697

MVP
 Function calls to the API compared from the tutorial, to what’s needed for the Meetup API
function initGetMeetups() {
console.log(meetups);
MeetupsJSON = MeetupsJSON.map(app.getMeetups);
$.when(...MeetupsJSON)
.then((...MeetupsJSON) => {
MeetupsJSON = MeetupsJSON.map(a => a[0].data);
console.log(MeetupsJSON); // MVP
});
}
app.getTracks = function(tracks) {
$.when(...tracks)
.then((...tracks) => {
tracks = tracks
.map(getDataObject)
.reduce((prev,curr) => [...prev,...curr],[]);
const randomPlayList = getRandomTracks(50,tracks);
app.createPlayList(randomPlayList);
})
};
 “meetups” & “MeetupJSON” = ["android_mcr", "BCS-Greater-Manchester-Branch“,.. ]
 $.when & .then are async’ call, .then doing the anonymous function once complete
 .map(a => a[0].data) to remove the JSONP padding ([0]), then async’ promise (.data)
@Sean12697

MVP (Console Logs)
 Whoop!
@Sean12697

MVP (Display & Responsiveness)
 What do we need? (Image, Name, Members).
 How should elements be, how do they change (thinking about CSS in Media Queries).
NAME
MEMBERS
NAME
MEMBERS
NAME
MEMBERS
NAME
MEMBERS
 Container (Div) = inline-block
 Picture and Text Elements
 Text Align: Centre or Left
@Sean12697

MVP (Resulting HTML)
<div class="group" id="0">
<div class="meetupImg">
<img src="https://secure.meetupstatic.com/photos/event/9/0/f/f/600_447577119.jpeg">
</div>
<div class="groupText">
<a href="https://www.meetup.com/android_mcr/" target="_blank">
<p class="groupName">Android Manchester</p>
</a>
<p>Members: 341</p>
</div>
</div>
@Sean12697

MVP (Resulting CSS)
.group {
display: inline-block;
width: 150px;
height: 280px;
margin: 10px;
overflow: hidden;
background-color: #fff;
transition-duration: 0.4s;
}
.group:hover {
transform: scale(1.1);
}
.groupText {
margin: 5px;
}
.group img {
object-fit: cover;
width: 150px;
height: 150px;
padding-bottom: 0px;
}
.groupName {
height: 40px;
overflow: hidden;
}
@media only screen and (min-width: 324px) and (max-width: 480px) {
.group {
width: 100%;
height: 100px;
margin: 8px 0px;
text-align: left;
overflow: hidden;
}
.group label {
width: 100px;
height: 100px;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.meetupImg {
vertical-align: top;
}
.groupText {
padding: 0px 10px;
width: 50%;
}
.groupName {
margin: 0px;
margin-top: 10px;
}
.group img {
object-fit: cover;
width: 100px;
height: 100px;
padding-bottom: 0px;
}
.groupText p {
margin: 10px;
margin-left: 0px;
}
}
@Sean12697

MVP (Resulting JavaScript)
function drawMeetups(JSON) {
groupsContainer.innerHTML = "";
for (var i = 0; i < JSON.length; i++) {
var x = JSON[i];
var name = x.name;
var link = x.link;
var members = x.members;
var thumb = 'blank.jpg';
if (x.hasOwnProperty('group_photo')) {
thumb = x.group_photo.photo_link;
} else {
if(x.hasOwnProperty('organizer')) {
if (x.organizer.hasOwnProperty('photo')) {
thumb = x.organizer.photo.photo_link;
}
}
} groupsContainer.insertAdjacentHTML('beforeend', '<div class="group" id="' + i + '"><div class="meetupImg"><img src="' + thumb
+ '"></div><div class="groupText"><a href="' + link + '" target="_blank"><p class="groupName">' + name + '</p></a><p>Members: ' +
members + '</p></div></div>');
}
}
 Clear our container (which will have a loader)
 Go through each object in our returned JSON
 Put the content we need in variables
 Do error correction on some (don’t make
assumptions)
 Generate HTML and insert it within a container
element (which has been defined)
@Sean12697

MVP Complete (“Show
All Meetups”)
 Within 43 lines of JavaScript
 https://github.com/Sean12697/mcrmeetup
tech_workshop
@Sean12697

Tips & Tricks
 Spinner (for good UX) - https://medium.com/@kayliepoitras/css3-style-animation-preloaders-
d07914bb84a8
@Sean12697

Single Page Web App

More Related Content

Similar to Single Page Web App (20)

More from Sean O'Mahoney (10)

Recently uploaded (20)

Single Page Web App

Editor's Notes