2024-02-04T08:33:36.998Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
9228226c-311e-4e53-9b3d-ad559e50b029
e24da0a504bd1e6b389298de256298bf514eb21e338bba8a2000161f5c4d3eb5
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to build a Reddit style upvoting, downvoting system using Angular 4 and Firebase.
In this example, we have a collection of items already in the database and we also have Firebase authentication set up in our app.
If you're new to Firebase authentication, I've added a couple of links in the description with more details.
The first thing we need to think about is modeling our data and the Firebase NoSQL database.
Our database needs to answer 2 fundamental questions.
What is the user's vote for a given item?
And what's the total vote count for a given item?
We can answer this question by creating a collection based on the unique ID of the items.
For each item ID, we save the user IDs that have voted on that item.
This way, we can query an item and see if the users voted on it, And we can also tally up the collection of users under an item to get the total vote count.
Let's start by building the service.
The first thing we need is the Firebase object observable for a specific item ID.
We also need the user to be able to cast their vote by updating the item object in the database.
The update user vote function will send a new key value pair to the item in the database with the key being the user's ID and the value being the value of the vote, which can be either a negative one, 0, or a 1.
Now we can build the Upvote button component.
Our component will accept a couple of input values.
Since this is normally gonna be a child component of an item, we can go ahead and pass it the item ID as well as the user ID.
In the component typescript, we have just a generic component, but we're also gonna be using the input decorator.
And we've also imported Lodash as well to help us facilitate the vote count, which you'll see later on.
So we have input variables for the item ID and the user ID.
And we have couple of number variables, one that represents the total vote count, and one that represents the current user's vote.
During the NG on a net lifecycle hook, we can subscribe to the Firebase Object Observable from our service.
The Observable itself is going to emit the up votes and we can use that to figure out what the user's vote is and also get the total vote count for an item.
And we add a conditional statement when checking the user vote because it's possible the user's not logged in when viewing an item.
An added feature you might consider is redirecting the user to a login page when they click the upvote button and they're not logged in.
In this example, I'm Using the Lodash library to put all the object values into an array and then get the sum of that array.
Doing the same thing in JavaScript will require a lot more code, So we're gonna keep it concise and readable.
So now we can build 2 separate functions, 1 for upvoting and 1 for downvoting.
These functions are identical, the only difference being a positive one for an upvote and a negative one for a downvote.
We also want the user to be able to cancel their vote by just clicking the same button again.
So we do this by checking to see if the user vote Is it already an upvote or a downvote?
And if it is, then we set the vote value to 0, which will essentially reverse their vote.
We can do this in one line using a JavaScript ternary operator to replace a multiline if else statement.
The final step is to end the subscription once the component's destroyed to avoid introducing memory leaks into the app.
We can do this with the on destroy life cycle hook.
In the template, we create 2 arrow icons that handle upvoting and downvoting.
We simply bind the upvote and downvote functions to the click of that on these buttons.
In order to show the user whether or not they've upvoted or downvoted for an item, we color the upvotes green and the downvotes red.
We can do this with the ng class directive, which will add an active class to the item if its upvote is either greater than 0 or less than 0.
Now if we go into our app, we can see that we have a fully functional upvoteownvote system.
On the left, We have the app itself, and on the right, we can see it's updating the Firebase database in real time.
That's it for this episode.
If you found the video helpful, please like and subscribe.
And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com.
For just a few bucks a month, you'll get This is to exclusive content as well as free 1 on 1 project consulting.
Thanks for watching, and I'll see you next time.

Speaker 0: In this episode, we're going to build a Reddit style upvoting, downvoting system using Angular 4 and Firebase. In this example, we have a collection of items already in the database and we also have Firebase authentication set up in our app. If you're new to Firebase authentication, I've added a couple of links in the description with more details. The first thing we need to think about is modeling our data and the Firebase NoSQL database. Our database needs to answer 2 fundamental questions.

