Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nayak-nirmalya/ionic-playground
Demo Ionic/Capactior App for Website, PWA, Android, iOS & Desktop.
https://github.com/nayak-nirmalya/ionic-playground
capacitor electron ionic react typescript
Last synced: 3 days ago
JSON representation
Demo Ionic/Capactior App for Website, PWA, Android, iOS & Desktop.
- Host: GitHub
- URL: https://github.com/nayak-nirmalya/ionic-playground
- Owner: nayak-nirmalya
- Created: 2023-05-28T14:35:55.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-05-29T05:58:44.000Z (over 1 year ago)
- Last Synced: 2024-11-21T20:30:38.658Z (2 months ago)
- Topics: capacitor, electron, ionic, react, typescript
- Language: TypeScript
- Homepage: https://ionic-pg.netlify.app/
- Size: 4.31 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ionic Demo App for Web, iOS, Android & Desktop
This repository shows various Ionic & Capacitor Features. Made using TypeScript, React, Vite, Ionic, Capacitor & Electron. Deployed to Netlify.
Tutorial Followed: [freeCodeCamp](https://www.youtube.com/watch?v=K7ghUiXLef8)
Instructor: [Simon](https://twitter.com/schlimmson)
Funcionalities:
- Ionic Slider to Show Sliding Components.
- Native Camera & Image Picker.
- Button Animation.
- Various Gesture.
- Pull Down to Refresh.
- In-App Screen Navigation with Gesture.
- Modern / Responsive Layout.
- Desktop Application with Electron Wrapper.
### Prerequisites
**Node ^= 16**
**Android Studio / XCode (Virtual Device Simulation)**
**VS Code (IDE)**
### Cloning the repository
```shell
git clone https://github.com/nayak-nirmalya/ionic-playground.git
```
## Running Project
To run your project, navigate to the root directory and run one of the following npm commands:
### Start the Web App
```shell
npm run dev
```
## Available commands
Running commands with npm `npm run [command]`
| command | description |
| :------------ | :------------------------------------------------ |
| `dev` | Starts a development instance of the web app |
| `build` | Starts a building final version for production |
| `lint` | Run lint check as configured in .eslintrc.js file |
| `preview` | Run final build production version |
| `npx:sync` | Sync all apps to final version |
| `run:android` | Run android app with hot reload feture |
| `electron` | Run the desktop app with electron |
## Screenshots
### Intro Card
### Register Screen
### Login Screen
### Logging In Loading Screen
### User Loading Skeleton Screen
### Home Screen
### Pull to Refresh Screen
### User Detail Modal Screen
### User Detail Modal DateTime Screen
### Sidebar Menu Screen
### Camera/Image Picker Screen
### Gesture with Animation Screen
### Desktop App with Electron
### Web App with Ionic, React & Vite
