Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/remrkabledev/react-omdb-api

A simple React application that reads data from the OMDB Api
https://github.com/remrkabledev/react-omdb-api

hacktoberfest omdb-api react react-hooks reactjs

Last synced: 3 months ago
JSON representation

A simple React application that reads data from the OMDB Api

Host: GitHub
URL: https://github.com/remrkabledev/react-omdb-api
Owner: reMRKableDev
License: mit
Created: 2020-02-06T17:07:07.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2024-04-13T10:59:58.000Z (9 months ago)
Last Synced: 2024-04-14T00:47:09.115Z (9 months ago)
Topics: hacktoberfest, omdb-api, react, react-hooks, reactjs
Language: JavaScript
Homepage: https://remrkable-moviefinder.netlify.app/
Size: 2.11 MB
Stars: 4
Watchers: 2
Forks: 1
Open Issues: 4
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        # MovieFinder App: React OMDB API 🚀🚀🚀

![tests](https://github.com/reMRKableDev/react-omdb-api/workflows/tests/badge.svg) [![codecov](https://codecov.io/gh/reMRKableDev/react-omdb-api/branch/master/graph/badge.svg?token=14H0RAELNQ)](https://codecov.io/gh/reMRKableDev/react-omdb-api) [![CodeFactor](https://www.codefactor.io/repository/github/remrkabledev/react-omdb-api/badge)](https://www.codefactor.io/repository/github/remrkabledev/react-omdb-api) [![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=reMRKableDev_react-omdb-api&metric=alert_status)](https://sonarcloud.io/dashboard?id=reMRKableDev_react-omdb-api) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=reMRKableDev_react-omdb-api&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=reMRKableDev_react-omdb-api) [![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=reMRKableDev_react-omdb-api&metric=reliability_rating)](https://sonarcloud.io/dashboard?id=reMRKableDev_react-omdb-api) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=reMRKableDev_react-omdb-api&metric=security_rating)](https://sonarcloud.io/dashboard?id=reMRKableDev_react-omdb-api) [![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=reMRKableDev_react-omdb-api&metric=sqale_index)](https://sonarcloud.io/dashboard?id=reMRKableDev_react-omdb-api) [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=reMRKableDev_react-omdb-api&metric=bugs)](https://sonarcloud.io/dashboard?id=reMRKableDev_react-omdb-api)  [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=reMRKableDev_react-omdb-api&metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=reMRKableDev_react-omdb-api) [![Netlify Status](https://api.netlify.com/api/v1/badges/771fb2bb-c56a-4265-9392-c09736273e57/deploy-status)](https://app.netlify.com/sites/remrkable-moviefinder/deploys)

This project is an introduction to using React.js for extracting data from an API. It focuses on:

- Making API requests in order to retrieve JSON data.

- Creating event handling functions for forms.

- Updating of Components and their State.

- Passing of State values as Props between Components.

- Using React lifecycle methods (such as componentDidUpdate()) to check for updates made to the State of Components.

![moviefinder-gif](./src/assets/images/moviefinder.gif)

## Getting Started 🏁

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

### Prerequisites

What things you need installed on your local machine.

```

Text editor (This was built using VSCode)

NPM / Yarn

Git

```

### How To:

To use the app, visit the web link in the short description above. If you would like to try it on your own:

```

1. Fork and/or Clone repo.

2. Run 'npm install' on your local repo so as to get the required dependencies.

3. Launch application with 'npm start'.

```

## Running the tests 🧪

This app utilizes Jest & Enzyme for testing the components. Tests can be run by using the command:

```

npm test

OR

npm run test

```

To run tests with coverage, use the command:

```

npm run coverage

```

## Contributing 👋

If you would like to contribute to this repository, follow the guidelines provided in the [CONTRIBUTING.md](./CONTRIBUTING.md) file.

## Code Of Conduct 📋

Please note that there is a [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md), please follow it in all your interactions with the project.

## Authors 💻

- **Malcolm R. Kente** - _Initial work_ - [reMRKable Dev](https://remrkabledev.com/)

## Acknowledgments 🗣️

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)