This project has been developed using the Rick And Morty API with Next.js.
Click here to go to the live demo.
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
andresident count
information of a location in all locations, - View the
status
andtype
information of a character in all characters and filter them byalive
dead
andunknown
- Click on any location to see its residents along with the
dimension
information and filter the residents based on theirstatus
- Navigate to the details of any character to view information such as
species
type
gender
andorigin
- List other characters with the same
status
andlocation
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.
- Typescript
- Nextjs
- API Routes
- Redux-toolkit
- SCSS
- axios
- next-redux-wrapper
- redux-persist
- Swiper
The application has been developed with a "mobile-first" approach, making it completely responsive. Therefore, it can be used without any issues cross browsers.
Following the analysis conducted with Lighthouse, we observe high scores in Performance, Accessibility, Best Practices, and SEO on the pages within the project.
- Single Location Page ( Mobile )
![Screenshot 2023-12-28 at 03 22 07](https://private-user-images.githubusercontent.com/63712936/293114689-83017335-28bc-4431-b2d4-264abeb7f91c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MTE2MDksIm5iZiI6MTcyNDUxMTMwOSwicGF0aCI6Ii82MzcxMjkzNi8yOTMxMTQ2ODktODMwMTczMzUtMjhiYy00NDMxLWIyZDQtMjY0YWJlYjdmOTFjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI0VDE0NTUwOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI0NDc2YmU1YmM4Zjc3YzZjN2I3YjZlYWRkMDE2MjA5MDkzMjk5MWM0MmUzM2I4ZjgyNDUwM2E0MTE3NWIzZDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ppoyQbEkqUEtUXHLTWLP3BovL19I87lZkjR_YkhXHHc)
- Character List Page ( Desktop )
![Screenshot 2023-12-28 at 03 24 46](https://private-user-images.githubusercontent.com/63712936/293114830-26be231f-e85d-41d7-ae67-4e3bee92d4fc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MTE2MDksIm5iZiI6MTcyNDUxMTMwOSwicGF0aCI6Ii82MzcxMjkzNi8yOTMxMTQ4MzAtMjZiZTIzMWYtZTg1ZC00MWQ3LWFlNjctNGUzYmVlOTJkNGZjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI0VDE0NTUwOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI3OGQzOTc5NDY0ODc3OTc5NDY1ZjdmZDBkYTQ5ZTNjYzk4Yzc2NDdmZjdlZjA2ZDNiMDRiNTc0NjFkNzNhNDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.sIzq25DVZIBagubrSqUZTperP96nnm_aXvLhjoN7dy8)
- Character List Page ( Mobile )
![image](https://private-user-images.githubusercontent.com/63712936/293115075-d32d97b0-503c-449e-bd1b-aa1bc721ad01.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MTE2MDksIm5iZiI6MTcyNDUxMTMwOSwicGF0aCI6Ii82MzcxMjkzNi8yOTMxMTUwNzUtZDMyZDk3YjAtNTAzYy00NDllLWJkMWItYWExYmM3MjFhZDAxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI0VDE0NTUwOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNlZjA2ZmMyNjc3ZDdlYzA2MTdlNWNkZDUzYmZkZDEzZDA3MTkwZGQwZmI5ZWVhM2IxZmRhYzI2YTVjYjQ3NGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.R537J9sBDe8jzSU8fo7YKFpl-8PK2rYXpErRu06P8rk)
- Location List Page ( Desktop )
![image](https://private-user-images.githubusercontent.com/63712936/293115180-664a44e7-3463-443c-8633-1af3977b13a4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MTE2MDksIm5iZiI6MTcyNDUxMTMwOSwicGF0aCI6Ii82MzcxMjkzNi8yOTMxMTUxODAtNjY0YTQ0ZTctMzQ2My00NDNjLTg2MzMtMWFmMzk3N2IxM2E0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI0VDE0NTUwOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI2Zjc0YzA0ZTk4NjM3MGNjYzA2MTgwMjY4ZDNkZjVlZjZlMTM3ZjYwMDFiMDIwYTBjZmIwZjYwNGQwZjU0ZTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.hCL8Vp1oCgAJTsIjAitOmaPPedpaD68bVIri2b8R7ks)
- Character Detail Page ( Mobile )
![image](https://private-user-images.githubusercontent.com/63712936/293115207-38bdaf7d-22c2-4d62-9311-1bb69ad80e59.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MTE2MDksIm5iZiI6MTcyNDUxMTMwOSwicGF0aCI6Ii82MzcxMjkzNi8yOTMxMTUyMDctMzhiZGFmN2QtMjJjMi00ZDYyLTkzMTEtMWJiNjlhZDgwZTU5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI0VDE0NTUwOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTViNDIyZWU1YjQ5MDQ2N2E4ZTEyYzkyNjkzNjUzYTY4OTg1YzRlZjA5NjE5ZjEwNGUyZDY3ODllYzZkNzkzNTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.gQCxnPjyqvhxTIiB-8fV0jkdbbzwoQmecpRP4AfIz4A)
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.