Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lincoln1883/net-flix-capstone
The Popcorn Flix App is a SPA utilizing the concepts of routing with React Router, State Management with Redux. Axios to make calls to a movies API to fetch data, and the user can filter movies by keywords..
https://github.com/lincoln1883/net-flix-capstone
axios react react-router redux tailwind-css
Last synced: 3 days ago
JSON representation
The Popcorn Flix App is a SPA utilizing the concepts of routing with React Router, State Management with Redux. Axios to make calls to a movies API to fetch data, and the user can filter movies by keywords..
- Host: GitHub
- URL: https://github.com/lincoln1883/net-flix-capstone
- Owner: lincoln1883
- License: mit
- Created: 2023-06-28T00:44:58.000Z (over 1 year ago)
- Default Branch: development
- Last Pushed: 2023-11-20T23:57:25.000Z (about 1 year ago)
- Last Synced: 2024-05-17T15:41:57.684Z (8 months ago)
- Topics: axios, react, react-router, redux, tailwind-css
- Language: JavaScript
- Homepage: https://popcorn-flix.netlify.app/
- Size: 729 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Popcorn Flix
# 📗 Table of Contents
- [📖 Popcorn Flix](#-popcorn-flix-)
- [🛠 Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [🚀 Live Demo ](#-live-demo-)
- [📹 Video Demo ](#-video-demo-)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [👥 Author ](#-author-)
- [🔭 Future Features ](#-future-features-)
- [🤝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [🙏 Acknowledgments ](#-acknowledgments-)
- [📝 License ](#-license-)
The Popcorn Flix App is the Capstone project for React module three where we are required to build an SPA utilizing the concepts we learnt. I used Axios to make calls to a movies API to fetch data, I used Redux( useSelector and useDispatch) to update the state by filtering movies by title. I can navigate from the home page to a single movie page dynamically using React router, and fetch data with useEffect on page load and with action dispatch, finally, I used Jest and React Testing Library to make component tests and mock API calls.
- Routing using react-router.
- App-wide State Management with Redux/Toolkit.
- Styling with Tailwind CSS.
- Data-fetching with Axios.
- Testing with Jest and React Testing Library.
### Live Demo
[Popcorn Flix](https://popcorn-flix.netlify.app/)
### Video Presentation
[Presentation](https://www.loom.com/share/7e820953b26248f68897f22fca7c3f09?sid=3de3d2bb-47e9-4ad0-95b7-83de7e748dfc)
### Prerequisites
In order to run this project you need to have the following installed:
```sh
- A web browser
- A code editor
- A terminal
- Git
- Node.js
```
### Setup
Clone this repository to your desired folder:
```sh
cd my-folder run `git clone https://github.com/lincoln1883/net-flix-capstone/`
```
### Install
Install this project with:
```sh
cd my-folder run `npm install`
```
### Usage
To run the project, execute the following command:
open the index.html file in your browser using the live server extension.
### Run tests
To test please execute the following command:
```sh
run `npm test`
```
####👤 Lincoln Gibson
- GitHub: [lincoln1883](https://github.com/lincoln1883)
- Twitter: [lincolngibson7](https://twitter.com/lincolngibson7)
- LinkedIn: [lincoln-gibson](https://linkedin.com/in/lincoln-gibson)
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
- Give a ⭐️ if you like this project!
- Thank you Microverse.
- Original design idea by Nelson Sakwa on Behance.
This project is [MIT](./LICENSE) licensed.