Note: To use this application, Node.js must be installed, Node can be installed at: https://nodejs.org/en/
How to install Node.js on mac: https://www.webucator.com/how-to/how-install-nodejs-on-mac.cfm
How to install Node.js on windows: https://treehouse.github.io/installation-guides/windows/node-windows.html
For user who will use the web-application for evaluation or leisure..
1 Download/clone the repo above
2 Open your code editor and access the code editors terminal/external terminal
3 Navigate to the API and UI directory (two terminals) and run "npm install"
4 Due to updates/severities, "npm run audit" maybe requrired to run after
5 In both API and UI directories, run "npm run dev" to run the localhost development servers
6a Access web-application with your browser at localhost:3000
6b Using your mobile device please access your local IPV4 address from where the localhost is running from, using port 3000. etc 191.168.11.1:3000
This application is developed for the purpose of allowing students to collaborate with each other by using their own expertise in order to solve another students problem, this web-application will allow a student to either: create a favourr they need help of a fellow student who has or shares expertise within the field, or to find potential tasks or requests to help students by gaining experience and confidence within their chosen profession.
This web-application uses the SANG stack (also known as SAND) that uses the technologies: Svelte Sapper, Apollo Client and Server, Neo4j Database served in the cloud through Microsoft Azure, and GraphQL for comprhensive queries and mutations.
The SANG stack template offers developers an extremley efficent and unique set-up to quickly start developing well-built web-applications for experienced developers, or like me, new aspiring developers.
The template provided by vanbenj for this stack is available at: https://github.com/vanbenj/sand-stack-starter and give vanbenj a star for providing a fantastic template!
The guide for using the sandstack is documented below, written also by vanbenj.
Also, please check out:
https://svelte.dev/ to learn more about svelte, a modern, component based approach to front-end web development https://neo4j.com/docs/ to learn more about neo4j, a leading graph-based database
Login Page that requires an existing or new user to login or register:
Registration form for new users:
Initial landing page upon session:
Messaging services that contains, inbox, outbox, and notifications:
About page to understand the purpose of the web application:
Create a Favourr in order to collaborate with many different students:
This project is a starter for building a SANDstack (Sveltejs/Sapper, Apollo GraphQL, Neo4j Database) application. There are two components to the starter, the UI application (a Svelte/Sapper app) and the API app (GraphQL server).
This project used as a starting point the api component from the GRANDstack project and the ui component from the Sapper template.
The ui app preloads the data for each page using Sapper preloading and Sapper server routes. The Graphql server is called internally by the server routes and does not need to be exposed to the client.
The branch browser-apollo-client shows an alternate approach that does not use server routes but instead preloads the data in the .svelte pages directly from the GraphQL sever via a proxy defined in server.js.
The branch svelte-apollo is similar to the branch browser-apollo-client but also makes use of svelte-apollo
If you are new to Svelte this is a good introductory video
The GRANDStack documentation provides a good overview of the Neo4j GraphQL integration.
You can quickly start using Docker engine version 19 or later:
docker-compose up -d
List the running containers:
docker ps
There should be three containers started:
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
625acfa444fa sand-stack-starter_ui "docker-entrypoint.s…" 3 minutes ago Up 2 minutes 0.0.0.0:3000->3000/tcp sand-stack-starter_ui_1
843c5ea8d997 sand-stack-starter_api "docker-entrypoint.s…" 3 minutes ago Up 2 minutes 0.0.0.0:4001->4001/tcp sand-stack-starter_api_1
8ae79170f66e sand-stack-starter_neo4j "/sbin/tini -g -- /d…" 3 minutes ago Up 3 minutes 0.0.0.0:7474->7474/tcp, 7473/tcp, 0.0.0.0:7687->7687/tcp sand-stack-starter_neo4j_1
Load the example DB after the services have been started:
docker-compose run api npm run seedDb
You should now be able to access the Neo4j database browser at localhost:7474 (you can log in using neo4j/letmein)
You should also be able to access the Apollo GraphQL browser at localhost:4001/graphql
The application should be running at localhost:3000
The project is set up to allow the api and ui servers to run in dev mode. This mode enables a watch on all files and automatically deploys when changes are saved. The following instructions show you how to start each server component separately.
If you've run the docker-compose script be sure to shut down the docker containers before starting in development mode.
docker-compose down
Be sure your development machine is running Node version 12.
node --version
There are many ways to run Neo4j for development purposes. The README in the neo4j directory describes several approaches. However the simplest is to start a stand alone Docker container using the DockerFile provided.
cd neo4j
docker build --tag neo4j .
docker run --detach --publish 7474:7474 --publish 7687:7687 --name neo4j-db neo4j
List the running containers:
docker ps
You should see a neo4j container:
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
3c95a2947d49 neo4j "/sbin/tini -g -- /d…" 9 seconds ago Up 8 seconds 0.0.0.0:7474->7474/tcp, 7473/tcp, 0.0.0.0:7687->7687/tcp neo4j-db
This is an empty database. We will load the seed data using the api server in the next step.
(cd ../ui && npm install)
(cd ../api && npm install)
cd ../api
npm run dev
This will start the GraphQL API in the foreground in dev mode.
In another terminal session you may optionally seed the GraphQL service by executing mutations that will write sample data to the database:
cd ../api
npm run seedDb
cd ../ui
npm run dev
This will start the Svelte Sapper app in the foreground in dev mode. In dev mode when a file change is saved in the ui directory the web page should automatically reload with the changes.
You run this command in either the ui or api directory to format the code.
./node_modules/.bin/prettier --write "src/**/*.{js,jsx,json,css,svelte}"
The ui component can be exported using Sapper Export. This crawls the site and creates a set of static pages they can be hosted and served as static files.
Start a new terminal.
cd ../ui
npx sapper export
This will create a ui/__sapper__/export folder with a production-ready build of your site. You can launch it like so:
npx serve __sapper__/export
Navigate to localhost:5000 (or whatever port serve picked), and verify that your site works as expected.