Adding Users to the Node.js / React.js Neo4j Movie App

Adding Users to the #Nodejs / #Reactjs Neo4j Movie App


via @thesilverlogic

  • Once a user has logged in and navigated to a page that displays movies, the user can select a star rating for the movie or remove the rating of a movie he or she has already rated.
  • When a user visits their own profile, the user will see movie recommendations.
  • These users will be able to log in and out, rate movies, and receive movie recommendations.
  • Before a User can rate a Movie , the the user has to exist – someone has to sign up for an account.
  • Users with established tastes may be interested in finding movies with similar characteristics as his or her highly-rated movies, while not necessarily caring about whether another user has or hasn’t already rated the movie.

Learn how to add users and movie recommendation engine to the Neo4j Movie App Template using Node.js and React.js in addition to the Cypher query language.

@neo4j: Adding Users to the #Nodejs / #Reactjs Neo4j Movie App

via @thesilverlogic

The Neo4j Movie App Template provides an easy-to-use foundation for your next Neo4j project or experiment using either Node.js or React.js. This article will walk through the creation of users that can log in and interact with the web app’s data.

In the Neo4j Movie App Template example, these users will be able to log in and out, rate movies, and receive movie recommendations.

relationship, illustrated in the graph data model below.

being hate it.

label along with properties necessary for logging in and maintaining a session.

Figure 1. web/src/pages/Signup.jsx

. The app submits a request to the register endpoint when a user fills out the “Create an Account” form and taps “Create Account”.

, or by using cURL.

Use Case: Create New User

curl -X POST –header ‘Content-Type: application/json’ –header ‘Accept: application/json’ -d ‘{ “username”: “Mary Jane”, “password”: “SuperPassword”}’ ‘http://localhost:3000/api/v0/register’

Use Case: Try to Create New User but Username Is Already Taken

curl -X POST –header ‘Content-Type: application/json’ –header ‘Accept: application/json’ -d ‘{ “username”: “Mary Jane”, “password”: “SuperPassword”}’ ‘http://localhost:3000/api/v0/register’

. Here’s the JavaScript:

var register = function(session, username, password) { return session.run(‘MATCH (user:User {username: {username}}) RETURN user’, { username: username }) .then(results => { if (!_.isEmpty(results.records)) { throw { username: ‘username already in use’, status: 400 } } else { return session.run(‘CREATE (user:User {id: {id}, username: {username}, password: {password}, api_key: {api_key}}) RETURN user’, { id: uuid.v4(), username: username, password: hashPassword(username, password), api_key: randomstring.generate({ length: 20, charset: ‘hex’ }) }).then(results => { return new User(results.records[0].get(‘user’)); }) } }); };

Now that users are able to register for an account, we can define the view that allows them to login to the site and start a session.

. The app submits a request to the login endpoint when a user fills a username and password and taps “Create Account”.

, or by using cURL.

Use Case: Login

curl -X POST –header ‘Content-Type: application/json’ –header ‘Accept: application/json’ -d ‘{“username”: “Mary Jane”, “password”: “SuperPassword”}’ ‘http://localhost:3000/api/v0/login’

curl -X POST –header ‘Content-Type: application/json’ –header ‘Accept: application/json’ -d ‘{ “username”: “Mary Jane”, “password”: “SuperPassword”}’ ‘http://localhost:3000/api/v0/register’

{ “username”:”username already in use” }

curl -X GET –header ‘Accept: application/json’ –header ‘Authorization: Token 5a85862fb28a316ea6a1’ ‘http://localhost:3000/api/v0/users/me’

node in the database.

If the verification is successful it will return a token. The user is then directed to an authentication page, from which they can navigate through the app, view their user profile and rate movies. Below is a rather empty user profile for a freshly created user:

Figure 3. /web/src/pages/Profile.jsx

Once a user has logged in and navigated to a page that displays movies, the user can select a star rating for the movie or remove the rating of a movie he or she has already rated.

The user should be able to access their previous ratings (and the movies that were rated) both on their user profile and the movie detail page in question.

Use Case: Rate a Movie

curl -X POST –header ‘Content-Type: application/json’ –header ‘Accept: application/json’ –header ‘Authorization: Token 5a85862fb28a316ea6a1’ -d ‘{“rating”:4}’ ‘http://localhost:3000/api/v0/movies/683/rate’

curl -X GET –header ‘Accept: application/json’ –header ‘Authorization: Token 5a85862fb28a316ea6a1’ ‘http://localhost:3000/api/v0/movies/rated’

curl -X GET –header ‘Accept: application/json’ –header ‘Authorization: Token 5a85862fb28a316ea6a1’ ‘http://localhost:3000/api/v0/movies/1’

When a user visits their own profile, the user will see movie recommendations. There are many ways to build a recommendation engine, and you might want to use one or a combination of the methods below to build the appropriate recommendation system for your particular use case.

Newer movies will have few or no ratings, so they will never be recommended to users if the application uses users’ rating-based recommendations.

Since movies have keywords, the application can recommend movies with similar keywords for a particular movie. This case is useful when the user has made few or no ratings.

has seen many movies and is looking for new movies similar to the ones he has already watched.

Click below to get your free copy the O’Reilly Graph Databases book and discover how to harness the power of graph technology.

Adding Users to the Node.js / React.js Neo4j Movie App