diff --git a/README.md b/README.md index af1f02c..966b876 100644 --- a/README.md +++ b/README.md @@ -1,113 +1,72 @@ -# React homework template +# Image-finder using Pixabay API in React + +> Task nr 5 from GoIT course - module: React.js Live demo +> [_here_](https://emiliawenta.github.io/goit-react-hw-05-movies/). + +## Table of Contents + +- [General Info](#general-information) +- [Technologies Used](#technologies-used) +- [Screenshots](#screenshots) +- [Setup](#setup) +- [Project Status](#project-status) +- [Acknowledgements](#acknowledgements) +- [Contact](#contact) + + +## General Information + +- This project concerns task no. 5 from the GoIT react.js module course. +- Task goal: learnig how to using Routing, navigate of page and react.lazy. +- Main functionality: You can find movies and their description, cast, reviews and more. + +## Technologies Used + +Project is created with: + +- React - 18.1.0 +- Node.js v18.16.1 +- JS +- JSX +- CSS +- json +- API +- Routing +- React.lazy, +- React.suspense. + +## Screenshots +Below you can show how the application working: +1. That's a Home site, there are trending movies today. You can click one and see more information about that movie. +![image](https://github.com/EmiliaWenta/goit-react-hw-05-movies/assets/126571469/b12914ec-7542-4804-bade-784f33632279) +![image](https://github.com/EmiliaWenta/goit-react-hw-05-movies/assets/126571469/5a534e6c-32fc-4eae-9be9-c36bbf2d4bf3) +2. That's a Movie site, here you can search movie that you are looking for. +![image](https://github.com/EmiliaWenta/goit-react-hw-05-movies/assets/126571469/b33d2d55-def8-4c04-8268-e99490a0ed77) +3. You can also click on movie title, and then see more information about that movie. +![image](https://github.com/EmiliaWenta/goit-react-hw-05-movies/assets/126571469/0a72d8da-e656-4f49-a4ce-793ef2a41e48) +4. You can see more information just like cast or reviews, please click as shown below. +![image](https://github.com/EmiliaWenta/goit-react-hw-05-movies/assets/126571469/00b566cb-fbc3-4d04-a76c-93d93ff753ea) +![image](https://github.com/EmiliaWenta/goit-react-hw-05-movies/assets/126571469/c3f6c74b-5e6a-4cb3-885d-fb707446b979) + +## Setup + +To run this project, install it locally using npm: -Этот проект был создан при помощи -[Create React App](https://github.com/facebook/create-react-app). Для знакомства -и настройки дополнительных возможностей -[обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). - -## Создание репозитория по шаблону - -Используй этот репозиторий организации GoIT как шаблон для создания репозитория -своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию -`«Create a new repository»`, как показано на изображении. - -![Creating repo from a template step 1](./assets/template-step-1.png) - -На следующем шаге откроется страница создания нового репозитория. Заполни поле -его имени, убедись что репозиторий публичный, после чего нажми кнопку -`«Create repository from template»`. - -![Creating repo from a template step 2](./assets/template-step-2.png) - -После того как репозиторий будет создан, необходимо перейти в настройки -созданного репозитория на вкладку `Settings` > `Actions` > `General` как -показано на изображении. - -![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png) - -Проскролив страницу до самого конца, в секции `«Workflow permissions»` выбери -опцию `«Read and write permissions»` и поставь галочку в чекбоксе. Это -необходимо для автоматизации процесса деплоя проекта. - -![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png) - -Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок -репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, -клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на -GitHub. - -## Подготовка к работе - -1. Убедись что на компьютере установлена LTS-версия Node.js. - [Скачай и установи](https://nodejs.org/en/) её если необходимо. -2. Установи базовые зависимости проекта командой `npm install`. -3. Запусти режим разработки, выполнив команду `npm start`. -4. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). - Эта страница будет автоматически перезагружаться после сохранения изменений в - файлах проекта. - -## Деплой - -Продакшн версия проекта будет автоматически проходить линтинг, собираться и -деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется -ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого -необходимо в файле `package.json` отредактировать поле `homepage`, заменив -`your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. - -```json -"homepage": "https://your_username.github.io/your_repo_name/" +``` +$ cd ../goit-react-hw-03-phonebook/ +$ npm install +$ npm start ``` -Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и -выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если -это небыло сделано автоматически. - -![GitHub Pages settings](./assets/repo-settings.png) - -### Статус деплоя - -Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. - -- **Желтый цвет** - выполняется сборка и деплой проекта. -- **Зеленый цвет** - деплой завершился успешно. -- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. - -Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в -выпадающем окне перейти по ссылке `Details`. - -![Deployment status](./assets/deploy-status.png) - -### Живая страница - -Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть -по адресу указанному в отредактированном свойстве `homepage`. Например, вот -ссылка на живую версию для этого репозитория -[https://goitacademy.github.io/react-homework-template](https://goitacademy.github.io/react-homework-template). - -Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок -связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее -всего у тебя неправильное значение свойства `homepage` в файле `package.json`. - -### Маршрутизация - -Если приложение использует библиотеку `react-router-dom` для маршрутизации, -необходимо дополнительно настроить компонент ``, передав в пропе -`basename` точное название твоего репозитория. Слеш в начале строки обязателен. +## Project Status -```jsx - - - -``` +Project is: _complete_ -## Как это работает +## Acknowledgements -![How it works](./assets/how-it-works.png) +- This project was based on template from + [this tutorial](https://github.com/goitacademy/react-homework-template#readme) +- Many thanks for GoIT Team. -1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный - скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. -2. Все файлы репозитория копируются на сервер, где проект инициализируется и - проходит линтинг и сборку перед деплоем. -3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта - отправляется в ветку `gh-pages`. В противном случае, в логе выполнения - скрипта будет указано в чем проблема. +## Contact +Created by [@EmiliaWenta](https://github.com/EmiliaWenta) - feel free to contact me!