rick-and-morty-api-site
react-search-bar
Our great sponsors
rick-and-morty-api-site | react-search-bar | |
---|---|---|
26 | 1 | |
61 | 1 | |
- | - | |
0.0 | 3.6 | |
7 months ago | about 2 years ago | |
JavaScript | JavaScript | |
- | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
rick-and-morty-api-site
-
Does anybody know the API documentation tool used to build the Rick and Morty API?
Click the guys name in the footer. It’ll take you to his GitHub profile. There you can find the source code to the site and the API.
Specifically looks like hand-rolled docs using Gatsby https://github.com/afuh/rick-and-morty-api-site/tree/fd7a1c1a32e42ac6be7c6ffaeea8d1b29c05d2da/src
- Como usar Fetch API para buscar dados de uma API
-
Should I use ServerSideProps or StaticProps in this case?
The external API that I'm using is the Rick and Morty API. I know that there is a freeCodeCamp tutorial using this same API and teaching Next, but I want to dive a little bit deeper and understand some topics that the article does not cover.
-
Introduction to React Suspense
import React, { useEffect, useState, useTransition } from 'react'; import { Link } from 'react-router-dom'; import Loader from '../Components/Loader'; import { Pagination } from '../Components/Pagination'; function Home() { const [data, setData] = useState({}); const [isLoading, startTransition] = useTransition(); const fetchCharacters = async (page?: number) => { const response = await fetch( `https://rickandmortyapi.com/api/character?page=${page}` ); const parsedData = await response.json(); startTransition(() => { if (response.ok) setData(parsedData); }); }; useEffect(() => { fetchCharacters(1); }, []); const { results, info } = data; const onPageChange = (pageNumber: number) => { fetchCharacters(pageNumber); window.scrollTo({ top: 0, behavior: 'smooth', }); }; return ( Rick And Morty {!isLoading ? ( <> {results?.map((datas: any) => { const { id, name, species, gender, origin, location, image, episode, } = datas; return ( {name ? Name: : null} {species ? Species: : null} {gender ? Gender: : null} {origin.name ? Origin: : null} {location.name ? Location: : null} {name ? {name} : null} {species ? {species} : null} {gender ? {gender} : null} {origin.name ? {origin.name} : null} {location.name ? {location.name} : null} ); })} {info ? ( ) : null} ) : ( )} ); } export default Home;
-
Create a custom debounce Hook in React
export async function getCharacter(value) { const data = await fetch( `https://rickandmortyapi.com/api/character/?name=${value}` ) const response = await data.json() if (response === undefined || response.error) { throw new Error(`HTTP error! status: ${response.error}`); } return response }
-
Senior developers, how did you start and how to improve?
There are so many APIs you can use to write a client on: https://rickandmortyapi.com/ as an example. If you want to stick to using a cli app you can try use a TUI library to make it more slick. For images you can convert them to ascii art
-
Nuxt 3, Apollo GraphQL, TailwindCSS Crash Course
Rick and Morty API -> https://rickandmortyapi.com/
react-search-bar
-
React Live Search (Rick & Morty Edition)
GitHub Repo: https://github.com/dom-the-dev/react-search-bar
What are some alternatives?
fake-store-api - FakeStoreAPI is a free online REST API that provides you fake e-commerce JSON data
gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.
gatsby-starter-lumen - A constantly evolving and thoughtful architecture for creating static blogs with Gatsby.
Gatsby - The best React-based framework with performance, scalability and security built in.
Reactive-Resume - A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!
tailwindcss - Tailwind CSS module for Nuxt
Rollup - Next-generation ES module bundler
NProgress - For slim progress bars like on YouTube, Medium, etc
rickandmorty-react - Calling the Rick and Morty API in React, and building each character a profile.
nuxt-apollo-tailwind - Repository for Nuxt 3, Apollo, and Tailwind Crash Course
picsum-photos - Lorem Ipsum... but for photos.
Nuxt 3 - Old repo of Nuxt 3 framework, now on nuxt/nuxt