gatsby-starter-lumen VS rick-and-morty-api-site

Until now, my personal website was using a Gatsby with a beautiful template named Lumen. Since I don't want to re-write my website every year to follow the latest trend in React world and since I couldn't change much without learning the framework, I've decided to switch to something else. Many static site generators needs several days or weeks to be mastered, so I went for the simpler solution to be able to build the first version of my website in a weekend: 11ty.

The blog is based on this theme: https://github.com/alxshelepenok/gatsby-starter-lumen

For my tailwind nextjs template, I did not want to restrict it to only Nextjs projects using Tailwind CSS but rather look at other blog templates. Other similar templates in my comparison list include Gatsby Starter Lumen or Hugo Coder which tells me that a realistic upper bound for a personal portfolio template project is about 1.5k stars.

Specifically looks like hand-rolled docs using Gatsby https://github.com/afuh/rick-and-morty-api-site/tree/fd7a1c1a32e42ac6be7c6ffaeea8d1b29c05d2da/src

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.

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;

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 }

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

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

Rick and Morty API -> https://rickandmortyapi.com/