Form and Survey Building Service created by full-stack program developers

thumbnail

Integrify's fast-track program was created to offer developers an opportunity to work in real-life projects and boost both their software development skills as well as team work and collaboration skills. The program is a perfect solution, for example, for soon-to-be or already graduated students that are looking for project experience that can help them land their first job in Finland. During the 3 -month program developers work in one larger agile project that is led by Integrify's own developer.

In this blog post we take you behind the first fast-track program project. The case study is written by Tri Hoang, one of the first fast-track developers.


Formly - Form and Survey Building Service

Client: Integrify

Team: Fast-track developers An, Ngoc, Tung Tri, Mahdi, Laksmi & Team Lead Yazan

Tech stack: React, Node.js, MongoDB, Zeit, Netlify, Heroku

Visit: https://formly-admin.netlify.com/

Integrify handles hundreds of student applications every month as well as creates several other surveys for a variety of different purposes. Creating and managing these forms in an efficient and systematic way is essential. Integrify’s fast-track students were given a task to design and build an easy to use, all-in-one survey management service that can also scale as the company and applicant number grows.

formly 1

Important features

  • Providing a powerful, intuitive tool to design forms and surveys
  • The ability for users to collaborate simultaneously on the same survey
  • Effective survey distribution services (i.e. able to handle multiple concurrent clients)
  • Data from surveys is automatically combined and visualized in information-rich graphics
  • Designing with scalability in-mind - optimized queries, clusterized Node backend, load balancing
  • Security as a top priority due to handling personal information (RSA 256, anti DDOS, XSS, CSRF, REG-EX, OAuth 2.0 design pattern)

Technologies and project management

Frontend:

  • Figma was used as a design and prototyping tool.
  • React.js was the first choice due to its amazing abilities: modules and components make the application easy to scale and maintain. Also since the app features are rich, optimizing performance was made easy by React virtual DOM rendering system. In addition, state management raised a big problem due to the large size of the app but was perfectly solved by Context API and React Hooks.
  • The Storybook was used as documenting tools for frontend. A clean, well-documented code provides amazing maintaining ability.
  • Jest and Enzyme as a combination was used for testing. For confidence in code quality, 100% of the components were tested.

Backend:

  • Node.js and Express.js were the main technologies for the backend. The cluster module from Node.js provided a perfect tool to build a scalable app. The Express framework made coding easy.
  • MongoDB/Mongoose was chosen because of its powerful ORM functionalities. With that, the team was able to optimize queries to the database providing a fast and reliable solution.
  • Hapi/Joi validator was used to validate all incoming data, so no false data is written to the database.
  • OAuth 2.0 design pattern was used for the backend. The Authentication server is separate from the Resources server, implementing with JWT token encrypted with RSA 256 keys. An access token has short-lived prevent snippers from taken over users’ accounts. Refresh token has its owned revoke system: easy to lock an account from hackers. All user data is implemented with the Permission system: users can not access other data unless authorized by the owner.
  • APIdoc.js was the documenting tool for the backend. All API routes are well-documented and easy to integrate with other services.
  • Express-rate-limiter, Helmet, CSRF and safe-regex all provide security enhancement to the backend.
  • Mocha, Chai and Sinon were used to implement testing. Test coverage was 90% and team is on the mission to make it 100%.

Continuous integration/deployment:

  • Netlify, CircleCI, Zeit, Heroku and Git are in our pipeline to help reduce development and deployment time. Each push to Git will trigger CircleCI hooks to check for errors à saving/restore build-cache à send pre-build to deployment services: Netlify-Zeit-Heroku. Automatical testing, caching, building, staging and releasing help us deliver with speed, confidence, and quality.
  • Feature updates: Incoming real-time collaboration backed by (Operational-transforming algorithm) is in a testing phase. We are looking forward to releasing it soon!