Quick prototyping with GRAND stack: part 1

• Part 1 – Product introduction, tech spec and graph model.
• Part 2 - Apollo Graphql server and neo4j-graphql-js
• Part 3 - Apollo client and React

In these series I will go through building a simple web application using the latest and greatest on the web - the GRAND stack. What does it stand for? Graphql, React, Apollo and Neo4j Database. Why should you consider using this stack for your next project? Mainly, for much shorter development cycles, which gets you (here Michael Siebel describes what goes into building an MVP) a better chance to find a product market fit.

The product

The application we are going to develop is a peer matching application. In short – Tinder for indie hackers. This application will provide peer matching opportunities based on users' preferences for pop-culture genres, their skill level and their collaboration goals. If you want to do a mock up coding interview session, find a co-founder, a study buddy, a friend or study one of coursera courses with somebody you would login and setup your profile:

After that you can see those who have a similar set of preferences and thus are a better fit for you:

If you like them and they like you back the match will be created where you can set up collaboration routines:

You can watch the ux flow here.

The tech spec and graph model

It is always a good idea to have a tech spec before you start building something. Here is an example one for this product. For the modelling part the accepted flow for neo4j community is using the arrow tool at http://www.apcjones.com/arrows/#. Which is a great resource for modelling your data according to the tech spec you specified. Here is the one for this product:

What is great about graphs is that they are natural to think about and easy to model our business requirements in. As you can see the application flow is apparent from the graph:

• Users can like or dislike each other
• Create tracks and comments
• Have preferences for goals, skills and pop-culture genres

Neo4j ships with an intuitve cypher query language which let's you specify your queries in a natural ASCII-Art syntax that resembles our graph. Here is an example one for the main screen of our product – best collaboration candidates for our user:

MATCH (u:User{userId:"1"})-[:PREFERS]->()<-[:PREFERS]-(candidate:User)
WHERE NOT EXISTS((u)-[:LIKES|:DISLIKES]->(candidate))
WITH candidate, COUNT(*) AS score ORDER BY score DESC
RETURN {userId:candidate.userId, score:score}

Let's go line by line. First line: find a user by id, who prefers the same thing as the candidate user. The curly braces surrounded by [:PREFERS]->()<-[:PREFERS] could stand for either a genre, a goal or a skill. Second line: exclude those candidates which the user already liked or disliked. Third line: count the number of preference paths and order candidates by this count. Fourth line: return these candidates with count as a score. This simple query straight away satisfies one of the main requirements for our product - the potential matches requirement in the tech spec!

What is great about using neo4j as your data store is its richness to model your business requirements straightaway without the pain of modelling your sql store to satisfy your requirements. Additionally, neo4j-graphql-js integration further improves developer experience by delegating the setup of your graphql server to neo4j queries. I shall explore it in more detail in part 2.