feat(app): update design and functionality to match other conference apps and migrate google maps to leaflet (#133)

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

Author: brandyscarney

.github/CONTRIBUTING.md

@@ -0,0 +1,59 @@
+# Contributing to the Ionic React Conference Application
+
+Thank you for taking the time to contribute! :tada::+1:
+
+The following is a set of guidelines for contributing to the conference app. These are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.
+
+## Table of Contents
+- [Reporting Issues](#reporting-issues)
+  - [Before Submitting an Issue](#before-submitting-an-issue)
+  - [Determining the Repository](#determining-the-repository)
+  - [Submitting the Issue](#submitting-the-issue)
+- [Submitting a Pull Request](#submitting-a-pull-request)
+  - [Guidelines for Submitting](#guidelines-for-submitting)
+  - [Code Style](#code-style)
+
+## Reporting Issues
+
+Before submitting an issue, please go through [the list below](#before-submitting-an-issue) as you might find a solution to your issue.
+
+### Before Submitting an Issue
+
+* Make sure you get the latest version of the code and run through the [Getting Started](https://github.com/ionic-team/ionic-react-conference-app#getting-started) steps to see if this resolves your issue.
+* Check the [forum](https://forum.ionicframework.com) for similar questions and answers.
+* Go through [all issues](https://github.com/ionic-team/ionic-react-conference-app/issues?utf8=%E2%9C%93&q=is%3Aissue) on this repository to see if the issue has already been created. It could have been closed with a resolution, so check closed issues, too.
+* Chat with us on [Discord](https://ionic.link/discord) to see if we can find a solution to the problem!
+* [Determine which repository](#determining-the-repository) the problem should be reported in.
+
+### Determining the Repository
+
+There are several repositories being used for Ionic, which makes it difficult to determine which one to report an issue to. Don't worry if you aren't sure, we can always move it!
+
+* The [Ionic Framework repository](https://github.com/ionic-team/ionic-framework) is a repository for all things related to the Ionic Framework. If you are able to reproduce the issue in any of the Ionic starters (or an existing project), you'll want to submit the issue [here](https://github.com/ionic-team/ionic-framework/issues).
+* The [Ionic CLI repository](https://github.com/ionic-team/ionic-cli) contains all of the code that allows you to run `ionic` commands from a terminal window. It is safe to put any issues [here](https://github.com/ionic-team/ionic-cli/issues) that relate to running an `ionic` command.
+* **This repository** is a demo of the Ionic Framework. If you find an issue with this app that does not occur on [a new app](https://ionicframework.com/docs/intro/cli#start-an-app), please submit the issue [here](https://github.com/ionic-team/ionic-react-conference-app/issues).
+
+### Submitting the Issue
+
+* **Use a clear and descriptive title** for the issue to identify the problem. This makes it easier for others to find.
+* **Describe the exact steps to reproduce the problem** with as many details as needed.
+* **Provide your configuration** by running `ionic info` in a terminal from *within* the project folder and pasting this information in the issue.
+
+## Submitting a Pull Request
+
+### Guidelines for Submitting
+
+When in doubt, keep your pull requests small. To give a PR the best chance of getting accepted, do not bundle more than one "feature" or bug fix per PR. Doing so makes it very hard to accept it if one of the fixes has issues.
+
+It's always best to create two smaller PRs than one big one.
+
+Talk to us before creating a PR that refactors the code or directory structure of the project. This project is constantly changing to reflect the latest version of Ionic Framework so sometimes it will be in the process of getting fixed.
+
+### Code Style
+
+Make sure to follow the existing code style as much as possible.
+
+* No underscores prefixing JS functions.
+* Use flat Sass:
+  * **Don't** use [BEM conventions](https://css-tricks.com/bem-101/)
+  * Avoid nesting selectors. This is done to make it easier for users without Sass experience to understand and read.

README.md

@@ -1,62 +1,71 @@
-# Ionic React Conference Application
+# Ionic React Conference App
 
+[![Built with Ionic](https://img.shields.io/badge/-Built%20with%20Ionic-3880FF?style=flat&logo=ionic&logoColor=white)](https://ionicframework.com)
+[![React](https://img.shields.io/badge/-React-61DAFB?style=flat&logo=react&logoColor=black)](https://reactjs.org)
+[![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 
-This application is purely a kitchen-sink demo of the Ionic Framework and React.
 
-**There is not an actual Ionic Conference at this time.** This project is just to show off Ionic components in a real-world application.
+This is a **kitchen-sink demo application** built with **Ionic Framework** and **React**. It showcases a wide range of Ionic components and features in the context of a fictional tech conference app.
 
-## Angular and Vue versions
+**Note**: There is no actual Ionic Conference. This project is purely for demonstration purposes.
 
-We've built versions of this Conference app in Angular and Vue for developers that would prefer to use one of those framework options:
+👉 [Try the Live Demo](https://ionic-react-conference-app-git-main-ionic1.vercel.app/tutorial)
 
-https://github.com/ionic-team/ionic-conference-app
+## 🧱 Framework Variants
 
-https://github.com/ionic-team/ionic-vue-conference-app
+This app is also available in other frameworks:
 
-## Table of Contents
-- [Getting Started](#getting-started)
-- [App Preview](#app-preview)
+- 🔗 [Ionic Angular Conference App](https://github.com/ionic-team/ionic-conference-app)
+- 🔗 [Ionic Vue Conference App](https://github.com/ionic-team/ionic-vue-conference-app)
+- ✅ **You're viewing the React version**
 
-## Getting Started
+## ✨ Features
 
-* [Download the installer](https://nodejs.org/) for Node LTS.
-* Install the ionic CLI globally: `npm install -g ionic`
-* Clone this repository: `git clone https://github.com/ionic-team/ionic-react-conference-app.git`.
-* Run `npm install` from the project root.
-* Run `ionic serve` in a terminal from the project root.
-* Profit. :tada:
+- Browse conference schedule with filtering
+- View speaker bios and session details
+- User authentication and profile management
+- Interactive maps for venue navigation
+- Push notifications support
+- Dark/Light mode toggling
+- Cross-platform support: iOS, Android, and Web
 
-## App Preview
+## ⚙️ Getting Started
 
-### [Menu](https://github.com/ionic-team/ionic-react-conference-app/blob/main/src/components/Menu.tsx)
+### Prerequisites
 
-| Material Design  | iOS  |
-| -----------------| -----|
-| ![Android Menu](/resources/screenshots/android-menu.png) | ![iOS Menu](/resources/screenshots/ios-menu.png) |
+- Node.js (LTS version recommended) → [Download](https://nodejs.org/)
+- npm (included with Node.js)
+- Ionic CLI → Install globally:
+  ```bash
+  npm install -g ionic
+  ```
 
+### Installation
+1. Clone the repository:
+    ```bash
+    git clone https://github.com/ionic-team/ionic-react-conference-app.git
+    ```
+2. Navigate into the project:
+    ```bash
+    cd ionic-react-conference-app
+    ```
+3. Install dependencies:
+    ```bash
+    npm install
+    ```
+4. Start the dev server:
+    ```bash
+    ionic serve
+    ```
+5. Open your browser to:
+    ```
+    http://localhost:3000
+    ```
 
-### [Schedule Page](https://github.com/ionic-team/ionic-react-conference-app/blob/main/src/pages/SchedulePage.tsx)
+## 🤝 Contributing
 
-| Material Design  | iOS  |
-| -----------------| -----|
-| ![Android Schedule](/resources/screenshots/android-schedule.png) | ![iOS Schedule](/resources/screenshots/ios-schedule.png) |
-
-### [Speakers Page](https://github.com/ionic-team/ionic-react-conference-app/blob/main/src/pages/SpeakerList.tsx)
-
-| Material Design  | iOS  |
-| -----------------| -----|
-| ![Android Speakers](/resources/screenshots/android-speakers.png) | ![iOS Speakers](/resources/screenshots/ios-speakers.png) |
-
-### [Speaker Detail Page](https://github.com/ionic-team/ionic-react-conference-app/blob/main/src/pages/SpeakerDetail.tsx)
-
-| Material Design  | iOS  |
-| -----------------| -----|
-| ![Android Speaker Detail](/resources/screenshots/android-speaker-detail.png) | ![iOS Speaker Detail](/resources/screenshots/ios-speaker-detail.png) |
-
-### [About Page](https://github.com/ionic-team/ionic-react-conference-app/blob/main/src/pages/About.tsx)
-
-| Material Design  | iOS  |
-| -----------------| -----|
-| ![Android About](/resources/screenshots/android-about.png) | ![iOS About](/resources/screenshots/ios-about.png) |
+We welcome contributions! Please see our [Contributing Guide](.github/CONTRIBUTING.md) for details on how to submit pull requests, report issues, and contribute to the project.
 
+## 📄 License
 
+This project is licensed under the MIT [License](./LICENSE).

index.html

@@ -14,16 +14,14 @@
   <link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png" />
 
   <!-- add to homescreen for ios -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-title" content="Ionic Conference App" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 </head>
 
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
-  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmAwkv8-x2I--ne-NtA3C_4E_-xLCsFJs" async
-    defer></script>
 </body>
 
-</html>
+</html>