I built a Baby Care web app using JHipster (open source from now on 🥰)
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
- Breast/formula feeding feature
- Favorite nap place
- The mood when weak up and during the day
- Track her size
- Track her weight
Technical Detail
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 (Spring Boot) features described at the beginning. The gateway implements the front end (angularjs), the user management, authentication, proxy of 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:
An overview of what I have to change to make my project works as I want on the gateway:
- Add the UserId inside the JWT token by default it comes with username and role information
- Force the https redirect, but only when using the prod profile by configuring the application.yml
- Add graphic to the home screen and implement an intuitive step by step usability
- 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
- today-sum-naps-in-hours-by-baby-profile
- lastweek-currentweek-sum-naps-in-hours-eachday-by-baby-profile
- today-average-nap-humor-by-baby-profile
- favorite-nap-place-from-last-days-by-baby-profile
- latest-height-by-baby-profilelatest-weight-by-baby-profile
- lastweek-currentweek-average-breast-feeds-in-hours-eachday-by-baby-profile/{id}
- incomplete-breast-feeds-by-baby-profile/{id}
- 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 -
git clone https://github.com/renanfranca/mamazinha-baby.git -
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/ -
📂 mamazinha-gateway
.\mvnwnpm start
-
📂 mamazinha-baby
.\mvnw
- 📄 jhipster-registry.7.1.0.jar
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)
- 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
- 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 🤩!
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).
Lastly, let me extend an invitation to join me on my journey 🚀 in the realm of software development. I share my insights, experiences, and valuable resources on Twitter @renan_afranca 🐦 and LinkedIn 📎. Following me on these platforms not only keeps you updated on my latest posts and projects 📬 but also opens doors to vibrant discussions and learning opportunities. I look forward to connecting with you! 💼