Social Media App - A Custom project from Hilla

This project was created from https://start.vaadin.com. The task of this project work is to deal with the development of applications through the use of REST interfaces using Spring Boot and Hilla.

Description

This project explores the concept of Hilla, which enables the integration of Spring Boot and React to create seamless web applications based on a REST API. The aim is to present the concepts of Hilla in detail using a freely selectable web application, in this case a social media app, including its offerings as well as possible strengths, weaknesses and limitations.

The project does not cover all the functionalities marked “TODO” below. These will be implemented one day.

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.

Or you can simply run the SpringBootApplication SocialMediaApp.

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

Functionality

• Register/ Sign up

• Login/Logout

• View own profile

• Edit profile

• Delete profile

• Publish post

• Edit post

• Delete post

• Like post

• View liked post

• Save post

• View saved post

• Publish comment

• Edit (your own) comment (By clicking on your comment)

• Delete (your own) comment (By clicking on your comment)

• Send friend request

• Accept friend request

• Decline friend request

• Search user

• Suggest user you are not friends with

• [TODO] View other profile

• [TODO] View, write, edit, delete message

• [TODO] View friendslist , remove friends

• [TODO] Styling for responsive

• [TODO] Upload picture or video under post

• [TODO] Add, upload and change profile picture

Technologies

Backend

• Java
• Spring Boot
• Spring Security
• H2 database
• Spring JPA
• Maven

Frontend

• React
• Vite
• Vaadin
• Lit

Libraries

• MUI Material UI
• Tailwind CSS
• Lombook

Project structure

Directory	Description
src/main/frontend/	Client-side source directory
themes/	Custom CSS styles
util/	Helper/Utility classes that provides constants, interfaces, custom styling and static methods
views/	UI view components
MainLayout.tsx	Main layout component, contains the navigation menu, uses App Layout
index.html	HTML template
index.tsx	Frontend entrypoint, bootstraps a React application
src/main/java/	Server-side source directory
data/	Entities
exceptions/	Custom exception classes
services/	Endpoints
SocialMediaApplication.java	Server entry-point

Installation and usage

1. Clone this repository

git clone https://github.com/exouciam/Projektbasiertes_Arbeiten2_SS24.git

2. Install dependencies

cd hilla-social-media-app  
npm install

3. Run the server

Run SocialMediaApplication

View user credentials in src/main/resources/data.sql

4. [Optional] Open H2 database console in browser http://localhost:8080/h2-console View credientials for h2-database in src/main/resources/application.properties

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.