A starter graphql project - Part 2 (UI with VueJs)

In March, I've developed and shared a starter graphql project, which is initially intended to be a bootstrapper for Nodejs based Graphql APIs.

This time, I've added a vue-js frontend to the stack. It uses apollo-clientfor communicating with the backend.

UI is optimized for mobile devices.

Frontend application is capable to

• create an user
• login
• logout
• list existing records
• search records
• create a record
• edit a record
• delete a record

Screenshots

Live demo is available: https://vue-nodejs-graphql-starter.herokuapp.com

Development
Backend and frontend parts of the application could be started seperately.

API works the same, serves following endpoints:

• /auth signup and authentication, open for everyone
• /graphql basic crud operations and search of record entity, requires Authorization token on header

npm run start command on ./backend folder will start the backend part, which will expose endpoints specified above, under the port 4040.
npm run dev command on ./frontend folder will start the frontend part for development, which will enable eslint for keeping the coding style consistent. Served under port 8080 in development environment.

Usage
package.json file on the root folder contains npm scripts, which builds backend and frontend applications.
Once backend and frontend apps are built, backend app will also serve static files of frontend application in production environment.

Repository: https://github.com/alperklc/vue-nodejs-graphql-starter

Deployment
Repository contains a branch called heroku-deploy, which contains required parameters and npm scripts. Works on heroku, if it's deployed from this branch. Requires mLab MongoDB add on and a config variable JWT_SECRET.

Feel free to contact, in case of any deployment problem.

Technologies
nodejs, express, graphql, apollo, mongodb, mongoose, jsonwebtoken, vuejs, scss, webpack

Roadmap / Future plans

• Let the UI evolve into a PWA
• Improve the UI
  • add infinite scrolling to the list
  • add time interval selectors
  • and so on
• Adding docker to the stack, in order to make deployment easier.
• Will add unit and integration tests to this starter project.
• Use it on my future projects.

How to contribute?

• Fork, develop further and send a pull request :)
• Issues are welcomed too.