Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Apr 18, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
7612cd5
fix(app): properly navigate between pages and resolve console logs
brandyscarney Apr 15, 2025
188500b
revert navigation changes
brandyscarney Apr 16, 2025
84d1c11
fix(account): update design to match angular conference app
brandyscarney Apr 16, 2025
4aef0f0
chore(): add vercel json
brandyscarney Apr 16, 2025
3276ed1
Merge branch 'main' into bc/fix-navigation
brandyscarney Apr 16, 2025
46b0a76
refactor(app): migrate google maps to leaflet
brandyscarney Apr 16, 2025
3208191
style: lint
brandyscarney Apr 16, 2025
a1cc5ae
chore: remove unused file
brandyscarney Apr 17, 2025
4cf4cd0
fix(session-list): properly show time end
brandyscarney Apr 17, 2025
e49d4d8
fix(sessions): sort by time
brandyscarney Apr 17, 2025
9198535
fix(app): change all Angular references to React
brandyscarney Apr 17, 2025
9c44d56
data
brandyscarney Apr 17, 2025
9fe5c40
fix(react): hide detail in ios
brandyscarney Apr 17, 2025
67f1f80
docs(): update readme and add contributing
brandyscarney Apr 17, 2025
b25158b
docs: link to license
brandyscarney Apr 17, 2025
1bbbe10
chore: MIT license
brandyscarney Apr 17, 2025
be76f70
chore: remove google maps
brandyscarney Apr 17, 2025
5384f63
fix(map): load markers in vercel
brandyscarney Apr 17, 2025
ed44311
docs(contributing): readme url
brandyscarney Apr 17, 2025
7f57b8c
fix(map): markers
brandyscarney Apr 17, 2025
dadc252
chore: remove old dep
brandyscarney Apr 17, 2025
7bdc4dc
fix(tutorial): scroll to the first slide and remove the border
brandyscarney Apr 17, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -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.
97 changes: 53 additions & 44 deletions README.md
Original file line number Diff line number Diff line change
@@ -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).
6 changes: 2 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading