Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/miro-wq/goit-react-hw-05-movies
This project showcases how to build a multi-page application with React Router and integrate external APIs for dynamic content. It's a great reference for understanding routing and state management in React.
https://github.com/miro-wq/goit-react-hw-05-movies
api-integration async-loading code-splitting movies-app-react react-hooks react-lazy reactjs routing suspense themoviedb-org
Last synced: 26 days ago
JSON representation
This project showcases how to build a multi-page application with React Router and integrate external APIs for dynamic content. It's a great reference for understanding routing and state management in React.
- Host: GitHub
- URL: https://github.com/miro-wq/goit-react-hw-05-movies
- Owner: Miro-wq
- Created: 2024-09-10T18:30:12.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-21T11:59:02.000Z (about 1 month ago)
- Last Synced: 2024-11-21T12:38:09.374Z (about 1 month ago)
- Topics: api-integration, async-loading, code-splitting, movies-app-react, react-hooks, react-lazy, reactjs, routing, suspense, themoviedb-org
- Language: JavaScript
- Homepage: https://miro-wq.github.io/goit-react-hw-05-movies/
- Size: 5.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
Awesome Lists containing this project
README
# React homework template
This project was created with
[Create React App](https://github.com/facebook/create-react-app). To get
acquainted and configure additional features
[refer to documentation](https://facebook.github.io/create-react-app/docs/getting-started).## Creating a repository by template
Use this GoIT repository as a template for creating a repository
of your project. To use it just tap the `«Use this template»` button and choose
`«Create a new repository»` option, as you can see on the image below.![Creating repo from a template step 1](./assets/template-step-1.png)
The page for creating a new repository will open on the next step. Fill out
the Name field and make sure the repository is public, then click
`«Create repository from template»` button.![Creating repo from a template step 2](./assets/template-step-2.png)
You now have a personal project repository, having a repository-template file
and folder structure. After that, you can work with it as you would with any
other private repository: clone it on your computer, write code, commit, and
send it to GitHub.## Preparing for coding
1. Make sure you have an LTS version of Node.js installed on your computer.
[Download and install](https://nodejs.org/en/) if needed.
2. Install the project's base dependencies with the `npm install` command.
3. Start development mode by running the `npm start` command.
4. Go to [http://localhost:3000](http://localhost:3000) in your browser. This
page will automatically reload after saving changes to the project files.## Deploy
The production version of the project will automatically be linted, built, and
deployed to GitHub Pages, in the `gh-pages` branch, every time the `main` branch
is updated. For example, after a direct push or an accepted pull request. To do
this, you need to edit the `homepage` field in the `package.json` file,
replacing `your_username` and `your_repo_name` with your own, and submit the
changes to GitHub.```json
"homepage": "https://your_username.github.io/your_repo_name/"
```Next, you need to go to the settings of the GitHub repository (`Settings` >
`Pages`) and set the distribution of the production version of files from the
`/root` folder of the `gh-pages` branch, if this was not done automatically.![GitHub Pages settings](./assets/repo-settings.png)
### Deployment status
The deployment status of the latest commit is displayed with an icon next to its
ID.- **Yellow color** - the project is being built and deployed.
- **Green color** - deployment completed successfully.
- **Red color** - an error occurred during linting, build or deployment.More detailed information about the status can be viewed by clicking on the
icon, and in the drop-down window, follow the link `Details`.![Deployment status](./assets/deploy-status.png)
### Live page
After some time, usually a couple of minutes, the live page can be viewed at the
address specified in the edited `homepage` property. For example, here is a link
to a live version for this repository
[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template).If a blank page opens, make sure there are no errors in the `Console` tab
related to incorrect paths to the CSS and JS files of the project (**404**). You
most likely have the wrong value for the `homepage` property in the
`package.json` file.### Routing
If your application uses the `react-router-dom` library for routing, you must
additionally configure the `` component by passing the exact name
of your repository in the `basename` prop. Slashes at the beginning and end of
the line are required.```jsx
```
## How it works
![How it works](./assets/how-it-works.png)
1. After each push to the `main` branch of the GitHub repository, a special
script (GitHub Action) is launched from the `.github/workflows/deploy.yml`
file.
2. All repository files are copied to the server, where the project is
initialized and linted and built before deployment.
3. If all steps are successful, the built production version of the project
files is sent to the `gh-pages` branch. Otherwise, the script execution log
will indicate what the problem is.