Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HOW WE BUILT A JOB BOARD
IN ONE WEEK WITH JHIPSTER
Kile Niklawski
Ippon Technologies
Who am I?
• Software Engineer/Architect and technology enthusiast
• A decade of experience - mostly Java
• Worked with var...
Ippon Technologies
• 200 software engineers in France and the US
➡ Paris, Nantes, Bordeaux
➡ Richmond (Virginia), Washingt...
Requirements
• Job Board Site MVP
• Three types of users: Company, Recruiter, Candidate (job seeker)
• Company can registe...
What is JHipster?
• Open Source
• Yeoman app generator
• Creates a full stack Java based web app
• Uses Maven/Gradle, Grun...
DAY 1
Generate the app, customize UI, and deploy to the cloud
Writing User Stories
• Candidate
• I want to log in, build a profile and be able to search and apply to
jobs easily
• Recr...
Generate the Base Project
Database
Get it Running
• Created the UML diagram using Modelio
• Exported model in XMI
• Imported XMI using jhipster-uml tool
• No...
Check out the Entities
CRUD + Search Built-in
Cloud Time
• Wanted to use heroku but had to install Elasticsearch to a
local server in order to keep it free
• Installed ...
UI
• Borrowed a few hours from a UI designer for a look-and-
feel
• Chose to use the Compass CSS Authoring Framework
• Rep...
DAY 2
Add Candidate Features
Candidate Features
• Added a new listing template for the front page, tied in
Elasticsearch, added the job and company det...
Landing Page
Job Details
Company Details
DAY 3
Added code coverage analysis and built user profile
Coverage and Static Analysis
• Updated the Sonar version in the pom.xml
• Ignored library files during analysis
• Consolid...
Faceted Search
• How do we implement this?
• Elasticsearch supports faceted search but not sure how to
get the information...
User Profile
• Added a user profile entity to support additional fields
• Design choice versus modifying the existing user...
DAY 4
Recruiter pages, résumé upload, job application
Recruiter Features
• Created a company page for the recruiter
• Created pages to submit and review job listings
• Added a ...
Registration
Company Details
Create a Job
Jobs Created
Applicants
Candidate Features
• Modified the user profile screen to add fields and support
résumé uploads
• Added screen for applying...
User Profile
Apply for Job
DAY 5
Went to the beach
35
MVP
• Signed up for a free SendGrid account and configured the
sendmail settings in the application.yml file
• Focused mos...
CONCLUSION
What Did We Get?
• How long does it take to get a new project up and running?
• Started adding features on Day 1
• Scaffol...
References
• JHipster Site
• https://jhipster.github.io/
• White Paper
• http://www.ipponusa.com/whitepaper/jhipster-for-t...
Upcoming SlideShare
Loading in …5
×

How we built a job board in one week with JHipster

9,067 views

Published on

@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

Published in: Software

How we built a job board in one week with JHipster

  1. 1. HOW WE BUILT A JOB BOARD IN ONE WEEK WITH JHIPSTER Kile Niklawski Ippon Technologies
  2. 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. 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. 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. 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. 6. DAY 1 Generate the app, customize UI, and deploy to the cloud
  7. 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. 8. Generate the Base Project
  9. 9. Database
  10. 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. 11. Check out the Entities
  12. 12. CRUD + Search Built-in
  13. 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. 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. 15. DAY 2 Add Candidate Features
  16. 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. 17. Landing Page
  18. 18. Job Details
  19. 19. Company Details
  20. 20. DAY 3 Added code coverage analysis and built user profile
  21. 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. 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. 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. 24. DAY 4 Recruiter pages, résumé upload, job application
  25. 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. 26. Registration
  27. 27. Company Details
  28. 28. Create a Job
  29. 29. Jobs Created
  30. 30. Applicants
  31. 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. 32. User Profile
  33. 33. Apply for Job
  34. 34. DAY 5 Went to the beach
  35. 35. 35
  36. 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. 37. CONCLUSION
  38. 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. 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/

×