DEV Community 👩‍💻👨‍💻

Cover image for Rick and Morty + Nuxt + Tailwind
Helena Martins
Helena Martins

Posted on

Rick and Morty + Nuxt + Tailwind

Hello! Besides studying and working with React and Next, I'm currently studying Vue and Nuxt. Then, I've thought about creating a little site using data from Rick and Morty API, Nuxt and Tailwind.

After reading this post: https://dev.to/monicafidalgo/12-apis-that-you-as-a-developer-will-love-it-4ec6 from @monicafidalgo I decided to do this project using Rick and Morty API, since it's one of my favourites series.

I've created a home page with a hero, a carousel containing cards with the first 20 characters, a button to go to all characters page, a contact CTA with two buttons: one to see the repository and other that opens a modal with a contact form, where the user may send me a message. At the end of the page, there' the footer (footer, contact CTA and menu are included on default layout).

Also, there's see all characters, with a table with the characters and a pagination, which allows user to see only 20 characters per page.
Moreover, I've created a contact page, where you may read a little about the process of making up the site and a little about me.

Bellow, you can see the preview and the repository link. Fell free to add any comment about this project! :)

Live preview: https://lnkd.in/d4gyzkzj
Repository: https://lnkd.in/dac9HkuF

Photo by Michael Marais on Unsplash

Top comments (1)

Collapse
 
kissu profile image
Konstantin BIFERT

Nice looking app, great job! Written "junior dev" but not for a long time I think! 🤗
I have a suggestion here: github.com/HelenaAMartins/nuxt-ric...

You could explicitly write target: 'static' and also use ssr: true. That way you will get all the benefits that Nuxt can bring in seconds with an SSG build.
Still totally compatible with a Vercel hosting. 👍🏻

Forem

🏗 We built a 100% open source community software called Forem.

 
You can contribute to the codebase or host your own.