- About this Web Application
- Medium blog link
- GitHub Project link
- What this does
- Other details
- Wireframe
- Screenshots
- Current navigation map
- REST API Documentation
- Docker instructions for building the application's image
- Docker instructions for running the application's container
- Demonstrative video
- Web Application's name: Bookmarks Forums.
- Author: Izan Ruiz Ballesteros
- Tutors: Óscar Soto Sánchez, Micael Gallego Carrillo
This project has a blog posted in Medium. Click here to visit it!
Click here if you want to visit the GitHub Project.
Bookmarks is an already existing web application where users could search for books and mark them as currently reading, already read and want to read.
Bookmarks Forums is the update that brings the social to that application!
With Bookmarks Forums any user will be able to sign up or login to the forums, create content about their favorite authors or books, follow other users, join and create communities and meet new people!
Apart from what has been mentioned above, Bookmarks Forums will allow set search sorting filters for searching the most popular or recent posts.
Users will be able to create chat rooms to chat between each other.
The main landing page will serve posts and content using an algorithm based on the popularity of posts.
The application will offer charts that will allow users and administrators to easily check the most popular users and more.
Users will receive emails regarding messages or replies to their posts.
The application will serve a REST API.
Administrators will be able to see the worst behaving users and ban them from the site.
❗The chats and advanced administrator functionalities will be implemented in the v1.0 release of the application.
Here are the technical aspects of the web application described:
For the current version of the application, it has the following entities in its database:
- User: the users of the application.
- Post: publications made by the users.
- Reply: short text as a response to an existing post.
- Community: groups of users, posts and post replies.
- Ban: a user can be banned from a community. This entity is used to store the ban information.
The users database is separated from Bookmarks to let the users decide whether they want to participate in the forums or not, regardless of having a Bookmarks account.
The backend of the application is structured as follows:
Grey: entities.
Blue: repositories.
Red: services.
Yellow: REST controllers.
Green: other controllers.
The frontend of the application is structured as follows:
Purple: components.
This table defines the permissions each kind of user has over which entity:
| Kind of user | Permissions | Owner of |
|---|---|---|
| Visitor (unregistered user) | Visit the landing page, search for forum posts, visit profiles, visit posts, visit communities. | N/A |
| Registered user | All the above plus join communities, create communities, modify communities, ban users from communities, create forum posts, modify posts, delete posts (only the ones they are owners of), reply to other users' posts, like posts, dislike posts. | Post, Community, User. |
| Administrator | All the above plus modify and delete all communities, modify and delete all posts. | All |
These entities have images linked to them:
- Community: communities have an icon.
- User: users have profile pictures.
- Post: a post may have multiple images.
- Users with the most liked content: shown in the landing page as a bar chart.
- Rate of users registered per day: shown as a line chart in the administrator zone. (This will be implemented in the future as part of the administrator page, with its advanced functionalities).
The aim is to include the following additional technologies to the project:
- Mail notifications will be sent to users that have been directly messaged or replied.
- Websockets will be used in order to offer real-time notifications for chat messages. (This will be implemented in the future as part of the chat functionality).
The landing page will show users the most popular posts based on how many likes they have and the most recent ones.
Users will have the ability to search for communities, posts or users.
Users will be able to sort posts by date (from most recent to least recent) or likes inside communities and users' profiles.
Apart from the main functionality and technologies mentioned above, the web application will contain:
- Automatic tests: for unit integration testing.
- Packaging: as GraalVM native images.
- Deployment: on a cloud VM.
Below is the list of screens the web application will have:
- Login Page
- Sign-up Page
- Landing page.
- Community page.
- Community creation and modification page
- Post page.
- Post creation and modification page.
- User profile page.
- Chat page.
- Search results page.
- Administrator zone.
- Error page.
And here is the wireframe:
Here are some screenshots of the web application, showcasing the different pages the current version of the application has:
Login screen for user authentication.
Sign-up screen for new users.
Main landing page after login.
Community page showing posts and members.
Page for creating or editing a community.
Detailed view of a single post.
Page for creating or editing a post.
User profile page displaying user information.
Page for modifying user profile details.
Search results page showing search outcomes.
Error page displayed for invalid actions or pages.
Here is the navigation map of the web application. The map shows the different screens and the possible transitions between them per user permissions.
In this map, the chat and administrator zone are not shown as they will be implemented in the future as advanced functionalities.
The documentation for the REST API has been generated using Swagger and the OpenAPI specification. The YAML file can be found in the following link: api-docs-yaml However, a more visual and interactive version can be found in the following link: Swagger UI
To build the application's Docker image, follow these steps:
- Clone the repository to your local machine:
git clone https://github.com/codeurjc-students/2024-Bookmarks-Forums.git- Login to your Docker account:
docker login- Go to the project's docker directory:
cd 2024-Bookmarks-Forums/docker- Run the following automated script to build the Docker image:
On Linux:
./create_image.shOn Windows:
create_image.batThis script will do the following:
- Build the Angular project.
- Copy the Angular project's build files to the backend's resources directory.
- Build the backend project with Maven.
- Build the Docker image with the backend's JAR file and the Dockerfile.
- Push the Docker image to DockerHub.
- Set up the Docker container with the application's image.
To run the application's Docker container, follow these steps:
- Clone the repository to your local machine:
git clone https://github.com/codeurjc-students/2024-Bookmarks-Forums.git- Go to the project's docker directory:
cd 2024-Bookmarks-Forums/docker- Run one of these docker-compose commands to start the application's container:
On Linux:
sudo docker compose -p bookmarks-forums up --buildsudo docker compose upOn Windows:
docker-compose -p bookmarks-forums up --builddocker-compose up- Access the application in your browser at the following URL:
https://localhost:443Here is a video showcasing the application's main functionalities (spanish):
