The "Superhero Explorer" project is a web application that allows users to browse a list of superheroes from both Marvel and DC universes. By clicking on "More...," users can access a detailed hero page, which provides additional information about the selected hero. The application also features a search page that enables users to find a specific hero by name. Furthermore, it includes a login screen designed to simulate a web login (implemented to practice the concept of private routes).
-
React: The project is built using the React JavaScript library, which facilitates the development of dynamic user interfaces.
-
React Router: React Router is used to manage the application's routing, enabling navigation between different pages.
-
CSS Modules: CSS Modules are employed for styling to ensure a modular and maintainable design.
-
Jest: Jest is utilized for testing components and ensuring code reliability.
-
React Testing Library: This testing library is used for efficient and user-centric component testing.
The primary purpose of this project is to apply theoretical knowledge related to various routing concepts and testing in React. Specifically, it focuses on the following aspects:
-
Multiple Routers: Implementing multiple routers to manage different sections of the application.
-
Reading URL Parameters: Extracting and utilizing URL parameters for dynamic content.
-
Query Parameters: Handling query parameters to enable specific searches and interactions.
-
Public Routes: Implementing public routes accessible to all users.
-
Private Routes: Creating private routes that require authentication to access.
-
Remembering the Last Visited Route: Implementing a mechanism to remember and return to the last visited route.
-
Testing Private and Public Routes: Conducting thorough testing of both public and private routes to ensure functionality and security.
- Browse a list of superheroes from Marvel and DC universes.
- Access detailed information about a selected hero by clicking on "More..."
- Use the search functionality to find a hero by name.
- Simulate a web login experience with the login screen.
- Secure private routes to control access to certain content.
For a live demonstration of the "Superhero Explorer" project, please visit the following link: Superhero Explorer Demo