Bulgarian Heroes

Welcome to Bulgarian Heroes.

Overview

An application that allows users to create, like and comment on some of the greatest people from Bulgaria. The app was created to be a place to preserve historical and contemporary heroes that make Bulgaria unique.

Local installation

To install and preview locally, follow these steps:

Clone the repository to your local machine
Navigate to the server folder to start the server (cd .\server)
- Start the server with (node .\index.js) command to start the back-end
Navigate to the client folder (cd .\client)
- npm install - command for install all packages and dependencies
- npm run dev - to start the development server and run the app
- open your browser and go to http://localhost:5173 to access the application

Demo

Check out the live demo of Bulgarian Heroes at https://bulgarian-heroes-rd.vercel.app

For a quick exploration, you can use the following demo accounts:

Demo User 1:
- Email: [email protected]
- Password: 123456
Demo User 2:
- Email: [email protected]
- Password: 123456

User Permissions

All users:
- View all heroes.
- Use search functionality.
- Read comments about heroes.
Not-Logged User:
- Login and register.
Logged-In User (Not Owner):
- Like other users heroes.
- Write comments.
Logged-In User (Owner):
- Edit and delete own heroes.
- Edit and delete own comments.
- Profile page with own heroes.

Features

Public part visible without authentication:

Home page is accessible by all users, and features a carousel component with buttons to change the current image.
Heroes page presents brief information about all heroes, with button to see detailed information and comments sorted by latest without interactive functionalities.
Sign Up page expects as input email, password and repeat password, all fields are required to create a new user
- Email is validated with regex pattern.
- Password should be at least 6 characters long.
- Password and confirm password should match.
Login page expects a valid email and password as input

Private part visible after successful authentication and authorization:

Heroes page presents brief information about all heroes, with button to see detailed information and comments with interactive functionalities.
- if the user isn't the creator of the hero, two options are available:
  - Like button is displayed and the hero can be liked. Likes are individual to each hero and are cumulative.
  - If the hero is already liked, it shows appropriate message.
  - Add comment form is displayed and the user can write a comment about the hero. Also the user can delete and edit his own comments.
- if the user is the creator of the hero:
  - Edit button is displayed and the hero can be edited.
  - Delete button is displayed and the hero can be deleted.
Create page, each user can create their own hero:
- all fields in the form are required with different validations, if the form does not meet all the validations, the submit button is disabled and validation error is displayed above the input field.
Search page, users can search among all created heroes for a particular hero, based on name as criteria. If there is a match from the search all results are rendered, users can also access details. If there isn't a match an informative message is displayed.
Profile page:
- contains a dynamic list showcasing all heroes created by the user, featuring links to individual hero details.
Implemented error handling and data validation for all forms to prevent crashes caused by entering invalid data.

Security

The project incorporates several security enhancements:

The application requires the user to be authenticated to take advantage of the full functionalities.
Guards: By utilizing public and private guards effectively, an application can ensure a balance between providing necessary information publicly, while safeguarding sensitive functionalities and data.
404 Page: An exclusive 404 page is implemented to handle undefined routes gracefully.
Error boundary: catch JavaScript errors anywhere in the child component tree, log those errors, and display a fallback UI instead of crashing the whole app.

Additional libraries

Tailwind - Used for styling the application.
Tailwind Elements - Used for already styled components.
React router dom - Used for handling the routing of the application.
Vitest - Used for writing unit tests.

Deployment

Backend Deployment

The backend of Bulgarian Heroes is deployed on Render. Render is a robust platform capable of hosting and managing server-side components. Render ensures the smooth functioning and accessibility of my backend infrastructure.

Frontend Deployment

The React frontend of Bulgarian Heroes is deployed on Vercel. Vercel is a powerful platform for effortlessly deploying React applications. This ensures a reliable and performant hosting environment for our user interface.