generated from goitacademy/react-homework-template
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b03cfd2
commit abcd4d6
Showing
1 changed file
with
29 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,113 +1,47 @@ | ||
| # React homework template | ||
| ## Money Guard🪙 | ||
|
|
||
| Этот проект был создан при помощи | ||
| [Create React App](https://github.com/facebook/create-react-app). Для знакомства | ||
| и настройки дополнительных возможностей | ||
| [обратись к документации](https://facebook.github.io/create-react-app/docs/getting-started). | ||
| Money Guard is a React-based project designed to help users track their expenses and income, providing a convenient way to maintain financial records and gain insights into spending habits. | ||
|
|
||
| ## Создание репозитория по шаблону | ||
| ### Features: | ||
|
|
||
| Используй этот репозиторий организации GoIT как шаблон для создания репозитория | ||
| своего проекта. Для этого нажми на кнопку `«Use this template»` и выбери опцию | ||
| `«Create a new repository»`, как показано на изображении. | ||
| ##### Expense Tracking: Easily record and categorize expenses to keep a detailed account of where your money is going. | ||
|
|
||
|  | ||
| ##### Income Management: Log your sources of income to have a comprehensive view of your financial situation. | ||
|
|
||
| На следующем шаге откроется страница создания нового репозитория. Заполни поле | ||
| его имени, убедись что репозиторий публичный, после чего нажми кнопку | ||
| `«Create repository from template»`. | ||
| ##### Budget Monitoring: Set budgets for different expense categories and track your spending to stay within your financial goals. | ||
|
|
||
|  | ||
| ##### Visual Representation: Visualize your financial data through charts and graphs for better understanding and analysis. | ||
|
|
||
| После того как репозиторий будет создан, необходимо перейти в настройки | ||
| созданного репозитория на вкладку `Settings` > `Actions` > `General` как | ||
| показано на изображении. | ||
| ##### User Authentication: Securely sign in to your account to access your financial data across multiple devices. | ||
|
|
||
|  | ||
| ### How to Use: | ||
|
|
||
| Проскролив страницу до самого конца, в секции `«Workflow permissions»` выбери | ||
| опцию `«Read and write permissions»` и поставь галочку в чекбоксе. Это | ||
| необходимо для автоматизации процесса деплоя проекта. | ||
| ###### Installation: | ||
|
|
||
|  | ||
| Clone the repository to your local machine. | ||
| Navigate to the project directory. | ||
| Run npm install to install dependencies. | ||
| Development: | ||
|
|
||
| Теперь у тебя есть личный репозиторий проекта, со структурой файлов и папок | ||
| репозитория-шаблона. Далее работай с ним как с любым другим личным репозиторием, | ||
| клонируй его себе на компьютер, пиши код, делай коммиты и отправляй их на | ||
| GitHub. | ||
| Run npm start to start the development server. | ||
| Open your browser and navigate to http://localhost:3000 to view the app. | ||
| Usage: | ||
|
|
||
| ## Подготовка к работе | ||
| Sign up or log in to your account. | ||
| Add your expenses and income using the provided forms. | ||
| View your financial statistics and insights on the dashboard. | ||
| Set budgets and monitor your spending to achieve your financial goals. | ||
| Deployment: | ||
|
|
||
| 1. Убедись что на компьютере установлена LTS-версия Node.js. | ||
| [Скачай и установи](https://nodejs.org/en/) её если необходимо. | ||
| 2. Установи базовые зависимости проекта командой `npm install`. | ||
| 3. Запусти режим разработки, выполнив команду `npm start`. | ||
| 4. Перейди в браузере по адресу [http://localhost:3000](http://localhost:3000). | ||
| Эта страница будет автоматически перезагружаться после сохранения изменений в | ||
| файлах проекта. | ||
| Customize the project according to your needs. | ||
| Deploy the application to your preferred hosting platform. | ||
| Contributing: | ||
|
|
||
| ## Деплой | ||
| We welcome contributions from the community to improve Money Guard. If you have any ideas for features, bug fixes, or enhancements, please feel free to submit a pull request. We appreciate your support in making Money Guard a more robust and user-friendly financial management tool. | ||
|
|
||
| Продакшн версия проекта будет автоматически проходить линтинг, собираться и | ||
| деплоиться на GitHub Pages, в ветку `gh-pages`, каждый раз когда обновляется | ||
| ветка `main`. Например, после прямого пуша или принятого пул-реквеста. Для этого | ||
| необходимо в файле `package.json` отредактировать поле `homepage`, заменив | ||
| `your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. | ||
| ### Feedback: | ||
|
|
||
| ```json | ||
| "homepage": "https://your_username.github.io/your_repo_name/" | ||
| ``` | ||
| We value your feedback! If you have any suggestions, comments, or encounter any issues while using Money Guard, please don't hesitate to reach out. Your input helps us enhance the user experience and make Money Guard more effective in managing finances. | ||
|
|
||
| Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и | ||
| выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если | ||
| это небыло сделано автоматически. | ||
|
|
||
|  | ||
|
|
||
| ### Статус деплоя | ||
|
|
||
| Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. | ||
|
|
||
| - **Желтый цвет** - выполняется сборка и деплой проекта. | ||
| - **Зеленый цвет** - деплой завершился успешно. | ||
| - **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. | ||
|
|
||
| Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в | ||
| выпадающем окне перейти по ссылке `Details`. | ||
|
|
||
|  | ||
|
|
||
| ### Живая страница | ||
|
|
||
| Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть | ||
| по адресу указанному в отредактированном свойстве `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` для маршрутизации, | ||
| необходимо дополнительно настроить компонент `<BrowserRouter>`, передав в пропе | ||
| `basename` точное название твоего репозитория. Слеш в начале строки обязателен. | ||
|
|
||
| ```jsx | ||
| <BrowserRouter basename="/your_repo_name"> | ||
| <App /> | ||
| </BrowserRouter> | ||
| ``` | ||
|
|
||
| ## Как это работает | ||
|
|
||
|  | ||
|
|
||
| 1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный | ||
| скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. | ||
| 2. Все файлы репозитория копируются на сервер, где проект инициализируется и | ||
| проходит линтинг и сборку перед деплоем. | ||
| 3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта | ||
| отправляется в ветку `gh-pages`. В противном случае, в логе выполнения | ||
| скрипта будет указано в чем проблема. | ||
| #### Thank you for choosing Money Guard to take control of your finances! We hope it helps you achieve your financial goals and empowers you to make informed decisions about your money. 📊💰 |