Rick And Morty

This project has been developed using the Rick And Morty API with Next.js.

Live

Click here to go to the live demo.

Visitor Stories

Users can perform the following actions in this application:

• View a list of all locations and all characters with a page structure,
• View the name type and resident count information of a location in all locations,
• View the status and type information of a character in all characters and filter them by alive dead and unknown
• Click on any location to see its residents along with the dimension information and filter the residents based on their status
• Navigate to the details of any character to view information such as species type gender and origin
• List other characters with the same status and location as the character whose details are being viewed,
• Add and remove characters to/from favorites on the character list, location details, and character pages,
• View characters added to favorites on the "my favorites" page.

Technologies

• Typescript
• Nextjs
• API Routes
• Redux-toolkit
• SCSS
• axios
• next-redux-wrapper
• redux-persist
• Swiper

Screenshots

The application has been developed with a "mobile-first" approach, making it completely responsive. Therefore, it can be used without any issues cross browsers.

Good FCP, SI, LCP, TBT, CLS Scores

Following the analysis conducted with Lighthouse, we observe high scores in Performance, Accessibility, Best Practices, and SEO on the pages within the project.

For example,

• Single Location Page ( Mobile )

• Character List Page ( Desktop )

On the other hand, the Cumulative Layout Shift (CLS) scores on all pages are less than 0.0.

• Character List Page ( Mobile )

• Location List Page ( Desktop )

• Character Detail Page ( Mobile )

Setup

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.