Abstract

• The Marvel2U App is a React App that gives a user the ability to search through Marvel Characters and quickly find information on them.

• As a user, when I visit the app, I should be able to search for any Marvel Character by name.
• As a user, when I visit the app on a computer or tablet, I should be able to see a display of some fo the Marvel Characters.
• Character Details: As a user, I should be able to access a page that contains The searched Character's detail information.
• As a user, I should be able to return to the Home Page of the app from any other page.

This project is a solo project for Turing School of Software & Design during module 3.

The project rubric is linked here.

Marvel2U - Deployment Link

**It has a limit of 3k calls a day( if for some reason stops working please try again in the next 24hours, i'm sure it will work/ I'm still learning so ... have fun!)

A Little Bit About the Developer

Hi! My name is Joana!👩🏻‍💻🌴 I am a current Front End Engineering student at Turing School of Software Design. I am a career changer! I've spent the last decade working to manage two small business, and grabbing the opportunity to move to another country. Now, I'm spending my days learning code and playing with my dog. As a woman I can contribute to build a more balanced society, where people can be seen as equals in the software industry and where I can build apps more inclusive making a difference using this huge platform of the internet!

Learning Goals and Objectives

• React components & asynchronous JS - use of Hooks and APIs
• Create a multi-page UX using Router
• Successful TDD/Cypress

Technologies Used

• React/JavaScript
• React Router/ React Hooks
• Green Sock Animation Library (GSAP)
• JSX
• CSS
• Lighthouse (Accessibility dev-tool)
• Cypress
• NPM
• Axio ApI
• gsap
• Fetch API
• Miro Wireframe (link)
• MARVEL API

Screenshots

Mobile

Desktop

iPadPro

Reflections

Wins

• Design, plan and Build the app in 4 days.
• Access the api with a key and using axios
• Use of hooks in my project
• React Router
• Being able to finish the project and deploy, even using this api with so many restrictions!!!

Challenges

• Balancing fun/life with project/work/study time 👩🏻‍💻 💅🏻 💆🏻‍ 🐈 🎸
• Very, very short time to build the app + healthy challenges
• Use the api with limit access
• I had the last 24 hour of the project without any access to the api and any URL or URI linked to the characters....
• Gave me the understanding of why having a complete sample data file is so important (I had only a small one/ not complete to finish my work with)

Future Designs/Extensions

• The user will be able to click in the series and have a detailed page with the series info and if it a tv series a embeded youtube trailer video.
• The user will be able to login/logout with username and password.
• The user will be able to save their favorite characters within their account.