Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mynameisjeff-305/rick-and-morty-app
Rick and Morty App using Astro and public Rick and Morty API
https://github.com/mynameisjeff-305/rick-and-morty-app
astro astrojs javascript react
Last synced: 4 days ago
JSON representation
Rick and Morty App using Astro and public Rick and Morty API
- Host: GitHub
- URL: https://github.com/mynameisjeff-305/rick-and-morty-app
- Owner: MyNameIsJeff-305
- Created: 2024-08-14T22:36:53.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-21T01:52:48.000Z (6 months ago)
- Last Synced: 2025-01-31T03:13:32.201Z (13 days ago)
- Topics: astro, astrojs, javascript, react
- Language: Astro
- Homepage:
- Size: 756 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rick and Morty Info App
This app provides information about the characters, locations, and episodes of the *Rick and Morty* TV show. It is built using [Astro.JS](https://astro.build/), React, and JavaScript, and fetches data from the [Rick and Morty API](https://rickandmortyapi.com).
[Live Website](https://66c546b58c87830008652f2f--myrickandmortyapp.netlify.app/)
## Features
- Browse and view details for all characters, locations, and episodes.
- Search functionality for characters.
- Filter by status, species, and gender for characters.
- Responsive design for both mobile and desktop users.
## Technologies Used
- **Astro.JS**: Static site generation framework.
- **React**: For building user interfaces and managing component state.
- **JavaScript**: Core scripting language for the app.
- **Rick and Morty API**: Data source for the app.
## Installation
To run this project locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/yourusername/rick-and-morty-app.git
```
2. Navigate to the project directory:
```bash
cd rick-and-morty-app
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. The app will be running at http://localhost:4321.
## API
This app fetches data from the Rick and Morty API, a RESTful API that provides detailed information on characters, locations, and episodes of the Rick and Morty TV show.
## Project Structure
```bash
├── public
├── src
│ ├── components
│ ├── pages
│ ├── styles
│ └── utils
├── astro.config.mjs
├── package.json
└── README.md
```
- components/: Contains all React components such as CharacterCard, LocationCard, and EpisodeCard.
- pages/: Contains the main pages of the app like Characters, Locations, and Episodes.
- styles/: Global styles and component-specific styles.
- utils/: Helper functions for API calls and data manipulation.
## Usage
1. Characters Page: Browse and search for characters, apply filters, and view character details.
2. Locations Page: Explore different locations from the show with detailed descriptions.
3. Episodes Page: Find information on all episodes, including air dates and episode summaries.
## Contributing
Contributions are welcome! If you'd like to contribute, please fork the repository and make your changes in a new branch. Once your changes are ready, open a pull request.
## License
This project is licensed under the MIT License.
## Acknowledgements
Rick and Morty API for providing the data.
Astro.JS for the static site generation framework.
React for building user interfaces.