Hero Fan

A full-stack (Marvel) Hero Fan webpage created for the Web Express Coding Challenge at Hive Helsinki.

JavaScript

React.js

Next.js

Node.js

Technologies Used

Database: PostgreSQL, created and run via Docker
Back-End: Node.js, Express
Front-End: React, Next.js

Website Functionality

1.Without Authorization

View characters preview on the main page
View detailed information about each character
Search for characters
User registration and login
Character sorting

2.Only Authorized Users

View the user page (own and other users' profiles)
Add/remove characters from favorites
Like/dislike characters
Search for users
Change login/password only for their own account

Pages Created

Main page with characters and pagination
Character dynamic page
User dynamic page
Search results page
404 error page

Also, a header and footer are created, which appear on every page. Registration uses a popup window instead of a separate page.

Data Source

This website fetches data from the Marvel API, stores it in the database, and works with the database for faster performance. In the future, a data update logic will be added to periodically refresh the data.

See on GitHub