DEV Community

Cover image for I built a Baby Care web app using JHipster (open source from now on 🥰)
Renan Franca
Renan Franca

Posted on • Originally published at renanfranca.github.io

I built a Baby Care web app using JHipster (open source from now on 🥰)

Originally published at renanfranca.github.io

My baby girl Marília was born on December 14th/2021, so I decided to build a web app before she was born to help me to track her sleep hours, favorite nap place, her humor, breastfeeding and more. Her nickname is Mamazinha, so the web app is called Mamazinha Baby Care.

Features

  • Monitor her nap sleep hours

new nap screen


Register my baby girl nap

home screen sleep


Monitor her sleep hours from last week versus this week. The goal is at least 16 hours/day after summing up every nap

  • Breast/formula feeding feature

  • Favorite nap place

  • The mood when weak up and during the day

  • Track her size

  • Track her weight

baby profile detail

Baby profile detail view

Technical Detail

Mamazinha jdl file

Mamazinha Baby Care JDL diagram view

This project was built using JHipster. So I used the Gateway with JHipster Registry architecture and create a microservice called 'baby' where I implemented the backend features (Spring Boot) described at the beginning. The gateway implements the front end (angularjs), the user management, authentication, proxy all requests to the microservices and it is reactive for optimized performance. Finally, there are two PostGres databases, one used by baby microservice and the other used by the gateway.

Here is the JDL file that was created using JDL Studio (by @deepu105) to build this project (I explained each line with comments):

After running the Jhipster generator from the jdl file, two projects were created:

renanfranca/mamazinha-gateway

renanfranca/mamazinha-baby

An overview of what I have to change to make my project works as I want on the gateway:

  • Change the radion button by using font-awesome smile when registering the baby humor
  • Change the baby profile detail interface screen to have everything I need to know about my baby girl

An overview of what I have to change to make my project works as I want on the baby microservice:

  • I created a bunch of endpoints
    1. today-sum-naps-in-hours-by-baby-profile
    2. lastweek-currentweek-sum-naps-in-hours-eachday-by-baby-profile
    3. today-average-nap-humor-by-baby-profile
    4. favorite-nap-place-from-last-days-by-baby-profile
    5. latest-height-by-baby-profilelatest-weight-by-baby-profile
    6. lastweek-currentweek-average-breast-feeds-in-hours-eachday-by-baby-profile/{id}
    7. incomplete-breast-feeds-by-baby-profile/{id}
    8. today-breast-feeds-by-baby-profile/{id}

Run it now on your local machine

Here, I will show you how to run the project on development mode and you are going to have access to all the features I described in my blog post My 15+ Reasons to use JHipster.

Required

Download the projects and run on dev mode

Your folder struct and the command to execute in each one will be like:

📂mamazinha

git clone https://github.com/renanfranca/mamazinha-gateway.git
Enter fullscreen mode Exit fullscreen mode
git clone https://github.com/renanfranca/mamazinha-baby.git
Enter fullscreen mode Exit fullscreen mode
 java -jar jhipster-registry-7.1.0.jar --spring.profiles.active=dev --spring.security.user.password=admin --jhipster.registry.password=admin --spring.cloud.config.server.composite.0.type=native --spring.cloud.config.server.composite.0.search-locations=file:./mamazinha-gateway/src/main/docker/central-server-config/localhost-config/
Enter fullscreen mode Exit fullscreen mode

A short screen record video showing how to make it works 🤓

Benefits from that project

  • Me and my wife discovered that our baby needs at least 10 breastfeeds to have a sweet night's sleep 💤 (7 to 8 hours in a row)

breastfeeding 10 times

  • We realized that our baby needs to wait at least 1 hour between breastfeeds to full digestion
  • Easily knows how many slept hours at the current day

tracking slept hours 12

  • Detect a pattern of her nap time

Why did I open source it?

  • I couldn't afford the cost to host it and make it free to use. So now everyone can use it by hosting it localhost like I am doing now.😁
  • I want to share a full project built with JHipster that could be a startup product (in my opinion). So I could enhance this post by sharing how JHipster is awesome in a "real" application and not in a hypothetical or sample app.🤓
  • I want to have an experience by knowing what it's like to make an open source project and see where is going to lead me. ☺️

I invite you

to start trying out JHipster by executing the command jhipster jdl jhipster-jdl.jdl with the mamazinha-baby-care.jdl. Then you will compare what jhipster gave to me as a bootstrap project with the final product I showed in this blog post.

Feedback

If you like this project, please, considering give it a star 🌟 to support me and enhanced both repository's visibility 🤩!

•⭐ mamazinha-gateway

•⭐ mamazinha-baby

I would like to know

That is my first time open sourcing a project. I am looking forward to seeing your comments about it.

  • What did I do right?
  • What should I improve?
  • What did I do wrong and how can I make it right?

Please, ask me anything in the comment section and I am available to support your journey to mastery jhipster on Twitter (@renan_afranca) by tag or Direct Message (DM) me (follow me and I will follow you back to unlock the DM option).

Top comments (1)

Collapse
 
renanfranca profile image
Renan Franca

Thank you for reading this post. Send me some ❤️ & 🦄 to support me and enhanced this post's visibility 🤩
If you find the content interesting, follow me 👣