Recreating My Project Using NextJS

I have been using React for my projects for more than a year now. Eventually, I wanted to try out Next.js. Additionally, I needed to recreate my second React project since I lost the first one in distro-hopping.

The project which I am going to discuss in this post is called Ayame. Ayame is an anime listing website that fetches its data from a Jikan REST API that, in turn, is an unofficial MyAnimeList API. The reason why I needed to switch to Next.js was because of its routing system.

When I first shared the original project with my friends, some had never heard about anime. This time around, there was the need to show the top anime on the front page. Two other pages would handle searching for the anime and ongoing seasonal anime. When the design got decided, I sat down to work on it. It took me more than 3 hours to finish the initial version of the website.

Here’s how it looked before

Here’s how it looks now

To sum it all up, I am happy with the new layout and how it turned out to be. If anyone has any suggestions for improving the website, contact me on Mastodon.

The original version of Ayame: https://ayame.surge.sh/

The new version of Ayame: https://ayamev2.vercel.app/