Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewjbateman/ionic-react-planning
:books: App using Ionic with React to store a list of projects.
https://github.com/andrewjbateman/ionic-react-planning
http ionic-react ionic5 react rxjs-observables rxjs6
Last synced: about 19 hours ago
JSON representation
:books: App using Ionic with React to store a list of projects.
- Host: GitHub
- URL: https://github.com/andrewjbateman/ionic-react-planning
- Owner: AndrewJBateman
- License: mit
- Created: 2020-02-06T10:55:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T14:32:12.000Z (about 2 years ago)
- Last Synced: 2024-12-27T02:45:09.114Z (about 2 months ago)
- Topics: http, ionic-react, ionic5, react, rxjs-observables, rxjs6
- Language: TypeScript
- Homepage:
- Size: 4.36 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :zap: Ionic React Planning
* App using Ionic with React to store a list of projects.
* **Note:** to open web links in a new window use: _ctrl+click on link_


## :page_facing_up: Table of contents
* [:zap: Ionic React Planning](#zap-ionic-react-planning)
* [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)
* [:books: General info](#books-general-info)
* [:camera: Screenshots](#camera-screenshots)
* [:signal_strength: Technologies](#signal_strength-technologies)
* [:floppy_disk: Setup * Development](#floppy_disk-setup--development)
* [:floppy_disk: Setup * Build, Android Studio](#floppy_disk-setup--build-android-studio)
* [:computer: Code Examples](#computer-code-examples)
* [:cool: Features](#cool-features)
* [:clipboard: Status & To Do List](#clipboard-status--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:file_folder: License](#file_folder-license)
* [:envelope: Contact](#envelope-contact)## :books: General info
* List of projects from dropdown list of javascript frameworks
## :camera: Screenshots

## :signal_strength: Technologies
* [Ionic/React v5](https://www.npmjs.com/package/@ionic/react) used to create app
* [React v17](https://reactjs.org/) JavaScript library
* [Capacitor](https://capacitor.ionicframework.com/docs/) cross*platform app run*time
* [React Dev Tools Chrome extension](https://chrome.google.com/webstore/detail/react*developer*tools/fmkadmapgofadopljbjfkapdkoienihi/related) to help with debugging etc.* [Ionic Grid](https://ionicframework.com/docs/api/grid)
* [Ion Cards](https://ionicframework.com/docs/api/card)
* [Ion Segment](https://ionicframework.com/docs/api/segment)
* [Ion Modal](https://ionicframework.com/docs/api/modal)
* [Ion Icons](https://ionicons.com/)
* [React Context](https://reactjs.org/docs/context.html) to pass data down the component tree
* [React Hook State](https://reactjs.org/docs/hooks-state.html) to use state## :floppy_disk: Setup * Development
* Install dependencies using `npm i`
* Run `ionic serve` to open the dev server at `http://localhost:8100/`## :floppy_disk: Setup * Build, Android Studio
* Run `ionic build` to create build files
* If you don't have it already then Install Android Studio (on Windows 10 in my case * see 'Inspiration' for helpful video)
* Connect mobile device to Android Studio via USB. To go into dev mode on Realme 5 Pro mobile phone connected via USB to Android: Go to 'About Phone'/'Version Baseband & Kernal' in phone settings then click 7 times on 'Version' and enter phone access code. Go to Settings/Additional Settings/Developer options and enable 'USB debugging'## :computer: Code Examples
* `pages/AllProjects.tsx` Ion grid to show list of projects
```tsx
{projectsCtxt.projects.map((project) => (
![]()
{/* {project.time} */}
{project.title}
{project.description}
{!project.isFinished ? (
openFinishedModal(project)}
>
) : (
)}
))}```
## :cool: Features
* [Side navigation drawer](https://ionicframework.com/docs/api/menu)
## :clipboard: Status & To Do List
* Status: Working. Do not update dependencies.
* To-Do: Improve side menu - add pages?, change project complete button add more project types, change time to createdAt in footer? Add backend storage.## :clap: Inspiration
None
## :file_folder: License
* This project is licensed under the terms of the MIT license.
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: [email protected]