@KileNiklawski with @IpponUSA presents on how we built a job board in one week using JHipster. About JHipster: Our goal is to generate for you a complete and modern Web app, unifying: - A high-performance and robust Java stack on the server side with Spring Boot - A sleek, modern, mobile-first front-end with AngularJS and Bootstrap - A powerful workflow to build your application with Yeoman, Bower, Grunt and Maven

1. HOW WE BUILT A JOB BOARD
IN ONE WEEK WITH JHIPSTER
Kile Niklawski
Ippon Technologies

2. Who am I?
• Software Engineer/Architect and technology enthusiast
• A decade of experience - mostly Java
• Worked with various start-ups and large insurance,
finance, and government clients
• Working for Ippon as a Software Architect
kniklawski@ipponusa.com
@KileNiklawski

3. Ippon Technologies
• 200 software engineers in France and the US
➡ Paris, Nantes, Bordeaux
➡ Richmond (Virginia), Washington (DC)
• Expertise
➡ Digital, Big Data and Cloud
➡ Java, Open-source, Agile
• Open-source Projects :
➡ JHipster,
➡ Tatami …
• @ipponusa
3

4. Requirements
• Job Board Site MVP
• Three types of users: Company, Recruiter, Candidate (job seeker)
• Company can register and then post jobs
• Recruiter can login and search for applicants
• User can login and search for jobs
• You have one week!
• 1 Product Owner
• 1 Developer
• 1 Scrum Master

5. What is JHipster?
• Open Source
• Yeoman app generator
• Creates a full stack Java based web app
• Uses Maven/Gradle, Grunt, Bower, Spring and AngularJS
• Spring Boot
• Responsive UI (HTML5/CSS3/Bootstrap)
• Spring Data JPA backend
• Security is wired up
• Caching built-in, log management, monitoring, API docs

6. DAY 1
Generate the app, customize UI, and deploy to the cloud

7. Writing User Stories
• Candidate
• I want to log in, build a profile and be able to search and apply to
jobs easily
• Recruiter
• I want to log in, build a personal and company profile
• I want to be able to post jobs
• I want to be able to view the applicants for a job
• I want to search the candidate pool to find a good match
• SysAdmin
• I want to be able to monitor the status of the server, the application’s
services and be able to interact with the REST API
• I want to be able to change the log levels from the browser
• Partner
• I want to pull candidates, jobs and companies using a REST API

8. Generate the Base Project

9. Database

10. Get it Running
• Created the UML diagram using Modelio
• Exported model in XMI
• Imported XMI using jhipster-uml tool
• Now run it!
• mvn clean install
• mvn spring-boot:run

11. Check out the Entities

12. CRUD + Search Built-in

13. Cloud Time
• Wanted to use heroku but had to install Elasticsearch to a
local server in order to keep it free
• Installed the heroku CLI
• One-time setup for deployment
• heroku login
• yo jhipster:heroku
• Every deployment
• mvn clean install –Pprod
• heroku deploy:jar –jar target/boardatjob.war

14. UI
• Borrowed a few hours from a UI designer for a look-and-
feel
• Chose to use the Compass CSS Authoring Framework
• Replaced the main.scss file with the custom CSS from the
designer
• Modified some image paths and added images
• Copied the designer’s home page into the main.html
• Separated common elements into the navbar template and
created a new header template

15. DAY 2
Add Candidate Features

16. Candidate Features
• Added a new listing template for the front page, tied in
Elasticsearch, added the job and company detail pages
• Very little backend work required – mostly HTML and AngularJS
• Needed to sort the job listings
• Had to modify a date field on the job object and add a liquibase
changeset
• Modified the REST controller to pass the sort criteria to Spring Data
• Needed pagination (infinite scroll)
• JHipster provides infinite scrolling but we did not select it
• So we generated a new JHipster project with infinite scroll and
borrowed from that

17. Landing Page

18. Job Details

19. Company Details

20. DAY 3
Added code coverage analysis and built user profile

21. Coverage and Static Analysis
• Updated the Sonar version in the pom.xml
• Ignored library files during analysis
• Consolidated test reports in the same directory
• Added code coverage for Java using Jacoco
• Added code coverage for AngularJS using Karma
• Would like to see these generated by JHipster
• Run the analysis:
• mvn clean install
• grunt test
• mvn sonar:sonar

22. Faceted Search
• How do we implement this?
• Elasticsearch supports faceted search but not sure how to
get the information with the Spring Data Elasticsearch
library (display job counts by location)
• Let’s move on!

23. User Profile
• Added a user profile entity to support additional fields
• Design choice versus modifying the existing user entity generated
by JHipster
• User profile is related by unique login id to the user entity
• Modified registration to create a user profile
• Modified the settings page to support additional fields for
user profiles
• Found a minor bug in JHipster where refreshing the page
caused the user to lose his roles
• Already fixed!
• Added storing of résumés as a blob in the user profile
• Added a REST resource for upload/download requests
• Used an AngularJS library for drag-and-drop uploads

24. DAY 4
Recruiter pages, résumé upload, job application

25. Recruiter Features
• Created a company page for the recruiter
• Created pages to submit and review job listings
• Added a list of job applications for listings submitted by the
recruiter to the home page
• Added ability to review the cover letter and candidate
contact information
• Added ability to download a candidate’s résumé

26. Registration

27. Company Details

28. Create a Job

29. Jobs Created

30. Applicants

31. Candidate Features
• Modified the user profile screen to add fields and support
résumé uploads
• Added screen for applying for a job and adding a cover
letter

32. User Profile

33. Apply for Job

34. DAY 5
Went to the beach

35. 35

36. MVP
• Signed up for a free SendGrid account and configured the
sendmail settings in the application.yml file
• Focused most of the day on fixing bugs
• Believe it or not, some bugs still exist

37. CONCLUSION

38. What Did We Get?
• How long does it take to get a new project up and running?
• Started adding features on Day 1
• Scaffolding was generated
• Deployed initial app to the cloud on Day 1
• Can we modify the generated code?
• Modern and clean organization
• Easily added 3rd party libraries with bower and maven
• A prototype that can be turned into a real, scalable
production application

39. References
• JHipster Site
• https://jhipster.github.io/
• White Paper
• http://www.ipponusa.com/whitepaper/jhipster-for-techies-hipster-
developer-diary/
• JHipster Demo
• http://www.ipponusa.com/blog/jhipster-demo/