rick-and-morty-api-site
tailwindcss
Our great sponsors
rick-and-morty-api-site | tailwindcss | |
---|---|---|
26 | 13 | |
61 | 1,578 | |
- | 2.3% | |
0.0 | 8.9 | |
8 months ago | 3 days ago | |
JavaScript | TypeScript | |
- | MIT License |
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?
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
- Decidi aprender programação sozinho
-
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
-
Is there the Sopranos API?
I wanted to check if there is something similar to this . Just to practice react query and maybe expand it a bit. Not to use it for portfolio or try to get a job with it. While reading about react query I thought it would be good to practice it with sopranos api
-
Nuxt 3, Apollo GraphQL, TailwindCSS Crash Course
Rick and Morty API -> https://rickandmortyapi.com/
tailwindcss
-
Look for solution for a problem.
hey, thanks for your comment. Actually I just found out here (https://github.com/nuxt-modules/tailwindcss/pull/660) that they removed generating tailwind.config.cjs file inside .nuxt folder in the latest update for some retarded reason. The problem is that the official tailwind intellisense requires that file for auto-completion to work. Doing 'npx tailwind init' means I'll have to manually add content, paths and plugins to it which contradicts the intention of using nuxt. If I want to manually do everything then why am I even using nuxt? I'll just have to resort to copying that previous generated file onto the newer projects.
- Build A Mobile App Starter Template With Nuxt, Supabase, Tailwind, Ionic Framework and Capacitor
-
Using TailwindCSS with Nuxt efficiently
To start using TailwindCSS with Nuxt, you can install and configure TailwindCSS as a dependency following the instructions on the TailwindCSS website. Or you can use the official Nuxt TailwindCSS module following the commands below:
-
FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined.
Font: https://github.com/nuxt-modules/tailwindcss/issues/598
- Dream Jamstack with Nuxt and Storyblok 🚀
-
Creating a New Nuxt 3 Application with Pinia and TailwindCSS
There is now going to be forever problems due to using yarn that one time to install Pinia. For the most part followed the github instructions
- Nuxt 3, Apollo GraphQL, TailwindCSS Crash Course
-
Warning with TailwindCSS and Nuxt content v2
Actually you don't have to. The tailwind plugin is zero configuration as the module pagestates. Just import '@nuxtjs/tailwindcss' and you're done.
-
nuxt installation help
Easier to just use https://tailwindcss.nuxtjs.org/ for nuxt 3
-
How to add TailwindCSS to Vue Storefront 2
As Vue Storefront uses Nuxt.js under the hood, the process of adding it to your project is relatively simple. Especially with the recent release of a new version of Tailwind Module for Nuxt that you can check the code here. In this version, you do not need to register tailwind config nor postcss config in your nuxt application in order to make it work. How briliant is that?
What are some alternatives?
fake-store-api - FakeStoreAPI is a free online REST API that provides you fake e-commerce JSON data
svg-sprite - Optimize SVG files and combine them into sprite
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.
nuxt3-tailwind - nuxt3 boilerplate with tailwind and dynamic routes.
gatsby-starter-lumen - A constantly evolving and thoughtful architecture for creating static blogs with Gatsby.
oku-nuxt3-template - Nuxt 3 best starter repo, Tailwindcss, Sass, Headless UI, Vue, Pinia, Vite, Eslint, i18n, Naive UI
react-search-bar - React Live Search Bar. Search the Rick & Morty Api. This is a project to my Youtube video.
storefront-ui - A frontend library for Vue and React that helps developers quickly build fast, accessible, and beautiful storefronts. Made with 💚 by Vue Storefront team and contributors.
Gatsby - The best React-based framework with performance, scalability and security built in.
laravel-echo-module - Laravel Echo for Nuxt 2
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!
pwa-module - Zero config PWA solution for Nuxt.js