🏮 Marvel Characters Search App

Objectives   |    Lessons Learned   |    Technologies   |    Environment Setup

This application was proposed by Juno, as part of their recruitment process for frontend developers. The challenge was to build a fully responsive client application in React to consume Marvel API, searching for characters and being able to display their details when selected.

Check out the application running!

📝 Objectives

• Display a search input for the user to query API based on nameStartsWith;
• Display search result (summarized);
• When opening an item, display its details;
• Display responsive thumbnails (that better fits the screen) for the items which has it;
• Interface MUST be responsive;
• The final project must contain a .MD file with specifications of the project.
• Develop the application using React and Node.js (with ES6+)

Optional bonus

• Pagination;
• SASS (implemented for Bootstrap and additional styles customization);
• Transitions;
• Project watchers and routines with Node.js and other environmental utilities;
• Unit tests by componnent.

🏆 Lessons Learned

• Communicate with Marvel API;
• Build a React.js (first app ever);
• Overwrite Bootstrap defaults with SASS;
• React with TypeScript (at version 1.1);
• React Hooks (at version 1.1);

🚀 Technologies & Resources

Frontend:

• React v18 (originally developed in v16)
• Bootstrap v4
• jQuery v3
• Axios (HTTP client) (recently migrated to fetch API)

Development:

• Visual Studio Code
• Cmder (terminal emulator)
• Node.js scripts

🔨 Setting up the Environment

Make sure to have Node.js 14+ installed in your machine and yarn (npm will do the job as well) available in the command line, then use the following command to install dependencies:

$ yarn   # or "npm install"

To execute the application, you must have a Marvel Developer account and have the public and private keys generated. Once you have them, you will have to register both as environment variables in a .env file, at project root. If it wasn't created after installation process, use .env.example as reference to know all the required variables to be set.

At last, you can use the following commands to run the application:

$ yarn dev     # run development server
$ yarn build   # build files for production