Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enesergun/ricky-and-morty-typescript
https://github.com/enesergun/ricky-and-morty-typescript
axios next-redux-wrapper nextjs redux-persist redux-toolkit sass typescript
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/enesergun/ricky-and-morty-typescript
- Owner: enesergun
- Created: 2023-12-27T06:17:13.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2023-12-28T06:21:36.000Z (12 months ago)
- Last Synced: 2023-12-28T18:40:25.917Z (12 months ago)
- Topics: axios, next-redux-wrapper, nextjs, redux-persist, redux-toolkit, sass, typescript
- Language: TypeScript
- Homepage: https://ricky-and-morty-typescript.vercel.app
- Size: 1.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Rick And Morty
This project has been developed using the [Rick And Morty API](https://rickandmortyapi.com/) with Next.js.
## Live
Click [here](https://ricky-and-morty-typescript.vercel.app/) 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:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.