Ionic TypeScript Demo App

A fully-featured Ionic + TypeScript demo application showcasing core Ionic components and mobile UI patterns. Designed as a reference project for developers to explore Ionic framework capabilities in a real-world style app.

⚠️ Note: This project is a demonstration only. There is no actual conference associated with this app.

---

Table of Contents

• Overview
• Tech Stack
• Getting Started
• UI Components & Use Cases
• App Preview
• Deployment
• Project Structure

---

Overview

This project demonstrates:

• Mobile-first responsive UI with Ionic components
• Modular TypeScript architecture
• Integration of common UI patterns: tabs, modals, menus, slides, alerts, and more
• Use of Angular HTTP services for fetching JSON data
• Custom theming using Sass (SCSS) variables

The app includes pages for schedules, speakers, sessions, account management, and tutorials.

---

Tech Stack

• Framework: Ionic Framework v5+
• Language: TypeScript
• UI/UX: Ionic Components, SCSS, responsive design
• Data & Services: Angular HTTPClient for JSON and provider-based services
• Platform Support: PWA, iOS, Android

---

Getting Started

Prerequisites

• Node.js v14 or higher
• Ionic CLI installed globally:

npm install -g ionic

Installation

1. Clone the repository:

git clone https://github.com/karianne50m/ionic-conference-demo.git

2. Install dependencies:

cd ionic-conference-demo
npm install

3. Run the development server:

ionic serve

The app will open in your browser and automatically reload when changes are detected.

---

UI Components & Use Cases

This demo highlights the following Ionic components and patterns:

Component	Example Page
Action Sheet	Speaker List
Alert	Schedule
Cards	Speaker List
Datetime Picker	About
Grid & Layout	Login
Inputs & Forms	Login
Sliding Items	Schedule
Menu	App Template
Modal	Schedule Filter
Searchbar	Schedule
Segments	Schedule
Slides	Tutorial
Sticky Headers	Schedule
Tabs	Tabs Page
Toggle	Schedule Filter
Angular HTTP JSON	Conference Data Provider

---

App Preview

Try it live

• Schedule Page

  

• About Page

  

More screenshots are available in the resources/screenshots directory.

---

Deployment

Progressive Web App (PWA)

1. Build production files:

npm run ionic:build --prod

2. Deploy the www folder to your hosting service.

Android

ionic cordova run android --prod

For Android 4.4 or below, add Crosswalk:

cordova plugin add cordova-plugin-crosswalk-webview

iOS

ionic cordova run ios --prod

---

Project Structure

ionic-conference-demo/
├─ src/
│  ├─ app/                  # Main application modules and bootstrap
│  ├─ assets/               # Fonts, images, and JSON data
│  ├─ pages/                # App pages: about, account, schedule, speakers, tutorial
│  ├─ providers/            # Angular services for data handling
│  └─ theme/                # SCSS theme variables and styles
├─ resources/               # Screenshots and media assets
├─ www/                     # Production build output
├─ package.json              # NPM dependencies
├─ tsconfig.json             # TypeScript configuration
├─ ionic.config.json         # Ionic CLI configuration
├─ config.xml                # Cordova configuration
└─ README.md                 # Project documentation

---

Contributing

Contributions are welcome! Please follow standard practices for Ionic projects and submit issues or pull requests.