[Music]
hey everyone
welcome
to the top six
i'm quincy larson with free code camp
i am joined by matt billman
ceo and co-founder of netlify
cole crumport
the
ceo and co-founder of formsfree
and chris anderson
the lead developer evangelist
for
verfana
the database
so today
we are going to be
talking with a lot
actually seven i said
top six but actually we decided to
extend it to a seventh one because we
were so pulled over by the quality of
the submissions we're going to be
talking with seven teams
of hackathon participants
many of whom did not know one another
36 hours ago
came together and built some amazing
stuff and we're going to see that
amazing stuff and we're going to get to
the bottom of how they built it and who
they are
so first we're going to start with
caption this
and
gentlemen perhaps we can start with you
just a quick introduction who you are
where you're from what you do
my name is vijay i'm from new hampshire
and
i actually am a technician
i work for ge aviation so as a
technician
and i just graduated from
the
granite state college
so
yeah that's what i do and i love coding
great thank you vijay welcome and uh
congratulations
on recent
graduations thank you great to see you
i'm uh david carter um
i just moved to san francisco in july
and um originally from the antelope
valley palmdale lancaster
and um
right now i work at a wordpress agency
and so i'm looking to get more into
reaction the jam stack great are you a
broncos fan i am a drone
how did you guess that
hi my name is sumit i'm a qa engineer
and i live in sunnyvale california
i actually started learning front-end
development at free code camp so this is
a big day for me
and yeah i'm continuing to learn more of
front-end like react and other
free bugs so yeah i'm really excited
thank you so much well
perhaps you could go ahead and give us a
very quick demonstration of how caption
this works
all right so caption this is basically
going to present you with a random gif
so every time you load the page
it's going to get a random gif
so if you don't like it you can always
press this next button
and you can choose better gifts
and see so you could enter in any
caption you want
submit it
and it's going to add it to our list of
submitted gifts
and every user could whether or not you
submit a gif
you can um up vote
and we're going to rank all these
submissions by votes
so the most popular will always be at
the top
and we've added authentication with
netlify
right on you've got some pretty cool
gifts here too and very good captions
for someone what's your favorite so far
that you've what what what caption are
you most proud of so far
um
it got deleted actually
it got deleted when we added our
where do you get the gifts from uh it's
uh the api is called the api is called
jiffy
so yeah that's where you're getting the
apps from so where do you stand on the
gif versus gif pronunciation
everybody who pronounces it gif say
ready
set
everybody who pronounces it jiff
say woo
actually i like to call it gif so that
is
a true diplomat
great
well
judges
what do you all think so far
it's great i really love this one um i
think it's fun i think it's kind of a
cool i like that you can upvote it and
then everyone can see that
um so it's it's participatory it's kind
of uh
it's cool
it's a good scope a lot of times hack
apps will overscope or underscope and
it's hard to be impressive like that but
it's impressive to bring it mostly to
completion
because you picked the right scope
yeah
yeah i would certainly
uh share that opinion i've seen so many
hackathon projects that are extremely
ambitious and then they have to pair
back all their
ambitions right before the demo time but
it looks like this is something that
was
definitely doable within the time frame
and
yeah and you all executed great did you
have any sort of top things you would
have liked to do that there wasn't time
from that you had to scope back from or
there is a um we wanted to tie
voting to user authentication right now
we're just storing that with local
storage so tying that into the user
would have been
i think it was nice
little good story it's just smart sort
of
gradual way of getting there
you imagine you'll keep hacking on it
um
maybe
i'm into it yeah i'm thinking about it
right on and uh what kind of
collaborative filtering
method are you thinking about are you
thinking about like a
like
reddit or hacker news or some of those
other collaborative filtering algorithms
and or how are you planning for things
to gradually decay and fall off of the
top we haven't thought of that actually
yeah yeah maybe something like that
well i mean there are plenty of models i
just wanted to see if you all were
thinking about it because you don't want
the top loaded thing to always be on the
top because it'll you know when it takes
off
should be fresh stuff
yeah we should have some tabs on there
so recent ones or pop most popular tabs
that
you can work on those
how did you split up the work between
you
so he
vijay did all the styling stuff yeah all
the css and
he did all the javascript part
and i was
there for like adding features sometimes
and also for like running around and
like we have problems with fauna tv or
forms free which we had
so talking to those two guys about how
do we like go forward uh what should we
do and all those things yeah we had
great help so we'd like to thank all the
judges and help us there during the
hackathon process it was really great
without them we couldn't even complete
this for sure right
what have you learned from this
hackathon that you didn't know at the
beginning about yourself
uh for me like uh i was
you know as i said i was um
coding in a free code camp online thing
so i had i never worked as a as a team i
never quoted as team so it's
really a different experience i believe
and i really learned a lot of stuffs and
how team
you know
goes up so i really
learned a lot about the teaming thing
first the first most thing
and about the you know reading
documentations that those things were
very important and because the apis we
used here and the
databases we use they were completely
new for us
but
uh you know
the the judges they showed us where to
go for the technical documentation so we
just rate that and i think because of
that so yeah we learned a lot actually
probably the collaboration skills
working with people in different skill
sets and learning to divide the work so
everyone works to their advantages
we didn't know each other before these
hackathons until yesterday we didn't
know each other i'm from new hampshire
all the way from new hampshire
and yeah so we just made a team and boom
are there other apps you almost built
uh no we didn't even have an idea for
this is gonna spur at the moment
at what point did you start
shift from like idea and
conceptualization and
building your team like at what hour of
yesterday would you say you actually sat
down and started
coding
probably after lunch
yeah
just after my chest
right
any other questions
what was the hardest thing you had to
solve while building this
the login
um because we just had limited time the
last hour yeah and then
incrementing the votes yeah incrementing
the votes
learning how to like we had to read and
write and yeah yeah talk to hona devi
like how would you do god
yeah well great thank you so much for
coming up here and for demoing
pleasure meeting you through gentlemen
and i'm very impressed with what you've
done here yeah
great girl thank you thank you
nice to meet you
just let me know when the audio is back
it's back okay great yeah so while wall
hacks piece coming up here go ahead and
get situated i just want to take a
moment to uh recognize
some of you are going to need to stand
be careful that white stuff and it's not
like a skate park
all right so i just want to take a
moment to acknowledge
uh
one of the biggest sponsors of the event
i guess uh maybe the biggest adventure
but
netlify
is such a an amazing supporter of the
developer community and they're really
pushing forward with a lot of
technology that's going to make the
internet faster and safer
and make it easier for organizations to
scale their website so matt billman
from netlify is a visionary
and
i'm very excited personally to see
where
where he goes and where netlify goes in
the coming years so thanks again for
your support thanks thanks for having me
here and thanks for helping bring all of
this on and driving it forward and for
building free code camp i think
everything we do is about helping
developers build things so
being at a place and seeing hundreds of
developers building things with our
thing is really exciting
and on the note of people building
things using netlify let's talk to haxby
how are you
great yeah yeah you're doing great yeah
well i hope we started starting with
this gentleman we'll just go
uh i guess in clockwise order yeah we'll
do it clockwise we're gonna go like this
why not we got we've got two dimensions
here yeah
uh and just tell us your name where
you're from and what what you're doing
with your time these days all right well
my name is robert wolf i'm
originally from europe but i'm taking my
extra semester here studying ux design
but i also like the code and when i
discovered jamstag about a year ago i
saw
one of the three first keynotes i was so
excited was like telling all my friends
stop doing what you're doing start doing
the new way and i'm so happy to be here
today where it actually kind of have
grown and i feel like there's a lot of
people around doing the same thing
great
yeah hi i'm anil i am working a software
developer here in bay area and i have
i'm really excited about the react stuff
and all then i got to know about the
gatsby stuff and i have built some kind
of local projects with me and
then i got to know more about the jam
stack and it was really exciting so i
want to know who out there is working on
that and i got to know about this
hackathon it's pretty good environment
out here yeah
hold on
so my name is kyle smith and i'm a
student at csu stanislaus a computer
science student
and uh
yeah just started learning about web
technologies when i was in high school
and found out about jam stack about like
a few months ago and it was just so easy
to grasp
and just been interested ever since
great
my name is manuel and i'm a computer
science student in cabrillo based in
santa cruz
and honestly i don't remember how i came
across free code camp but i came across
it thankfully
and i've been programming ever since
great
i'm ryan weimer i live here in oakland
in the bay area i actually work as a
project slash account manager so i like
these kind of opportunities because i've
never done a hackathon before but i
thought it would be awesome to get my
hands dirty in the code and i really
like the jam stack i've built a number
of you know personal websites with it
and it's such a contrast from like the
monolithic things that i'm used to
in the enterprise world you know doing
it for a big client it's really
refreshing to do something like this for
the jam stack
yeah well uh ryan it looks like you're
at the helm yeah let me know if we can
uh get this display
so
is it plugged in it is plugged you have
to unplug it and plug it in again okay
that's how they fixed the hubble the
other day classical
yeah
hdmi intel oh into the back of the usb
dongle yeah oh that would probably help
conspicuously sitting there
[Laughter]
all right here we go okay this is big
screen here we go let's make that full
screen
nice awesome
so robert as you already know our name
is haxby we're on the hackathon using
gatsby um this is the problem we're
selling if you ever learn the language
with a language app you know it's a
terribly boring and kind of weird
process usually let's stare at the
pictures of people you've never seen
before and try to attach your basic
vocabulary to the pictures it doesn't
really work i've tried to learn a
language with many different apps i've
never succeeded so
when we
came here together in the hackathon we
thought we're gonna make something
better we're gonna approach learning a
language differently
and what we realized is that
it's all about you right
what makes the learning language easier
if is if you can relate if your brain
can associate things with it so we
wanted to make something relatable and
also fun and that's why we created
u-lingual now
what u-lingual does is it takes your
instagram images
and
teaches you new vocab based on them now
this is how our app works so at first we
authorized instagram then we take the
pictures from the instagram and in real
time we pass them through the clarified
data to get image recognitions and get
an idea about what is it in there now
clarify api returns this word the tags
of the images in different languages so
we pull it out in a different language
of the user that he selected and we play
a quiz with them that's how we teach
them the words
now this is how the quiz looks like
so you have the word frutto that's for
example fruit and italian and you have
four pictures from your instagram feed
this is my own fear it's embarrassing
and you have to select the one that it
is
and thanks to clarify api being
available in 23 different languages we
can
offer this product in 23 languages very
easily so that's exciting
now we're going to show you a quick demo
about how it actually works
all right that's bigger
all right so this is the demo that we
had showed before so this is
a little bit more limited in terms of we
wanted to show
spanish specifically and again with
robert but just to kind of give you an
idea
and some of these words you know there's
obviously room for improvement masculino
masculinity could be a lot of these
right okay time ran out so that was an
example
yeah select great one we have a response
for a good job
beach if i select the wrong one oh sorry
incorrect and we're also totaling your
score so we kind of have some logic
involved with that fruto an example
and then basically we give you a score
that we total and we give you an ability
to tweet out your results um you know i
did great on
you know my my test in spanish with my
own selfies or something yeah we kind of
leave it up to the user and how they
want to promote it but that's kind of
our way of cross-promoting it
another
cool idea we thought was like this is
such a new thing and there's probably
all sorts of bugs and ways to improve it
we want to give an ability to add some
feedback right so using formspree we're
able to simply you know add a way to
give your name email what's your
feedback how can we make our app better
so you can send it
and
and actually send it
that's what some dummy data obviously
but yeah you get the idea right fork
stream makes it really easy um and
something that we're really excited
about is that's what we were showing
before and already we were already kind
of hacking away even in the short time
we had like let's add some more
languages right so we're already doing
that let's add german
um so
we're already working on making that
improved so it's just cool that we could
do so much more with it
so that's an example of german instead
of spanish and with my instagram feed
there you go very cool
so you were able to get instagram
integrated or did you see the data so
that was the biggest challenge we had
we had to say that our api experts can
talk about this
initially when we thought about the
instagram thing right we thought the
privacy process will be there and all
and we couldn't get the data and all so
then we figured out that there is a uh
api there out there but
the only constraint we faced is that
there's a sandbox api which allows only
10 users initially and each user will
have only 20 pictures from their feed so
that's how we are developing right now
but when we have a full-fledged app we
can
send for the instagram uh access so that
uh it can be expanded to an n number of
users so that's what we are working on
yeah so
that's one kind of problem we faced here
well the product looks great you've done
a good job of just keeping the number of
elements to an absolute minimum
and it's colorful and big elements
so i definitely
uh commend your design sensibilities
which of you
yeah
robert and i collaborated this great
kind of like pair programming split into
the api group and front end it was
awesome actually that's worked out
pretty great actually the api group and
the front-end group so that the task can
be divided easily yeah and
the integration had some hiccups but
yeah
it's pretty good
what was the planning like did you sit
down and think about i mean how did you
how did you choose the problem to solve
and then how did you set about choosing
instagram and machine learning to solve
it well so we actually gathered on
friday on a discord chat
so we didn't have any idea and we
started deciding on saturday morning
um we were very fascinated with the
clarify api we thought well this is such
a powerful thing we can do so many
things with it at first we thought about
helping visually impaired people
and then we had this uh idea of
languages and it just seemed like a
chiffon concept and a lot of things to
do with that and by noon we know this is
what we're going with
how did you select sort of the scope for
the app and and where there's some
things you felt like ah we really wanted
those in but you cut them out
actually when we first thought about the
app right we thought like many of the
kids apps are like this like
suppose when you go to school right
you'll learn about a fruit or something
by seeing to that and you learn the
language like that but
when we thought about instagram it came
out out of the blue and uh then we got
in about adults as well and new language
as well and that's how yeah we thought
this would be more personal to the
user rather than using some random
images so that's how it came up exactly
using instagram was kind of the key idea
that makes us excited because everyone
loves themselves they love their own
pictures they're just gonna be addicted
to this game as we are we stop
developing and start playing
we definitely ran into items with scope
right thinking about like project
management right you know we ran into
lots of cool features that we wanted to
so we actually had a whiteboard and
wrote down lists like these are problems
these are some kind of features and we
tried to address the problems before the
future features we wanted to add sound
that'd be really cool but that's
probably lower priority than some of
these other ones
so it's good to work on it in that way
are you all concerned that at some point
after playing the game a little bit that
you're going to kind of be seeing the
same images i mean i have a uh somewhat
active instagram feed but probably not
more than like
maybe like 50 images in there and i can
imagine that
i won't be able to learn all german
actually to be frank unfortunately the
instagram is not allowing other public
uh users images to be seen so that's one
kind of privacy policy they have but
other thing is that it can i think it
has an endpoint where we can get the
data from a specific location by giving
gratitude longitude so that might work
so that's kind of one of the
enhancements we thought about further
yeah so you can't like get images from
friends or anything exactly
unfortunately due to privacy issues this
would have been much easier three years
ago
but it's a little bit more difficult now
on the other hand clarify gives us a
list of 20 words per image so we could
basically if you have three images you
can still learn 60
a good words is that extensible can you
add like can you teach clarify more
more terms and stuff so right now we're
just using their general model we
haven't really explored in there i hope
we could maybe develop our own model
based on instagram pictures a lot of
food a lot of selfies right
yeah that's a good point have you
considered maybe uh expanding the
functionality by encouraging people to
take more photos on instagram and
graduate hey maybe you should take a
picture of fruit
yeah it could also teach you to be a
good photographer that way yeah yeah
photography projects and language
projects yeah all sorts of applications
yeah one more thing that's important say
for us it's important it's a website not
an app because this is something people
will go and try out really quickly and
that's where the power of gemstock is
coming so it
opens up instantly and with one click
you can start and play yeah we also will
save data in the local storage so when
the
user wizards again they will have their
app already open
yeah
is it mobile friendly is this thing
yeah i mean because the design is pretty
basic we didn't have to do too much
let's see
on the quiz itself
let's go back to this we did make it
somewhat
mobile friendly
as much as we can you know with a simple
design no that's good
have you considered talking to language
teachers to get feedback on how this
could be used how this could be improved
so none of us is actually
we didn't have personal experience
because robert has learned english and
other languages so that was good but i'm
sure other experts would be helpful yeah
well is this something you all are
considering pursuing beyond the
hackathon
i think so yeah yeah it could be fun
we came
it needs push notifications to remind me
it's time to study yeah that's right
and to remind you to take the instagram
photos of this
and when you go to your next country you
can talk to your friends in different
languages about your instagram feed
yeah well i i would encourage you to
continue pursuing it i'm not like
an expert in human psychology or
anything but the vanity angle and the
way that the brain works and stuff it
may actually be more compelling and form
stronger relations
if it's something personally related to
you that you're associating that word
with so
um thank you
gentlemen for coming in thanks for
building this excellent uh application
in such a short time it's very
impressive and uh yeah we'll we'll look
forward to
um hearing more about what you do in the
coming months and if if you do continue
working on this let us know because we'd
like to see how it comes along and maybe
to go
catch up and
do a retrospective on it yeah awesome
all right thank you thank you thank you
for the support here everyone
thank you
yeah nice meeting you great work
all right and
next
team who's going to come in
is going to be
make squad
i'm very excited about my squad
i'm also
very excited
about
what you're doing is
thank you so much cole
cole again uh ceo and co-founder of
performance free cold chromhold
and uh thanks for all the guidance
you've
provided to the many participants here
you have truly created a
a great developer experience as far as
installing forms and
forms are a big deal and
pretty much every developer has to deal
with forms and
i'm really excited to hear that you're
so rapidly expanding
and you've got the api
sounds like development is
coming along swimming over there
the team
who couldn't make it here they were
working really hard uh up up until like
pretty much the last minute and
yeah it was great um we got a lot of
good stuff done at the end including an
entire redesign of the site
which uh yeah
it was a great forcing function for us
to get a lot of stuff done i think now
we're going to probably do some cleanup
all right well good luck paying down the
technical debt
here we are with our next very exciting
team uh
first of all
before we get started i just want to say
that this was
incredibly well presented
i think all of us agreed that your
delivery was phenomenal
so we're looking forward to hearing a
little bit more of that donut delivery
here
but uh make squad let's start let's
start with you faith and perhaps you can
introduce yourself and then we can kind
of go around and clockwise and uh
introduce everybody else yeah definitely
um so
i'm faith um and um i'm a student at
make school so hence the name make squad
um and yeah so um
we have some other people here on the
team as well yeah well before before we
do uh if you could just tell us like
where you're from and aside from being a
student at make school like just a
little bit about your background sure um
so i'm from atlanta um i moved out to
san francisco to attend mcschool um
right now i'm working on back-end web
development as my primary concentration
um but i was interested in this
hackathon because uh the opportunity to
work kind of more in the front end and
exercise that skill a little bit
and i was excited by all of the apis um
and i also have an interest in things
that have to do with machine learning um
and we did employ a little bit of the
clarify api in here so that was really
fun to work with and to see how that
works yeah awesome and tachara yes i'm
tashara boucher and i'm from southern
california i've been in san francisco
for about two years and i came here to
do
to be a chaplain in the hospital
but after my residency year i i guess
um wanted to
do like a combination of both but tech
and the social services so my ultimate
goal is to try to have a non-profit for
young adults who've been mentally or
physically abused in childhood and to
help them with the trade like so the
coding and to be able to like put um
so that they can have a better lifestyle
after
having a slump i guess for the years um
and so this hackathon is a great
experience for me to get experience to
network with different people and to
meet these wonderful people who are from
make school and
graciously welcomed me into their team
i'm excited
awesome
i'm edwin and i'm from uh georgia also
in make school and i
moved here about four months ago
um
and
well
i i i worked with coding off and on for
like the last 10 years but
nothing really serious until i i moved
here
um but it's always been a passion of
mine and i had a lot of fun at this
hackathon learning these new
technologies great
oh i'm jonathan and i'm a full stock
developer at make school and i'm from
houston texas awesome
okay hi i'm stephanie um i'm a junior in
med school so i just started a couple
months ago in august and i'm from miami
i just learned about the opportunity um
um i've done also free co-op camp like a
couple of people here as well and it was
great i've also done one hackathon
before and it was it was great it was
stressful too but there were
the end product was great was lovely i i
love building products
yeah and since you all are from high
school perhaps just a quick word about
make school because it is a new
educational model yeah
so it's a new education model um and it
is um
product uh based learning um so
basically instead of attending a lot of
long boring lectures and writing stuff
on the whiteboard for hours and kind of
getting an entrenched in the theory of
it we build products throughout the term
you build a product at the end of every
term we have like our own mini hackathon
it's an intensive where you build a
product in a week
we work on teams we work individually so
throughout the time that you attend the
program you're building up a portfolio
um and so that's why a lot of us were
interested in doing this hackathon
because we wanted to have another
opportunity to build something to
yeah to ship it get our idea out there
yeah and how long is the program
mixed school is two years um and it is a
bachelor's program so it's an
accelerated bachelor's
we have some people who attend for about
a year and then they get hired out of
the program but it's a two year long
program great so at the end of the
program you all have a bachelor's degree
yeah
now it's pretty remarkable
so if you're looking for novel
higher education models it sounds like
this might be worth investigating
so um without further ado let's let's
jump to the demo you ready yes let's do
it
yeah so um our app is called network
you can leave your business card at home
because your face is your business card
and so
we thought a lot about you know what it
feels like sometimes when you're at
these networking events especially
because the world is full of a lot of
emerging technologies
sometimes you forget those business
cards or it's clunky to kind of like you
know waffle with those um and so our
idea was to build an app where you can
simply take a photo of somebody or you
can take a video of them
and you can use that video or that photo
to retrieve their virtual business card
to get back their information
so we built kind of a minimum viable
product here that demonstrates that idea
and we're hoping to have a chance to
develop it further in the future but for
now we do
want to start with the app
and so this is the um the business card
info you would go ahead and fill in your
name your email address your phone
number um your state city and state um
and then you can fill in your linkedin
we would also have twitter which would
be an optional field and then another
field where you could fill in uh
additional information
and then you could submit that but
before we go to the submission page we
also connected a contact form here
so for people who for people who have
questions for people who have id uh you
know ideas for new features or for
people who have problems using the app
they can um ping us we used forms free
to connect the contact form and this
form actually does work it does submit
and we get the email from that so we
could get updated information there yeah
you can go ahead and submit it if you
want to
and then
of course we have to put it that we're
not a robot
i'm not a room full of robots
i don't like y'all but i'm kind of a
robot
just a little bit just a little bit
so that went through a couple of
submissions from this ip address over
there yeah
um
and then for um
you can go ahead and yeah there you go
so we got two sides or two ways to um to
go ahead and check check out the
database you can go to camera
um first and you want to go to video
first camera okay
um and so then you just select the image
um so
for now we're using the celebrity um
model of the api um because it was
already hooked up to like a trading
model but ideally we would be able to
use user photos in the future
and
it goes to the database we used fauna db
for the database
and we used clarify for the api that's
the celebrity model that we're using
here
and then it would bring back the
person's information we have leonardo
dicaprio
and we got kanye
as our tests
great and earlier you you were able to
use a phone to demo this could you do
that just to show that the image
recognition
will work from like a another device and
then our third celebrity
all
right do it again
one more time
all right
it worked the demo worked
and so there's our app
yeah
great demo thanks for going through it
um
questions
how did you know that this was the app
you wanted to make how did you kind of
settle into the idea
well we're kind of talking about it
right
while we're coming into the building on
the first day and we like bounce ideas
around and we talked more about the
ideas once we got in and then decided
that this would be a good idea to
do at this hackathon
how at what point did you start working
in this specific idea
so when we first started out we um we
had been taught that um you actually
have to plan first before you start even
coding so we didn't start coding until
like the middle of the day
and so we started with um user stories
to try to make sure we we had the app do
what it's supposed to do and we had we
even used parts of github like on the
projects page where you have a kanban
board and you can move the um
the the cards over once you've been it's
been completed so i think that's a good
way to plan so that way you can know
whether what you're you want to do is
actually done
yeah and i can testify that we use
github projects all the time
it's very powerful isn't it satisfying
when you can move the cards over it's
like crossing it off your list
yeah i like that how did y'all organize
your work
how did you decide like team which teams
did that or you know front end back in
that kind of thing okay i think we all
played um on our streams i know that's
like one of the first things that we ask
is like what are you good at and we
divided it up that way and um we had
some very strong and beckons like she
said um the make school focuses on back
end but they also i guess focus on full
stack so really wonderful front-end
specialists right here and so just and
really everybody just chipping in where
you know whether they're slack given or
if someone was struggling they moved the
top out in any of the areas
you all did a great job with the the
design yeah um you know it's like you
know pink and blue i think they're
complimentary colors like if you look at
like a color wheel
and uh very minimalist design you can
see like the little element that kind of
flourish up there with the
rounded raindrop shapes
who did the design
well
[Laughter]
helped me with a lot of the things just
making sure it worked and it was
cohesive on every single page as well so
yeah
um yeah we had we had some some ideas
about what what we wanted and the way we
wanted it to look we did want it to be
minimalist so i'm glad you said that but
we also wanted i i was really a fan of a
lot of color in the background like um
so we can market to people who are are
networking and starting off in their
careers
yeah for the modern uh kind of
professional
yeah it definitely like looks like
something that would get acquired by
linkedin
they had
like a card app where you just like took
a photo of the card and then it you know
yeah
and now you can take a picture
on that note are you are you all
planning to continue working on this
after the weekend's over oh if linkedin
buys it
even if it doesn't take an offer
tomorrow morning
i think we have a great um kind of i
said minimum viable product before and i
think it would be good for us to
continue development on it so that we
can get it hooked up and get users
actually in there to make sure that this
is something that people would use that
people would enjoy using yeah actually
we haven't done any user testing so we
don't even know if this is this could be
good for them you know it could just be
a product and it doesn't go anywhere so
we have to
check our market as well yeah that's
very that's a
sage observation and uh i can tell you i
don't carry business cards and people
often ask for them
and i just say i don't know
your phone i'll email you
people being able to go
now you'll be able to say my face is my
business card
all right well thank you again so much
uh for coming in and demoing this and
building it and it sounds like you all
are from all over the u.s
congratulations on converging and and
forming a team and
you know jiving so cohesively yeah it's
amazing
so yeah thanks again and uh
we're looking forward to hearing about
how things go at future hacking lawns as
well thank you thank you
all right cheers
thanks hey
thank you
congratulations
thank you
thanks for having us okay thank you
all right thank you so much for the
opportunity yeah
all right
well
uh we're three demos in into our six or
seven teams that we're going to talk to
four more lifts
and at this time
i want to talk about chris anderson
he is
the director of developer evangelism
at fauna and
i interviewed this guy yesterday and i
don't know that i've ever talked to
somebody who's worked with so many
different types of databases that still
looks so young
he's definitely got an encyclopedic
knowledge of
nosql databases and also knows a lot
about real world implementation issues
and
and the trade-offs associated with
different types of databases
chris um thank you so much
for
coming here and inspiring everybody and
sharing your knowledge and also
uh thanks to to you and fauna for
sponsoring this event oh yeah i really
enjoy like the little bits of ways to
help people get unstuck when they're
hacking like to me that's the fun part
yeah
well um our next team
is i'm gonna have to look up your name
i'm sorry phoebe and jam yeah that's
right all right
so uh you all have these nice pasta
stickers on what do you think of the
household i forgot
for a mascot
i think it's nice it's got a little uh
little character to it yeah you think
it's the octa-cat tier
oh it's up there i don't know we need to
have like a you know how like
uh i think it's like game effect he's
has like the character
face off
and last year like tetris l block one
because it's the ultimate hero it saves
the day
yeah so
we should have something like that with
mascots and put pit uh octopad versus
hospital
oh yeah sure absolutely
so uh starting with you vince why don't
you tell us a little about yourself and
we're gonna move in a clockwise since we
got two rows here okay yeah okay so my
name is vince uh i'm a native san
franciscan born and raised
and i guess
i don't know
i'm an aspiring developer
you know currently looking for work
and uh
yeah that's pretty much it
hi my name is jin i like gin and tonic
like the alcohol
i'm also a native san franciscan like
vince
i'm also kind of using free code camp to
learn and try and learn how to program i
kind of have backgrounds as this admin
but i want to make that leap into the
development space and so this is my
first hackathon and trying to learn as
much as possible
all right next
my name is brandon stinson i am not a
developer i'm currently in the air force
i hit 13 years this month just uh trying
to learn something new for when i get
out so i've got a couple years left and
i want to be a developer so i've been
learning with free code camp and a
couple of the resources and it's my
first hackathon
awesome
yeah my name is reuben um i'm a native
san franciscan but i moved when i was
four
yeah i'm not developer either i'm a
mechanical engineer
and then i transitioned over to
electrical and now i'm trying to
transition over to software
and so yeah i used uh i still gotta
start with free code camp so thank you
quincy um but yeah i've just been
working on react and it's also my first
hackathon it's been just a ton of fun
like getting to talk with the sponsors
it's cool
yeah
and uh i'm austin
and i yeah i got a degree in chemical
engineering decided i wanted to switch
to software engineering and so yeah i
relied heavily on free codecamp for that
and and now i work at human api which is
a startup in san mateo and um so i have
a open source project you don't know
javascript exercises and run a meetup a
react meetup in berkeley so
wow
prolific punch
and uh yeah from from varied backgrounds
although disproportionately from san
francisco
yeah
from san francisco
well tell us a little bit why don't we
plug in so we can demo yeah so we'll be
able to are we going to use your phone
yeah oh there you go
wow
look at those hands
we need to get you a cryogenic freak oh
yeah or whatever they're called
so yeah so you can go ahead and click on
the app so it's uh sick pics
we have this little uh
so
yeah what sick pics is
is it's a game for anyone who can anyone
can play
um so right now so we have this create a
game button where you can click and
create a game right now there's a button
below that says no games available but
if there's a game available then anyone
can join
join a random game that someone else has
created and what the game is is
once it starts you could have any number
of people that have joined that game
and you need to take a picture of
whatever it tells you to take a picture
of and whoever takes that the picture of
that thing first wins
and it will notify everyone that you won
or lost and then it will take you back
to the home page so it's kind of like
um
blazing fast machine learning
uh image recognition scavenger hunt
um
that uh you can play with your friends
or anyone throughout the world
so um if any of you would like to play
yeah all right let's do it all right all
right phone's up
okay
so yeah let's go ahead and create the
game elegant
uh so it's s-i-c-c dash p-i-c-c-s
sick dash picks dot netlify.com
sig fix on netflix.com
and so you can once you get there
you can click join a random game
no sorry sick picks it's just plc
you might consider an easier spelling
[Laughter]
all right so it looks like we have six
players in this game
all right are you guys in good to go
yeah i'm gonna go ahead and start
all right we gotta take a picture of
ketchup
oh
oh that's some high speed turning there
i'm not sure why but you have a chance
someone could get you in the events this
is the fastest
iphone
[Laughter]
big oh who won
i lost two
maybe i i didn't win i did something
wrong
[Laughter]
hey out there they're in the kitchen
they're ready
yeah
i might have ended up in a oh okay all
right let's do it again you guys ready
all right let's create that game
whoa
yeah
i think you may have a good game on your
hands all right pretty quick there's
definitely less phones in here than
there are players
all right let's do this
[Laughter]
this is not a picture of ketchup
you have to take one that is probably
going to surpass the
advances
[Music]
all right so yeah um yeah so right now
anyone can create a game and when you
join a game you just join any kind of
random game um so yeah what we tried to
do was uh
make sure to clear out for the demo and
get the game going so but yeah anyone
with the the url can just go ahead and
create a game and anyone can join and
then whoever creates the game
has the control to start and so right
now what we have in our database as the
options are ketchup in a coffee so that
we know that we have it um but yeah with
the clarify api uh we could add all
kinds of things with all kinds of
different models
so um
yeah
all right worried that you might uh if
you know if you open it up
you might end up with
you know requests for images in there
that might put people in harm's way
you know like for example images
yeah
so the images don't
the images are all local so we're not
doing anything with the images we're not
sending them and the ones in the in our
database are just a coffee and a ketchup
not like a pickup truck on fire yeah
what other kinds of images do you think
you'd load in there to kind of expand
the scope of the game
what other kind of images yeah
do you have an example or a thought or
so
dog
dog oh you mean
yeah so really it's we're kind of just
limit
all we're limited by is the clarify api
so
right now our model we have a model of
the food model and we just have ketchup
and coffee but yeah we could yeah we
could
we would control like what's available
to be ended yeah for the scavenger hunt
yeah and then right now so like all the
whole game is is client based in terms
of like determining whether you won or
not so
um
which is it's kind of fun
with um just the fact that we can have
like almost the whole game client side
which is kind of a lot of fun yeah
what's the
obviously it has like a real-time
component and certainly what did you use
for that
um
does anyone else wanna answer yeah so we
used hasura
um so asura is i mean for everyone
listening who doesn't know yet uh real
time uh it's a graphql api or a back-end
database that has uh
real-time capabilities so that's that's
exactly why we chose to build the game
you know because that's like one of the
primary applications for it
um
yeah so one of the examples we would sub
for example showing the number of people
that are in the game you subscribe to
uh the users that have a game id of the
game that you you just created or the
game that you're a part of and so um
yeah any time that the postgres database
changes you automatically get those
those changes yeah whenever someone wins
we're just like we said the game is
completely client based so whenever
someone updates the state you know and
reacts that they won we just update that
in the database so none of like no one's
going to take a picture some weird and
put and push toward database yeah right
yeah so and then we also subscribe to
the status of the game so if when it's
pending and someone pushes start the
game then it will update for everyone
the fact that it's um started
in progress and then when someone wins
it updates to say that the game is
finished and who the the winner was
so um yeah we could we could expand to
you know have user names or or names or
also like you can choose which game that
you want to join perhaps
um yeah a lot of different ways we could
expand up that way
how was the development process like i
guess how did you decide what you're
going to build
so we started yeah we started i think we
i think we had um the apis in mind
already like clarify and asura like they
had like we just kind of thought about
the possibilities and so
um we decided again because i mean it's
fun to make games right and like also um
when you make something that's like
something
no one here has ever done something
exactly like this before right and so
we're all thinking creatively and
everything and so it helped us
i mean it pushed us you know what i mean
so that's like one of the reasons we
picked it
and um but as far as the development
process we started off with we
initially started off with the gatsby um
because um the graphql implementation
there is relatively easy to use and the
development screen is pretty fast but we
ran into several problems um one being
that graspy does get gatsby doesn't
handle mutations subscriptions anything
that's not a query very well and so we
switched over to cray racked up
and then we're using apollo as
clarify api
cloud
and cloud narrative
yeah we're sending our pictures to cloud
number and then we're gonna image the
url back and then sending that to
clarify
cool
yeah all right well gentlemen thank you
for the wonderful demo thanks for
answering our many questions very
exhaustive answers by the way it's
clearly you put a lot of thought into
the tools that you chose
yeah cool thank you thank you very much
thank you thank you thanks awesome
pleasures
thank you very much thank you you all
have fun thanks again i'll see you
downstairs
this way unless you want to go
i'm pretty impressed how are you all
feeling yeah
it's gonna be a hard decision that's
true yeah
i think it's really interesting to hear
sort of what the process is that people
are using and how some teams are really
going hard at the beginning
at the planning process
and kind of making sure that they're
building something up front that's going
to be useful i think that's cool to
i see
maybe
like society has advanced enough where
like you know when i was when i was in
getting into the industry i would have
done that right
yeah a it's a much more mature process
that people seem to be undertaking
as opposed to just like i think it would
be cool to
you know
have three databases and then try and
put them all together using an api
that's strictly based on images
i don't have any idea what i just said
no no
we probably don't we didn't even have an
api right let's just talk to it we're
all just
were there days like that i mean i
remember getting like floppy disks with
shareware too play around with right
like
because
when i was a kid you had to build your
own computer
where you could start writing code
welcome
hey colin right got it thanks for
watching
yes yeah i'm trying to be good with
names
okay well thank you so much for building
this amazing project that vaulted you to
what floor are we on
like right above us all there is is a
roof deck
wow yeah it was a catapult
right we heard that if we lose you're
going to catapult this off the roof we
would use it
try
in keeping with our double dare theme if
you bolt it into jello
just don't say i don't know
all right well welcome it's it's so
wonderful to have you both up here uh
perhaps you could just
tell us a little bit about yourself your
background how you all met what brought
you here
okay so my name is faye yang i flew in
from houston on friday houston texas
um i started free co-camp about two
years ago
and because i wanted to learn a little
bit more my day job's actually in
corporate finance
but i see the potential for the future
and i would like to be able to work it
more into my career
my name is colin i live here in oakland
currently i maintain a php app for a
construction company that's working on
the bart extension to san jose on a
contract basis i would like to be doing
a javascript javascript thing on more of
a full-time basis
we met
um
the day before friday yeah on discord um
in the channel to do to me
great and i think that's the second team
that made it all the way here that had
actually met and talked friday night so
preparation planning
definitely seems to work right yeah okay
great well perhaps you could uh go ahead
and tell us a little bit about
smartypants and uh give us a demo
so we're team smartypants
tea like the teapot song in final
jeopardy
um we built this app because every year
there's more than 300 000 people who'd
like to qualify for the show but only
400 people actually bank it now this
means that it's actually harder to get
on jeopardy than into harvard
i decided on monday that i would like to
audition for jeopardy but in looking
online i couldn't find any user friendly
or modern resources so when we came here
this is what we decided to build
so when you look at it you're presented
with a question the category and the
value of the question
so in the city of yuma in this state has
a record of record average of four
thousand fifty-five hours of sunshine
each year
any guesses arizona arizona
oh sorry what is arizona
you don't have to use the what is
okay cool so when you type in the
correct answer it increases your bank to
200 which was the worth
of the i think it's 100 for the worth of
the question
200 yeah so then it automatically
advances you to the next question now
for this one let's say we don't know we
don't want to be docked we just hit
enter to move on
so
no change now in this third one we're
feeling confident we're going to take a
guess any guess
we'll take a guess
and what we'll find is when it's wrong
the answer will show up below but you
also lose money in your bank well now
that you have the answer you say okay
let me type in the answer maybe it'll
take it
and
we can't cheat on this what happens is
when you hit enter no points no docking
move on
we found that this app will solve the
real life problem of we can take it on
the go it will be mobile friendly and it
has the capability to be a pwa powered
by gatsby
we built smartypants using gatsby so
that's react
material ui netlify and fauna
our first challenge was loading up the
fauna database we used the fauna
importer
command line tool
right away this gate was an issue that
seems to have something to do with
file format even though our json data
validated just fine deba at fauna was
super helpful he was kind enough to
actually go on their internal slack
channel
and
follow up seek help and follow up with
me in an email it turned out what we
needed was just a single flag on the
command line i was just missing an
option once we had that option it worked
fine we loaded up
610 sample questions that's 10 shows
worth
out of
our total set of 200 000 real world
historic jeopardy questions that we've
downloaded
the next
step was to
wire up that fauna database to netlify
using netlify's lambda function service
this gave us three issues
first of all in terms of
development production parity we had to
run a server to run the functions in
development whereas in production
they're on the same domain
so then proxying to that server in
gatsby
it eluded us at first
the second thing
the toml file format gave us some issues
we were putting sensitive data in there
we were putting api keys in there and so
we didn't want to version control it so
then we were like how do we get that on
netlify
remove the api keys and use netlify's
interface for environment variables like
heroku um
and the third thing was that gatsby and
building on the back end didn't have
access to window.fetch so we eventually
figured out that we needed a fetch
polyfill
um in all of these i have to get a give
a huge shout out to sean at netlify who
was super generous and super patient he
basically sat with us and paired with us
through all of these problems he seems
to like share our stoke at every success
point on all of these
in resolving all of these issues and a
couple more really it was about
simplified the simplest possible use
case and console log
that's something that i would say to
other free code camp learners especially
people who are just starting out
simplify simplify simplify and then get
some output as soon as possible console
log it
overall our biggest sticking point was
wiring up all these apis together i
spent all day yesterday and an hour of
this morning just getting these various
apis to work together and to get a
build that would deploy
um
so that took away a lot of time from
actually building ui from actually
building react components
now that i've done it once though i
would definitely go back i would
definitely use netlify and this host of
services again
so for future applications for the
jeopardy specific we want to add more
gameplay options but i think we have an
opportunity to also use this as a
framework
so i used to teach
english to um
elderly iranian immigrants who were
trying to qualify for citizenship so you
could take this this framework all you
need is your own fauna key
and
an appropriately
formatted set of
questions in json format and you could
upload those to your own fauna database
and then you could make something like a
citizenship quiz app that you could take
on the go
use at home at work on the bus etc
great
first of all it sounds like you all
learned quite a bit
for sure
do you have um like ideas about i don't
know um opening it up to be a
multi-player contest or uh end users can
submit new questions or that kind of
thing
um for end users submitting questions if
we're connecting to the jeopardy
historic database i think maybe not but
for their expansion
uh with using different frameworks yes
in terms of other players we toured with
the idea of doing user authentication
with profile with stats to strengthen
categories a leaderboard but with the
limited amount of time that we had this
weekend we've opened up an own issue in
our repo to work on it in the future
i would definitely say that user
identities and persisting data
would be one of our next steps
so it was i mean i think one of the
things everybody here loved like liked
about this app was that you scoped it
very well so you can easily see adding
that in the future right but
starting out with building something
that in itself works and gives the idea
before worrying about that it's a really
good approach
thank you thanks
yeah the core gameplay is
there are some other things that you did
early on to kind of try and scope the
project or
divide up the work or do the planning
before you actually started writing code
drew it out about how we want the basic
ui to look at potential gameplay formats
that we would pick a couple
and then how we would maybe do users and
how we'd split it up so ui ux react and
then more of the back end linking up the
different apis
and from our very first contact i would
say we immediately started talking about
what mvp looked like what our literal
minimal scope looked like and then
actually we have a teammate who can't be
here because he's at work
he so i said it took away time from
working on the ui he actually was
working on like basic ui without being
wired up to any back end yesterday while
we were doing the api wire up stuff
so so you were able to work in tandem
and not block one another totally yeah
synchronously
all right
do you have any other questions
for colin faye
straight up would you keep uh working on
it afterwards or did we already hit that
like are you thinking about experience
sure yeah we have like at least two or
three issues that aren't
very far off for us that i think we
could get to really quickly and i would
say um when people look for jobs after
free code camp they say build your
portfolio don't just build what's on the
coursework build what's your passion
project and i think i found mine in this
one
nice
great and uh just one last question when
are you planning to apply to uh to be on
jeopardy
i don't know i have a lot of studying
but first i need to build this app then
i'll study with the app
all right great well thank you so much
it's been a pleasure thanks good to see
you again
wow
a lot of games tonight yeah yeah yeah it
seems like a popular way to uh
make something cool for a hackathon
absolutely and pretty exciting to again
like if you're doing a game that single
player experience the first thing you
feel when you pick the game up matters
so much to the success of the game yeah
so like they did you can scope your app
and leave out like so much of the hard
heavy lift and still get your gameplay
done yeah
yeah and
what's the first game that any of you
created did you ever i mean everyone's
had to create a game at some point like
the first has always been like the
tutorial doing the kissing kiss and
number games yeah that has to be like
the first one
i created like a star trek next
generation quiz game
i don't know about first but
like high pressure was like uh somehow i
didn't know that i was gonna have like a
whole bunch of people who were you know
from overseas in my office like learning
the technology and
that morning so i woke up and got to
work and here's all these people and
they don't really speak english and they
need to learn nosql and so
i i've got the monitor up with my editor
and i was like let's make a game
nice nice
yeah i also ended up making a game
yesterday
oh yeah and live stream
all right well next up
uh we have the
this jam
fizzy jam
yeah thank you
busy jam
and uh so so thrilled to have you all
here
very impressed with your application we
can't wait to see it but we can wait
because first
we want to learn a little bit about you
all we'll start here with zubin and then
we'll go in clockwise order can i answer
real quick what was it about a project
that impressed you
first
so many things so many things yeah but
several things yes
it's a very impressive
application and uh you know just you
know the animation but i won't i won't
i'll wait i'll restrain myself
so
before i wax poetically about your app
i'll let the rest of the world see it
zoom in take it away hey um my name is
zubin um i'm actually from melbourne
australia i was here at work and um i
reached out to quincy got a ticket
because i really wanted to be part of
this i'm a free curriculum student in
fact free code camps that have rescued
me from from deep depression because i
couldn't figure out how to code before
if we could get like i'd given up twice
and then thanks for please go camp um i
really got back on and it's been upwards
since so really excited to use my skills
here
awesome welcome welcome to the states i
love it here
great i'm sean i was born and raised in
the bay
um i was originally in i.t and i since
left my job to pursue learning code
full time
and i've been doing it about a year now
and this is my first hackathon so
excited to learn
hi my name is ilan i'm originally from
colombia
i've been in the bay area for about five
years and i'm a front-end developer
and i love the idea of jumpstart so i'm
very thrilled to be here until the end
my name is juan i'm from
massachusetts
and i'm currently a student at rhythm
school yeah
let's go to school
my name is sarah i just moved to san
francisco a couple months ago to also
attend rhythm school and this was my
first hackathon so it's great to be here
i learned a lot great
yeah my name is david lau and i'm a free
co-camp student and i just i've been
going through the curriculum the full
stack the new full stack web development
curriculum
and uh
i learned so much going through this
project
uh that you wouldn't learn by yourself
because it's just a completely different
setting
i mean you think you know everything
already but once you work with other
people
you don't know
is my language
but no it's great to work with other
people with different backgrounds and
you need to like just work with other
people you think like you think you know
it all but you don't you can always work
with more people and yeah i love these
guys great well
word to the audience come to hackathons
put yourself out there get experience
working with a team
all right so
let's see it all right you ready cool
yeah all right so i'll quickly introduce
busy jam so
um we like to think of easy jam as it's
time to
do to forget about pokemon capture data
instead
you know when you when you come to a
hackathon there's a real problem with
invisible data you know who's who's
there what level of experience do they
have do they need to team members or not
how do they find team members and then
there's a problem for actual organizers
and the uh you know the product managers
and others who run the sponsorship side
of things right so the api and things
like that all the apis available
who's using it
whether they had an easy time or not
such an easy time using why did they
choose to use it this is all really
valuable information from the
organizational point of view so
eventually what we're going to make busy
jam do is also be a matchmaking service
for attendees and at the same time
provide really high quality data to
organizers and the and the sponsors um
when we got together we realized um it
was such a pain because none of us
actually knew each other it was hard to
find team members and that right away
was an immediate you know problem that
we wanted to try and solve that's where
this started and then we said before we
start building or writing and code let's
actually validate this so we went and
had a whole bunch of interviews spoke to
a bunch of people
interviewed each other and others who
had attended
identified the basic problem statement
then started
prioritizing what we wanted to build
researched the apis built it you know it
was a great experience uh and so what
visijam does now as you can see it's
it's a pretty straightforward dashboard
we've got all that is real-time data and
so we've used
gatsby and netlify of course we also use
formspree
so that's actually real data from
attendees at this um
at this hackathon so david if you want
to go to the entry form um so that's
actually we can actually start bunching
in data right now and david will do that
as i speak but it asks a bunch of
questions um and you can see that it'll
update so when we go back to the
dashboard you will see for example if
david were to say that he's now very
experienced in java it'll show that
there was another person who's increased
his you know
level of experience and let's say java
um we can add stuff fairly quickly to
this that also talks about what uh what
apis they use right now we're using form
spree for the actual form um and we're
also using phone streams back-end with
an api endpoint from where we can
retrieve the data we're using um netlify
to actually run the continuous
deployment um and you know the netlife
login page is also possible but that
makes sense only once we have a proper
user data model and stuff like that um
right now
you can see that when he's when he
submits it it'll say okay um
what i want is i don't want i want the
viewer to be able to see that i made a
change in the data
so what i'm going to do is i need to
make another tab
and
because i don't want it like dummy data
so so so that when i do something
actually the change is reflected so
right now the percentage of mail you can
see is gender 6624 so once i enter my
form data it should theoretically
increase 66.2
by whatever one of whatever is the total
so as long as larger than that so we
will know it's different 66 point
yeah so go to this actually doesn't work
it goes to the yeah you can go back to
the video
yes go back to that yeah i'll go back to
the bookmark
so mail was 66.2
it's 66.7 so there was a difference so
we can see that there's a change in the
data yeah and what we did was we had
members of our team walk up to other
attendees and personally deliver this
kind of survey conduct the kind of
survey ask them
these questions some of us ask them
questions i just gave them the links
like hey can you could you do this for
us
and you know yeah you're nice yeah
they'll say yeah of course why not it's
just a couple minutes just fill out a
simple form but yeah the root problem as
zubin uh mentioned was when we all came
in we didn't know who who each other are
and we could use this data to if we had
this data beforehand we would know
better about our other attendees oh you
work with javascript i work with
javascript too it's just easier way to
know who each other are it would have
been helpful
if we had this before but we made it now
we can use this for future hackathons
anything we can expand it to wherever we
want but we can do that all in two days
so we just did what we could the basic
one of our users actually had a really
cool suggestion they're like you know
we've done two or three of the attack
accounts before but we don't have a
profile that says that um with the link
to the hackathon then i actually thought
that's actually a fantastic idea let's
talk about you know user generated
product development right somebody
actually okay so you know if um david's
done three hackathons these are the
dates this you know this is the link
it's a great platform for hackathons to
advertise their hack accounts as well
yeah and the products that could be like
there's so much stuff we could use and
unlike other you know we wanted to be
careful not to make it a trivial
custodial application we want to make it
something that could prove that the apis
were also capable of supporting a b2b
use case which i think is really
important from a monetization point of
view for the api certainly so we said
okay if this was a serious product could
it actually you know could the apis
actually support it and they absolutely
can so that's great
excellent thank you for the demo it's
questions have you thought about how to
get the word out to me this is like
tailor made for uh press releases and
having magazines right here i'm enough
to get on a live stream i don't know if
you have any ideas on how you can do
that but that would be awesome
um
but yeah we can always make it
we can always make it better i know it
looks kind of uh
it looks simple right now but we can
make it like more interactive
uh so that once you enter like once you
enter your data you can know exactly
like you'll animate so you can see the
change in difference of the data so it
doesn't look like i have to refresh the
page
uh but yeah let's we can look over the
data and this kind of data could be
interesting to a data scientist who
studies data i don't think any we none
of us had kind of background data
scientists but i've heard of what they
do i mean i know what their role is it's
different than us we're doing
development we make the structure we use
the structure and build up the product
but
to this a data scientist they could see
oh you know this uh
this event had many attendees who had
program who had experience with
javascript right like 20 beginners
18
38 intermediate
and 5 advanced
and
not many not many ruby
developers so probably not many too many
who develop on ruby
most
kicks just jumping actually because
that's an interesting question do you
guys how would you guys want to use this
because you know we've asked a lot of
the participants we haven't had a chance
to ask people who actually produce the
apis and the management how would you
like to use something like this so how
would you see this be useful well you
mentioned a little bit matchmaking which
would you know you need to go deeper so
you'd model the individual correct
there's an individual uh you know who
fills out the survey yeah yeah that was
a feature that we talked about in our
planning process um but you know we were
thinking about what's our minimum viable
product in a two-day period it was kind
of on the wish list yeah yeah we had to
be really strict about prioritizing but
you know that's the perfect sort of
thing for a graph you are kind of you
know back in it would be awesome yeah
any other ideas at what point did you
guys all decide like this is what we're
going to build instead of building i
think we had like this basic concept um
pretty quickly like within five minutes
of discussing our plan yeah um and then
we kind of had a sort of like spider web
conversation of like what about these
features we made a list um and then
probably took another 20 minutes to
really narrow down like this is our
minimum viable product and i think one
of the big challenges we faced is
um even when we were starting out we
started out with a static json file that
we were loading the data from
and then we wanted to transition to the
live update that hits the api so a lot
of us are really new to git and so um
having kind of different branches where
we were experimenting with different
things
um created submerged conflicts so it was
actually great to have the opportunity
to kind of work through that together no
you you asked how it the idea started
right
it it actually uh started uh when we all
sat down and we had the brainstorming
idea and uh elon he just threw it out
there say you know we should we should
start asking people around i mean he had
he had the initiative to just bring it
up
and we were all listening we were
thinking if it's a good idea
we thought about it and we said yeah
let's just let's do it yeah i have to
definitely commend your execution
because it takes
i can speak from experience having built
projects where you go around and you ask
everybody back upon do something it
takes a lot of uh
work and a lot of courage to approach
your peers and stick an ipad in their
hand or however you were going about
doing it so
yeah it's really impressive you might
scroll down just a little bit to the
years of coding so according to
typeform which is what we use to collect
uh data for advent giving up the tickets
the tickets were free but you had to go
through this tutorial this jam stack
tutorial i created uh and one of the
questions was
how long you've been coding
and uh the median number of months was
16 16 months coding which is right there
yeah so this is where yeah so it's
between one and two years so yeah that's
exactly right that's the representation
that's distribution just between 12 and
20.
yeah yeah so it's pretty cool that uh
your data is so representative as my
data which was like a thousand data
points yeah that's great yeah it shows
like yeah there's a wide range of
experience
and
uh yeah there's something that works
less than six months
so you know if you're attending someone
maybe your experience and you want to
group up with someone
uh
experience as well so you know you know
you guys can get started real quick
right away maybe you know you want to
grow up with someone with less
experience so you can mentor them that's
a possibility too if you knew if people
who signed up had less experience you
could link them up with the people who
are looking for
people looking for
and i think also like in just promoting
you know future hackathons you know for
me this was my first hackathon and i was
kind of wondering whether i should sign
up or not am i going to be ready um and
so seeing you know that oh in the last
hackathon there were people who had less
than six months of coding experience um
could be a way to make you know more
people feel comfortable in the future
were there questions you wanted to put
in but left out because you didn't have
too many questions absolutely i mean we
wanted to actually
talk about stuff like we'll you know
hopefully we were thinking if we could
collect the data fairly close to the end
but we knew that's a high pressure time
everyone's going to just tell us to take
a hike right but the idea was you know
which of the apis you use and actually
just have a chat but like we've got the
form widget i just haven't
productionized that that bit because you
know we didn't want to add that um there
were a couple of questions like that how
many have you done before and stuff like
that so we just wanted to prioritize
what we know people would be happy to
share very quickly it takes less than 30
seconds to collect the data when we went
out but ahead um that kind of stuff yeah
yeah and as part of the ideation process
we talked about if we wanted to be more
individual contributor like a member or
someone attending
uh focused or uh like uh sponsor focus
right so
with
once we decide on that we were also able
to kind of parse through the questions
and be like okay this is something more
that like netlify would want to know
right this is more something someone
like me sarah or elon would want to know
so we did that as well
well i'm very impressed with this and i
could definitely see this as being kind
of like
one of the major components of
essentially
a larger open source hackathon toolkit
that hackathon organizers could use
and
one of the things we built over the
weekend at freecodecamp was that
leaderboard
we called it the project index because
it wasn't actually a leaderboard but it
you know
this plus that which is open source i
think they put the mit license on it um
and all these other uh tools that we
could potentially come up with you know
we could potentially have like a whole
suite when you want to have a hackathon
clone this repo yeah get started right
license as well yeah quincy actually i
want to bring this up
we did was actually something you did
earlier earlier simpler uh uh before
like this year which was like a
uh every time you sign up to sign into
freecodecampage there's a survey a link
with the header it says click here we're
we're doing a
mass survey of all the
uh developers please spend give us five
minutes that's that's exactly what we
did
we asked people you know their
background just demographic information
that's just what you did and then we we
just brought alive to the to the
to the tendons the locationality of it
uh and the temporality of it are
definitely an interesting
uh aspect and what uh what dave is
referencing is the
2018 new coder survey which we
interviewed 30 000 people
uh
we had them all fill out a survey we're
currently crunching those numbers but
we're gonna
release that as a giant public data set
hopefully in a month or so and you know
people are interested in that data right
we're going to get it out there yeah hey
oh thank you so much thank you
thanks everybody david thank you sarah
juan
elon
sean
you all are great you've done some
amazing work here and uh
thanks again i hope you'll stick around
and eat some food get some drinks you
guys talk downstairs thank you thanks
very much thank you thank you
all right and i think we have
anybody need to go to the bathroom hang
in there
four five six seven
team number seven
where in the world they should be coming
in
that's my resume if you didn't hear me
yeah it's a shame
you have got some uh yeah there you go
yeah i respect it
all right welcome thank you thank you
thank you thank you
thank you for waiting in the hall
[Music]
it is uh
thrilling to introduce you all we were
very impressed with your application we
can't wait to see it before we do let's
go around and talk about each of you and
your background
and what drew you to this hackathon
we'll start with you sure my name is
tatis i
i've been a full stack develop web
developer for a few years but recently
uh left my company to go to work on a
jam stack app a business built around a
jam stag app of my own
so that's what i'm doing right now and
i'm here because jamstack drew me the
the conference jimmy to to san francisco
and wanted to stick around for the
hackathon as well
so i'm jeff i am a
freelance web developer i've been
working for about seven eight years at
various contracts and i've been really
uh into the jam stack because i love
working on the front end part of things
and
i like working on the interface and what
you see and
you know if i can have apis take care of
the back end it's
great so i i wanted to meet more people
that are
all about that kind of stack and see
where i can go with it so yeah great
my name is gabe greenfield i'm a
front-end developer i work at frontier
airlines in denver colorado
um and yeah i'm drawn to the jams tech
as another you know front end developer
looking to outsource some of that back
end work so that i can do what i love
and make apps really quick that are fun
cool exciting and really powerful
so uh yeah
my name is tyler vick i live in columbus
ohio
i am an aerospace engineer turned data
scientist turned web developer
and
i've been using
netlify in my freelance work
and i
couldn't miss the chance to come to a
sponsored jam stack conference and
hackathon
sounds like you all have a lot of jam
stack experience between the four of you
it's awesome uh
jeff you want to take it away with the
demo
yeah so
um well i guess yeah we're team where in
the world and we are going to be doing a
live game show with everybody watching
so if you're watching please join in
check there's a link on the discord
before you can go to
uh whitworld.live
yes we bought a domain don't worry it's
hosted on netlify
please join that link and so we're going
to get started here
but uh and you and if you know if it's
taking you a minute you can join in the
middle it's fine so
you just go here um put in your your
name
it's gonna show up on the leaderboard so
pick a name that you'll recognize
yeah so we'll give them a minute to join
now we're in the lobby if you look in
the top left there you can see the the
player count increasing um live no no
need to refresh
it'll keep up updating as more players
join looks like we've got you might want
to drag the window just a little bit
yeah
is it not yeah hopefully it's right on
the screen 18. wow
yeah
great all right
so now we can full team i think we're
about ready let's kick it off we're
gonna we're gonna kick it we're using a
little netify function with our we might
play a couple back again
there's gonna be an image and then
there's a map okay you wanna pick like
point a pin
on the map where you think that image is
that's basically it where in the world
the image is all right are you ready
kick it off here okay let's do it
so now everyone sees this and if it you
know the mobile should see uh the images
the map below the image
and if you're on a desktop you'll see
you can see where i'm guessing so now
[Laughter]
now jeff has guessed he's submitted
everyone else is getting their
submissions in and as everyone else is
guessing we're going to see them pop up
live here uh wherever
everyone thinks it is
and then you also if you make the screen
a little smaller we can see the scores
on the right as well oh yeah don't
forget to hit submit because if you
don't hit submit you just won't get uh
you just won't get the uh
we won't record your submit your your
yes
what happened there
but uh don't worry we run it again we
can run another game in a second here
but you can see the scores are popping
up there on the right um as as
everyone's done and the game is over
right yeah the game is over it's you get
30 seconds and uh that was that's the
game
so we can play let's do another one
do another one for those of you who
missed
might have had anything unclear with the
instructions
so play again pops up you should have a
button up here yeah or in your mobile
app somewhere click play again on top to
play again
so now we'll be in the waiting room oh
man we got 21 now
getting up there
yeah just gonna feel the pressure random
all right
ready to play another one
let's do it
all right here we go we're live where in
the world
jeff
middle of the united states
i don't think there's any water there
jeff
colorado maybe oh maybe
[Laughter]
we've got oh everyone's so far away
what's we're all over the place here
what's going on oh someone's in idaho
lots of california san francisco is that
the yeah could that be the golden gate
bridge
it looks like a golden gate bridge
is it oh but i don't know some people
are
all right and i was very far off
but now later on
all right good job
right on the mark
all right yeah so that that's our demo
and we'll pull up our little
acknowledgement slide here
we jammed a lot together
into this little app here but uh we can
run through this asura was
very instrumental in that we were making
use of graphql subscriptions and it made
it really easy to set those up like the
websocket endpoint that they
automatically generated for us and i
made that really easy netlify we
obviously deployed on netlife and then
also used a lot of netlife functions so
that's uh when when we're when we're
waiting to get the game started we have
a little like on our github readme we
set up a little admin panel that makes
it easy to just start a game with
different uh with different images that
we have lined up uh curated to go and
then on the bottom we have all the
little pieces the little moving pieces
that uh help make it happen so it's a
it's a react app we're using apollo on
the client side to do the graphql
integration with asura heroku is hosting
our
asura instance then the google maps api
provided the map and the some of the
slack and github tooling we used for
start development process essentially
yeah great good demo
how'd you all get together as a team and
how did you choose what you were going
to build
well we all kind of met each other at
the conference we were all at the
conference and sort of we're mutually
connected there
and we formed our team yesterday morning
at breakfast
and
threw out some ideas
and we just chose one shortly after the
keynote and
went with it yeah we were we kind of the
way we described what we honed in on is
uh that we wanted to do two things we
wanted to show the power
show the
show the power of the jam stack and also
show people the world that was the kind
of
nice
how uh what was kind of the develop i
guess the like product development
process like did you uh
you know did you do any drawings did you
kind of like do any i don't know
case
uh user study kind of thing or anything
like that or did you just dive right
into write code
we did some uh like data modeling we had
i brought in a little mini white board
with this guy
uh so we did some data modeling so that
way we could have like some sample data
in our database um and it was really
good for just kind of driving a
discussion of like oh like we didn't
think about this concept the same way so
then we were able to kind of bridge
those gaps before we started writing a
single line of code or thinking of a
single mock yeah
and then we split up like
someone working on the data setting up
the database and then
working on the front end we decided to
do a pair programming because we didn't
want to like too much confusion and we
could just put two minds in onto one
computer and that worked really well i
think that was yeah yeah
because especially like there were
moments where like oh like somebody was
really honed in on something needed to
get something done maybe we were you
know a few like an hour before or some
deadline and then but because we
programmed most of it we were always
able to rely on some other person who
knew each piece of the like all these
different pieces that were working
together so we could always have like
kind of like a fallback plan in case
like the person who had actually been
doing the driving wasn't available at
the moment
yeah what features um are you know just
outside of scope that you would add if
you had more time
the two big ones that we
had had in mind were the ability for
users to kind of like facilitate these
games in the sense that like uploading
the photos um you know we think we one
of our inspirations was trivia hq so we
like the concept of having one game
going on but it'd be nice if kind of
with our show the world kind of mission
uh if users could like say like i you
know i really i think this place is
really cool and i want more people to
know about it let me submit a photo of
that place and let's play a game about
it and then the other one is kind of
have like a different uh potentially
like different localizations for the
games so like everyone can play a world
game but if we were to like say let's
play like a san francisco kind of game
then there would be like the like level
of granularity at which the photos would
come in and that people could play would
be only relevant to people who like
really know the area so then just kind
of like different levels of localization
would be interesting as well yeah
yeah that's
i could see this being really popular my
parents love that trivia hq game and
they always play together and i could
definitely see this being like a
community thing like san francisco has
so many distinctive landmarks and even
little benches that people might be able
to recognize you know yeah
for sure we thought long term maybe we
could introduce training of machine
learning
on some of these images um maybe do like
a what in the world app where you could
look at certain things and
see what those things are but yeah
that's kind of a far goal
yeah
all right well thank you so much for
coming in and giving this awesome demo
thanks for coming out yeah i'm building
this it's
you've used a lot of different tools
yeah i'm just uh i think it's always
awesome when something is is scoped just
right so you can actually like really
end up with it with a working demo and a
live domain and
launch something to the world in the
weekend yeah i think
to be honest like with all the tools it
makes that easier like i'm surprised
that in two days we could do this but i
think
like all of these tools number five sort
of
react i mean it's like
yeah pretty cool i think i would have
spent a half a hackathon just putting up
a website when i was a full stack web
developer and now i was like not the
fight buy domain deploy oh we're live
on our new domain yeah it was amazing
it's a brave new world yeah
cool
thank you thanks yeah yeah yeah pleasure
gentlemen i'll see you downstairs all
right sounds good thank you yeah
all right
well
we've had very in-depth talks with seven
different teams and uh we are going to
discuss among ourselves uh the judging
team i just want to give a final shout
out
netlify
for everything they're doing
for providing the fundamental technology
that this entire hackathon has run on uh
thank you so much matt for your
sponsorship and for being on the judging
panel thanks
thank you chris and everything you all
are doing over at fauna we're very
excited about it we're interested in
exploring it ourselves and free cooking
thank you so much cole you're an
incredible interviewee we're going to
post that interview with coal later
thanks to forms for you for sponsoring
and uh everybody who's watching have a
beautiful evening and keep jamming
[Music]