https://github.com/iryna-vyshniak/gofilm
ποΈ Filmoteka React. ποΈ GoFilm - everything about movies, authors, actors and news of film industry. Individual Learning Project. Application for searching and storage movies. Display popular movies with using themoviedb.org API.
https://github.com/iryna-vyshniak/gofilm
dayjs i18next react-circular-progressbar react-icons react-modal react-paginate react-player react-select react-spinners react-toastify swiper
Last synced: about 1 year ago
JSON representation
ποΈ Filmoteka React. ποΈ GoFilm - everything about movies, authors, actors and news of film industry. Individual Learning Project. Application for searching and storage movies. Display popular movies with using themoviedb.org API.
- Host: GitHub
- URL: https://github.com/iryna-vyshniak/gofilm
- Owner: Iryna-Vyshniak
- Created: 2023-04-16T18:00:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T11:52:26.000Z (about 2 years ago)
- Last Synced: 2025-04-02T01:39:14.656Z (over 1 year ago)
- Topics: dayjs, i18next, react-circular-progressbar, react-icons, react-modal, react-paginate, react-player, react-select, react-spinners, react-toastify, swiper
- Language: JavaScript
- Homepage: https://iryna-vyshniak.github.io/GoFilm/
- Size: 74 MB
- Stars: 4
- 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).
## Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ ΠΏΠΎ ΡΠ°Π±Π»ΠΎΠ½Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉ ΡΡΠΎΡ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ GoIT ΠΊΠ°ΠΊ ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ
ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π°ΠΆΠΌΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ `Β«Use this templateΒ»` ΠΈ Π²ΡΠ±Π΅ΡΠΈ ΠΎΠΏΡΠΈΡ
`Β«Create a new repositoryΒ»`, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ.
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π³Π΅ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ. ΠΠ°ΠΏΠΎΠ»Π½ΠΈ ΠΏΠΎΠ»Π΅
Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ, ΡΠ±Π΅Π΄ΠΈΡΡ ΡΡΠΎ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ ΠΏΡΠ±Π»ΠΈΡΠ½ΡΠΉ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π½Π°ΠΆΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ
`Β«Create repository from templateΒ»`.
Π’Π΅ΠΏΠ΅ΡΡ Ρ ΡΠ΅Π±Ρ Π΅ΡΡΡ Π»ΠΈΡΠ½ΡΠΉ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΡΠΎ ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ ΠΏΠ°ΠΏΠΎΠΊ
ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ-ΡΠ°Π±Π»ΠΎΠ½Π°. ΠΠ°Π»Π΅Π΅ ΡΠ°Π±ΠΎΡΠ°ΠΉ Ρ Π½ΠΈΠΌ ΠΊΠ°ΠΊ Ρ Π»ΡΠ±ΡΠΌ Π΄ΡΡΠ³ΠΈΠΌ Π»ΠΈΡΠ½ΡΠΌ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠ΅ΠΌ,
ΠΊΠ»ΠΎΠ½ΠΈΡΡΠΉ Π΅Π³ΠΎ ΡΠ΅Π±Π΅ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ, ΠΏΠΈΡΠΈ ΠΊΠΎΠ΄, Π΄Π΅Π»Π°ΠΉ ΠΊΠΎΠΌΠΌΠΈΡΡ ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠΉ ΠΈΡ
Π½Π°
GitHub.
## ΠΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠ° ΠΊ ΡΠ°Π±ΠΎΡΠ΅
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.
### 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`.
### 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
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.