somekindofwallflower / rick-and-morty-app

Rick and Morty is the Emmy award-winning half-hour animated hit comedy series on Adult Swim that follows a sociopathic genius scientist who drags his inherently timid grandson on insanely dangerous adventures across the universe. In this application you can get information about all the characters of the serial

Rick and Morty React App ✔️

Create a ReactJS app using the Rick & Morty API

• Display the profiles of the characters (either with pagination or showing the first page only).
• The profile of a character should include:
  • Image
  • Character information (name, species, etc).
  • Origin and location information (name, dimension, amount of residents, etc).
  • Name of the chapters the character is featured on.
• The API provides REST and GraphQL versions, for this exercise you should use the REST version.
• You are free to use any library/framework or even language. Be ready to explain the rationale for your choices.
• The exercise should be submitted in a public repository.
• Running your solution requires no global dependencies (besides node/npm/yarn) and it's possible to run it with only one command (besides yarn/npm install).
• Write the code with production standards in mind.

Project DEMO.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

rick-and-morty-app's Issues

Add app logo and change title

#4 Avoid "bad" looking imports.

Declare aliases that map to a certain absolute path
https://dev.to/larswaechter/path-aliases-with-typescript-in-nodejs-4353

#8 Create Layout Component

#13 Add Sass stylesheet

Follow documentation to add Sass in the project

Ref 2 Medium article

Responsive layout

Handle Pending request - Use Skeleton

#2 Organize project structure

Check on React documentation (or somewhere else) for ways how to organize project structure.
https://create-react-app.dev/docs/folder-structure
https://www.cnst.dev/posts/react-typescript-project-structure

#7 Create Header Component

#9 Initialize Axios for React Typescript API

Install axios with command: npm install axios

#12 Add React Router routing library for React

Documentation

Check Documentation and reorganize components

Create character card component

In case only one episode API return an object instead of an array

#11 Create home service to place API calls

Create Back Button component

Create and style back button

#5 Install Ant Design UI library

Documentation

Maintain the page number when "go back" from details

Create character detail page

#6 Create Footer component

#1 Setup new React project

Steps to follow

• Go to React documentation https://create-react-app.dev/docs/getting-started
• Read the steps on Documentation on how to generate a new project.
• Select Node >= 14 on your local development machine (use nvm to switch if you are currently using an older version)
• Select the TypeScript template (npx create-react-app my-app --template typescript)
• Select a package manager (yarn or npm)
• Start application on local env to check if it is generated correctly

Deploy Project

#10 Create a new instance of axios with a custom config

Documentation

Use React context to share data/state of characters

Create pagination component

Implement logic for pagination