Heroes of Marvel & DC React Application

Single Page Application about heroes of Marvel and DC.

Table of Contents

• Live Demo
• Concepts Applied
• Folder Structure
• Future Development
• Credits
• Author

Live Demo

Click Me!

• Mobile View

• Desktop View

Concepts applied

• Custom Hooks.
• Routing.
• Local Authentication.
• UseContext.
• Responsiveness.
• Components in React.

Folder Structure

.   ├── heroes-react
            ├── Assets                         # Images
                ├── img                        # ReadMe Imgs
            ├── node_modules                   # NodeJS Modules
            ├── public                         # Vite Public Files
                ├── heroes                     # Hero Images
            ├── src                            # src Folder
                ├── auth                       # Everything related to authentication
                ├── heroes                     # Hero data/components/hooks/etc   
                ├── hooks                      # useForm for the search page
                ├── router                     # Private/Public routes
                ├── ui                         # NavBar Component
                ├── HeroesApp                  # Children Route from Main.jsx
                ├── Main                       # Father Route

Future Development

• Add a Backend.
• Add more hero images and information.
• Add an author section that links to my portfolio.
• Add a authentication system through the login.

Credits

Kudos to Fernando Herrera for his amazing react course in Udemy.

Author

David Torres LinkedIn

Go to table of contents