What is the user's vote for a given item? And what's the total vote count for a given item? We can answer this question by creating a collection based on the unique ID of the items. For each item ID, we save the user IDs that have voted on that item. This way, we can query an item and see if the users voted on it, And we can also tally up the collection of users under an item to get the total vote count.

Let's start by building the service. The first thing we need is the Firebase object observable for a specific item ID. We also need the user to be able to cast their vote by updating the item object in the database. The update user vote function will send a new key value pair to the item in the database with the key being the user's ID and the value being the value of the vote, which can be either a negative one, 0, or a 1. Now we can build the Upvote button component.

Our component will accept a couple of input values. Since this is normally gonna be a child component of an item, we can go ahead and pass it the item ID as well as the user ID. In the component typescript, we have just a generic component, but we're also gonna be using the input decorator. And we've also imported Lodash as well to help us facilitate the vote count, which you'll see later on. So we have input variables for the item ID and the user ID.

And we have couple of number variables, one that represents the total vote count, and one that represents the current user's vote. During the NG on a net lifecycle hook, we can subscribe to the Firebase Object Observable from our service. The Observable itself is going to emit the up votes and we can use that to figure out what the user's vote is and also get the total vote count for an item. And we add a conditional statement when checking the user vote because it's possible the user's not logged in when viewing an item. An added feature you might consider is redirecting the user to a login page when they click the upvote button and they're not logged in.

In this example, I'm Using the Lodash library to put all the object values into an array and then get the sum of that array. Doing the same thing in JavaScript will require a lot more code, So we're gonna keep it concise and readable. So now we can build 2 separate functions, 1 for upvoting and 1 for downvoting. These functions are identical, the only difference being a positive one for an upvote and a negative one for a downvote. We also want the user to be able to cancel their vote by just clicking the same button again.

So we do this by checking to see if the user vote Is it already an upvote or a downvote? And if it is, then we set the vote value to 0, which will essentially reverse their vote. We can do this in one line using a JavaScript ternary operator to replace a multiline if else statement. The final step is to end the subscription once the component's destroyed to avoid introducing memory leaks into the app. We can do this with the on destroy life cycle hook.

In the template, we create 2 arrow icons that handle upvoting and downvoting. We simply bind the upvote and downvote functions to the click of that on these buttons. In order to show the user whether or not they've upvoted or downvoted for an item, we color the upvotes green and the downvotes red. We can do this with the ng class directive, which will add an active class to the item if its upvote is either greater than 0 or less than 0. Now if we go into our app, we can see that we have a fully functional upvoteownvote system.

On the left, We have the app itself, and on the right, we can see it's updating the Firebase database in real time. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get This is to exclusive content as well as free 1 on 1 project consulting.

