Todo with Java End points and React frontend with Hilla components

Latest Image: Screen Recording 2023-03-07 at 16.58.48.mov

Using bootstrap and react-bootstrap components nad few hilla components

App is capable of

1. User can add a new task
2. Click done with checkbox
3. Delete the task
4. modal msg is displayed if the task is less than 3 characters.
5. state persists on any/ multiple browser (hilla inbuilt)
6. Done tasks should move to end of the list
7. and if undone should go back to their position
8. Autofocus on input element for easy user access
9. task gets added on Enyter press for easy access , as well as with Add button.
10. gives notification on task deletion

Functions yet to be added:

3. Edit the task

Good to have:

1. some css / scss
2. Touch/click the task to done / undone.
3. confirmation dialog before delete.

Custom project from Hilla

This project can be used as a starting point to create your own Hilla application with Spring Boot. It contains all the necessary configuration and some placeholder files to get you started.

Running the application

The project is a standard Maven project. To run it from the command line, type mvnw (Windows), or ./mvnw (Mac & Linux), then open http://localhost:8080 in your browser.

You can also import the project to your IDE of choice as you would with any Maven project.

Deploying to Production

To create a production build, call mvnw clean package -Pproduction (Windows), or ./mvnw clean package -Pproduction (Mac & Linux). This will build a JAR file with all the dependencies and front-end resources, ready to be deployed. The file can be found in the target folder after the build completes.

Once the JAR file is built, you can run it using java -jar target/myapp-1.0-SNAPSHOT.jar (NOTE, replace myapp-1.0-SNAPSHOT.jar with the name of your jar).

Project structure

Directory	Description
frontend/	Client-side source directory
index.html	HTML template
index.ts	Frontend entrypoint, bootstraps a React application
routes.tsx	React Router routes definition
MainLayout.tsx	Main layout component, contains the navigation menu, uses App Layout
views/	UI view components
themes/	Custom CSS styles
src/main/java/<groupId>/	Server-side source directory, contains the server-side Java views
Application.java	Server entry-point

Useful links

• Read the documentation at hilla.dev/docs.
• Ask questions on Stack Overflow or join our Discord channel.
• Report issues, create pull requests in GitHub.