Takehome Challenge #1: Project Scheduler
May 17, 2020
Sample work, Takehome Challenges
A simple application that uses React as the Frontend and Spring Boot as Backend
This project scheduler is an application that computes the start dates and end dates of each tasks and its dependent tasks of each projects. It similar to todo applications but much simpler and the motive is to schedule the tasks correctly.
This is one of the take home challenges that I did this year. It took me 6 days to do this challenge.
The main problem statement is the following:
"Create an application that will have projects and these projects can have multiple tasks. These tasks can have dependent tasks and the challenge is to compute the start and end dates of each tasks chronologically. The dependent tasks should have the earlier start and end dates before the main tasks."
High-level Design
The high level design for this simple app is as follows:
The front end will be a react application, which can be deployed into github pages.
The backend will be a spring application with an in-memory database (in this case I used a H2)
The backend application is deployed into a Google Kubernetes Engine (GKE) Cluster and created an ingress to expose this application to the frontend.
I used my personal CICD pipeline to build these apps and deploy to their respective servers (Github pages for React App and GKE to my Spring Boot App)
Pages
Create a new Task
This page creates a task and can add dependency tasks during creation.
Update Existing Tasks
This page updates an existing task, the user can deselect the dependent tasks and select a new task.
Create a new Project
This page adds a new project and the user can select the tasks for this project. Also, a start date is indicated and a necessary field to be provided.
Update Existing Project
This page updates existing project and can deselect existing tasks or select new ones.
View Project Schedule
This is the main logic of the application. It computes the start and end dates of main tasks and sub tasks.
Also we are using two main react components to show the schedule: the table view and calendar view.
Frontend: Project-Scheduler-App (React App)
The frontend is a react application based on create-react-app. It uses the following libraries/plugins:
create-react-app (baseline of the application)
react-bootstrap (main UI bootstrap of the application)
react-big-calendar (Calendar View in the View Project Schedule Page)
react-bootstrap-calendar (date picker in Create Project and Update Existing Project pages)
gh-pages (library to deploy the app into github page)
Backend: Projectscheduler (Spring Boot Microservice)
The backend application is a spring boot microservice, the main logic of the application resides on the said app. There are several services that were exposed on this microservices:
/rest/project/save
/rest/project/id/{id}
/rest/project/all
/rest/project/all/withtasks
/rest/task/save
/rest/task/id/{id}
/rest/task/all
/rest/task/eligible/{id}
/rest/scheduler/view/all
/rest/scheduler/view/{id}
The components that I used are the following:
spring-boot-starter-parent (baseline app of the spring boot)
spring-boot-starter-data-jpa (jpa repository of the app so that we can persist the data from DB)
spring-boot-starter-web (rest controllers to expose these rest apis)
junit (unit testing)
h2 (in-memory database)
spring-boot-maven-plugin (building application)
maven-surefire-plugin (to include our test cases in junit as part of testing in our pipeline)
Database Tables
The database tables that we used are the following:
schedule_project (defines the project entity)
schedule_task (defines the task entity, we dont save the start and end dates as this can be computed by our logic)
project_task (composite table that defines the dependency tasks for each project)
task_dependencies (composite table that defines the task dependencies of each tasks)