Thanks for watching, and I'll see you next time.
In this episode, we're going to build a Reddit style upvoting, downvoting system using Angular 4 and Firebase. In this example, we have a collection of items already in the database and we also have Firebase authentication set up in our app.
If you're new to Firebase authentication, I've added a couple of links in the description with more details. The first thing we need to think about is modeling our data and the Firebase NoSQL database. Our database needs to answer 2 fundamental questions. What is the user's vote for a given item? And what's the total vote count for a given item? We can answer this question by creating a collection based on the unique ID of the items. For each item ID, we save the user IDs that have voted on that item. This way, we can query an item and see if the users voted on it, And we can also tally up the collection of users under an item to get the total vote count. Let's start by building the service. The first thing we need is the Firebase object observable for a specific item ID. We also need the user to be able to cast their vote by updating the item object in the database. The update user vote function will send a new key value pair to the item in the database with the key being the user's ID and the value being the value of the vote, which can be either a negative one, 0, or a 1. Now we can build the Upvote button component. Our component will accept a couple of input values. Since this is normally gonna be a child component of an item, we can go ahead and pass it the item ID as well as the user ID. In the component typescript, we have just a generic component, but we're also gonna be using the input decorator. And we've also imported Lodash as well to help us facilitate the vote count, which you'll see later on. So we have input variables for the item ID and the user ID. And we have couple of number variables, one that represents the total vote count, and one that represents the current user's vote. During the NG on a net lifecycle hook, we can subscribe to the Firebase Object Observable from our service. The Observable itself is going to emit the up votes and we can use that to figure out what the user's vote is and also get the total vote count for an item. And we add a conditional statement when checking the user vote because it's possible the user's not logged in when viewing an item. An added feature you might consider is redirecting the user to a login page when they click the upvote button and they're not logged in. In this example, I'm Using the Lodash library to put all the object values into an array and then get the sum of that array.
voting
elections
databases
Doing the same thing in JavaScript will require a lot more code, So we're gonna keep it concise and readable. So now we can build 2 separate functions, 1 for upvoting and 1 for downvoting.
These functions are identical, the only difference being a positive one for an upvote and a negative one for a downvote. We also want the user to be able to cancel their vote by just clicking the same button again. So we do this by checking to see if the user vote Is it already an upvote or a downvote? And if it is, then we set the vote value to 0, which will essentially reverse their vote. We can do this in one line using a JavaScript ternary operator to replace a multiline if else statement.
voting
elections
The final step is to end the subscription once the component's destroyed to avoid introducing memory leaks into the app. We can do this with the on destroy life cycle hook. In the template, we create 2 arrow icons that handle upvoting and downvoting. We simply bind the upvote and downvote functions to the click of that on these buttons.
In order to show the user whether or not they've upvoted or downvoted for an item, we color the upvotes green and the downvotes red. We can do this with the ng class directive, which will add an active class to the item if its upvote is either greater than 0 or less than 0.
voting
Now if we go into our app, we can see that we have a fully functional upvoteownvote system. On the left, We have the app itself, and on the right, we can see it's updating the Firebase database in real time.
That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get This is to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
youtube
streaming
podcasts
purchasing
In this episode, we're going to build a Reddit style upvoting, downvoting system using Angular 4 and Firebase. In this example, we have a collection of items already in the database and we also have Firebase authentication set up in our app. If you're new to Firebase authentication, I've added a couple of links in the description with more details. The first thing we need to think about is modeling our data and the Firebase NoSQL database. Our database needs to answer 2 fundamental questions. What is the user's vote for a given item? And what's the total vote count for a given item? We can answer this question by creating a collection based on the unique ID of the items. For each item ID, we save the user IDs that have voted on that item. This way, we can query an item and see if the users voted on it, And we can also tally up the collection of users under an item to get the total vote count. Let's start by building the service. The first thing we need is the Firebase object observable for a specific item ID. We also need the user to be able to cast their vote by updating the item object in the database. The update user vote function will send a new key value pair to the item in the database with the key being the user's ID and the value being the value of the vote, which can be either a negative one, 0, or a 1. Now we can build the Upvote button component. Our component will accept a couple of input values. Since this is normally gonna be a child component of an item, we can go ahead and pass it the item ID as well as the user ID. In the component typescript, we have just a generic component, but we're also gonna be using the input decorator. And we've also imported Lodash as well to help us facilitate the vote count, which you'll see later on. So we have input variables for the item ID and the user ID. And we have couple of number variables, one that represents the total vote count, and one that represents the current user's vote. During the NG on a net lifecycle hook, we can subscribe to the Firebase Object Observable from our service. The Observable itself is going to emit the up votes and we can use that to figure out what the user's vote is and also get the total vote count for an item. And we add a conditional statement when checking the user vote because it's possible the user's not logged in when viewing an item. An added feature you might consider is redirecting the user to a login page when they click the upvote button and they're not logged in. In this example, I'm Using the Lodash library to put all the object values into an array and then get the sum of that array. Doing the same thing in JavaScript will require a lot more code, So we're gonna keep it concise and readable. So now we can build 2 separate functions, 1 for upvoting and 1 for downvoting. These functions are identical, the only difference being a positive one for an upvote and a negative one for a downvote. We also want the user to be able to cancel their vote by just clicking the same button again. So we do this by checking to see if the user vote Is it already an upvote or a downvote? And if it is, then we set the vote value to 0, which will essentially reverse their vote. We can do this in one line using a JavaScript ternary operator to replace a multiline if else statement. The final step is to end the subscription once the component's destroyed to avoid introducing memory leaks into the app. We can do this with the on destroy life cycle hook. In the template, we create 2 arrow icons that handle upvoting and downvoting. We simply bind the upvote and downvote functions to the click of that on these buttons. In order to show the user whether or not they've upvoted or downvoted for an item, we color the upvotes green and the downvotes red. We can do this with the ng class directive, which will add an active class to the item if its upvote is either greater than 0 or less than 0. Now if we go into our app, we can see that we have a fully functional upvoteownvote system. On the left, We have the app itself, and on the right, we can see it's updating the Firebase database in real time. That's it for this episode. If you found the video helpful, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get This is to exclusive content as well as free 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
build
build
a
a
Reddit
reddit
style
style
upvoting,
upvoting
downvoting
downvoting
system
system
using
using
Angular
angular
4
4
and
and
Firebase.
firebase
In
in
this
this
example,
example
we
we
have
have
a
a
collection
collection
of
of
items
items
already
already
in
in
the
the
database
database
and
and
we
we
also
also
have
have
Firebase
firebase
authentication
authentication
set
set
up
up
in
in
our
our
app.
app
If
if
you're
you're
new
new
to
to
Firebase
firebase
authentication,
authentication
I've
i've
added
added
a
a
couple
couple
of
of
links
links
in
in
the
the
description
description
with
with
more
more
details.
details
The
the
first
first
thing
thing
we
we
need
need
to
to
think
think
about
about
is
is
modeling
modeling
our
our
data
data
and
and
the
the
Firebase
firebase
NoSQL
nosql
database.
database
Our
our
database
database
needs
needs
to
to
answer
answer
2
2
fundamental
fundamental
questions.
questions
What
what
is
is
the
the
user's
user's
vote
vote
for
for
a
a
given
given
item?
item
And
and
what's
what's
the
the
total
total
vote
vote
count
count
for
for
a
a
given
given
item?
item
We
we
can
can
answer
answer
this
this
question
question
by
by
creating
creating
a
a
collection
collection
based
based
on
on
the
the
unique
unique
ID
id
of
of
the
the
items.
items
For
for
each
each
item
item
ID,
id
we
we
save
save
the
the
user
user
IDs
ids
that
that
have
have
voted
voted
on
on
that
that
item.
item
This
this
way,
way
we
we
can
can
query
query
an
an
item
item
and
and
see
see
if
if
the
the
users
users
voted
voted
on
on
it,
it
And
and
we
we
can
can
also
also
tally
tally
up
up
the
the
collection
collection
of
of
users
users
under
under
an
an
item
item
to
to
get
get
the
the
total
total
vote
vote
count.
count
Let's
let's
start
start
by
by
building
building
the
the
service.
service
The
the
first
first
thing
thing
we
we
need
need
is
is
the
the
Firebase
firebase
object
object
observable
observable
for
for
a
a
specific
specific
item
item
ID.
id
We
we
also
also
need
need
the
the
user
user
to
to
be
be
able
able
to
to
cast
cast
their
their
vote
vote
by
by
updating
updating
the
the
item
item
object
object
in
in
the
the
database.
database
The
the
update
update
user
user
vote
vote
function
function
will
will
send
send
a
a
new
new
key
key
value
value
pair
pair
to
to
the
the
item
item
in
in
the
the
database
database
with
with
the
the
key
key
being
being
the
the
user's
user's
ID
id
and
and
the
the
value
value
being
being
the
the
value
value
of
of
the
the
vote,
vote
which
which
can
can
be
be
either
either
a
a
negative
negative
one,
one
0,
0
or
or
a
a
1.
1
Now
now
we
we
can
can
build
build
the
the
Upvote
upvote
button
button
component.
component
Our
our
component
component
will
will
accept
accept
a
a
couple
couple
of
of
input
input
values.
values
Since
since
this
this
is
is
normally
normally
gonna
gonna
be
be
a
a
child
child
component
component
of
of
an
an
item,
item
we
we
can
can
go
go
ahead
ahead
and
and
pass
pass
it
it
the
the
item
item
ID
id
as
as
well
well
as
as
the
the
user
user
ID.
id
In
in
the
the
component
component
typescript,
typescript
we
we
have
have
just
just
a
a
generic
generic
component,
component
but
but
we're
we're
also
also
gonna
gonna
be
be
using
using
the
the
input
input
decorator.
decorator
And
and
we've
we've
also
also
imported
imported
Lodash
lodash
as
as
well
well
to
to
help
help
us
us
facilitate
facilitate
the
the
vote
vote
count,
count
which
which
you'll
you'll
see
see
later
later
on.
on
So
so
we
we
have
have
input
input
variables
variables
for
for
the
the
item
item
ID
id
and
and
the
the
user
user
ID.
id
And
and
we
we
have
have
couple
couple
of
of
number
number
variables,
variables
one
one
that
that
represents
represents
the
the
total
total
vote
vote
count,
count
and
and
one
one
that
that
represents
represents
the
the
current
current
user's
user's
vote.
vote
During
during
the
the
NG
ng
on
on
a
a
net
net
lifecycle
lifecycle
hook,
hook
we
we
can
can
subscribe
subscribe
to
to
the
the
Firebase
firebase
Object
object
Observable
observable
from
from
our
our
service.
service
The
the
Observable
observable
itself
itself
is
is
going
going
to
to
emit
emit
the
the
up
up
votes
votes
and
and
we
we
can
can
use
use
that
that
to
to
figure
figure
out
out
what
what
the
the
user's
user's
vote
vote
is
is
and
and
also
also
get
get
the
the
total
total
vote
vote
count
count
for
for
an
an
item.
item
And
and
we
we
add
add
a
a
conditional
conditional
statement
statement
when
when
checking
checking
the
the
user
user
vote
vote
because
because
it's
it's
possible
possible
the
the
user's
user's
not
not
logged
logged
in
in
when
when
viewing
viewing
an
an
item.
item
An
an
added
added
feature
feature
you
you
might
might
consider
consider
is
is
redirecting
redirecting
the
the
user
user
to
to
a
a
login
login
page
page
when
when
they
they
click
click
the
the
upvote
upvote
button
button
and
and
they're
they're
not
not
logged
logged
in.
in
In
in
this
this
example,
example
I'm
i'm
Using
using
the
the
Lodash
lodash
library
library
to
to
put
put
all
all
the
the
object
object
values
values
into
into
an
an
array
array
and
and
then
then
get
get
the
the
sum
sum
of
of
that
that
array.
array
Doing
doing
the
the
same
same
thing
thing
in
in
JavaScript
javascript
will
will
require
require
a
a
lot
lot
more
more
code,
code
So
so
we're
we're
gonna
gonna
keep
keep
it
it
concise
concise
and
and
readable.
readable
So
so
now
now
we
we
can
can
build
build
2
2
separate
separate
functions,
functions
1
1
for
for
upvoting
upvoting
and
and
1
1
for
for
downvoting.
downvoting
These
these
functions
functions
are
are
identical,
identical
the
the
only
only
difference
difference
being
being
a
a
positive
positive
one
one
for
for
an
an
upvote
upvote
and
and
a
a
negative
negative
one
one
for
for
a
a
downvote.
downvote
We
we
also
also
want
want
the
the
user
user
to
to
be
be
able
able
to
to
cancel
cancel
their
their
vote
vote
by
by
just
just
clicking
clicking
the
the
same
same
button
button
again.
again
So
so
we
we
do
do
this
this
by
by
checking
checking
to
to
see
see
if
if
the
the
user
user
vote
vote
Is
is
it
it
already
already
an
an
upvote
upvote
or
or
a
a
downvote?
downvote
And
and
if
if
it
it
is,
is
then
then
we
we
set
set
the
the
vote
vote
value
value
to
to
0,
0
which
which
will
will
essentially
essentially
reverse
reverse
their
their
vote.
vote
We
we
can
can
do
do
this
this
in
in
one
one
line
line
using
using
a
a
JavaScript
javascript
ternary
ternary
operator
operator
to
to
replace
replace
a
a
multiline
multiline
if
if
else
else
statement.
statement
The
the
final
final
step
step
is
is
to
to
end
end
the
the
subscription
subscription
once
once
the
the
component's
component's
destroyed
destroyed
to
to
avoid
avoid
introducing
introducing
memory
memory
leaks
leaks
into
into
the
the
app.
app
We
we
can
can
do
do
this
this
with
with
the
the
on
on
destroy
destroy
life
life
cycle
cycle
hook.
hook
In
in
the
the
template,
template
we
we
create
create
2
2
arrow
arrow
icons
icons
that
that
handle
handle
upvoting
upvoting
and
and
downvoting.
downvoting
We
we
simply
simply
bind
bind
the
the
upvote
upvote
and
and
downvote
downvote
functions
functions
to
to
the
the
click
click
of
of
that
that
on
on
these
these
buttons.
buttons
In
in
order
order
to
to
show
show
the
the
user
user
whether
whether
or
or
not
not
they've
they've
upvoted
upvoted
or
or
downvoted
downvoted
for
for
an
an
item,
item
we
we
color
color
the
the
upvotes
upvotes
green
green
and
and
the
the
downvotes
downvotes
red.
red
We
we
can
can
do
do
this
this
with
with
the
the
ng
ng
class
class
directive,
directive
which
which
will
will
add
add
an
an
active
active
class
class
to
to
the
the
item
item
if
if
its
its
upvote
upvote
is
is
either
either
greater
greater
than
than
0
0
or
or
less
less
than
than
0.
0
Now
now
if
if
we
we
go
go
into
into
our
our
app,
app
we
we
can
can
see
see
that
that
we
we
have
have
a
a
fully
fully
functional
functional
upvoteownvote
upvoteownvote
system.
system
On
on
the
the
left,
left
We
we
have
have
the
the
app
app
itself,
itself
and
and
on
on
the
the
right,
right
we
we
can
can
see
see
it's
it's
updating
updating
the
the
Firebase
firebase
database
database
in
in
real
real
time.
time
That's
that's
it
it
for
for
this
this
episode.
episode
If
if
you
you
found
found
the
the
video
video
helpful,
helpful
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
For
for
just
just
a
a
few
few
bucks
bucks
a
a
month,
month
you'll
you'll
get
get
This
this
is
is
to
to
exclusive
exclusive
content
content
as
as
well
well
as
as
free
free
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains the process of building a Reddit style upvoting and downvoting system using Angular 4 and Isabel. They discuss modeling data and the collection of users under an item to determine the total vote count and total vote count for an item. The service requires input variables and a conditional statement to prevent memory leaks in the app. The speaker also explains the up and downvowel process and offers a free one-on-one project consulting.
Reddit Inspired Upvoting System with Angular and Firebase NoSQL
https://angularfirebase.com/lessons/reddit-style-upvoting-in-angular-4-and-firebase-nosql/

Learn how to build a Reddit-style upvote/downvote system with Angular 4 and Firebase Realtime NoSQL database.