Skip to content

QuickPark-Monash/quickpark-monash-mobile

Repository files navigation

🏆 Competition results 🏆

We have been placed top 6 in the Junior Category of the QuickHack out of 200 total participants. Unfortunately we did not manage to get top 3, which I believe are due to a variety of reasons stated below.

🙍 We did not do enough research on how to execute our idea with regards to collecting data for ML
😔 We were too tired trying to setup the backend of the project and did not give much thought to the actual final pitch presentation
😭 We did not understand the competition requirements well leading to us losing quite a lot of marks

🎉 QuickPark v1.0 🎉

We are proud to announce that we have made a lot of frontend and backend changes throughout these few short days. Regardless if we win or lose, it is a project that we are proud of. We will be categorizing both frontend and backend changes below.

🖥️ UI/UX Improvements

🌹 Added new and improved sign up and sign in page
🌻 Added skeleton loading when retrieving data from servers
🌺 Better Reservation History selection screen
🌼 More meaningful error messages instead of "Oops, something went wrong!"

⚙️ Functionality Improvements

🍀 A solid backend that allows you to actually sign in and sign up via authentication and verification
🍁 Unique booking history corresponding to logged in user
🍂 Able to book parking spots according to availability and user input
🌱 Able to check into parking space according to QR Code
🌵 Dynamic pricing shown during booking

📯 Tech-Stack

🔰 Angular, JavaScript, SCSS and HTML
🔱Firebase

QuickPark Website Viewing Info

Welcome, to start off, we are currently hosting the webpage on GitHub Pages, here https://quickpark-monash.github.io/quickpark-monash-mobile/ Before you navigate the website, we need you to do some adjustments to your desktop internet browser. If you are currently on your mobile phone, please skip to this section.
THE BEST WEB APP EXPERIENCE IS THROUGH YOUR MOBILE DEVICES BROWSER!

Viewing on your desktop internet browser

Step 1: Opening Google Chrome Developer Tools

Press Option + ⌘ + J on Mac products, or Shift + CTRL + J on Windows to open up the Google Chrome Developer Tools. You should see something like below.

 


Step 2: Changing your device size

Now, on the top left corner, you should see a tablet and phone icon. Clicking this icon will allow you to change the size of your screen as if you were viewing the website on that particular device. When toggled, you should see the icon glow in blue like so. Your screen will shrink, but that shouldn't stop you from continue reading.

 


Step 3: Adjusting the correct phone model

The webpage built is currently adjusted to look good on most *cough* of the mobile devices in the selection option. It started off with the iPhone X model, but was soon responsive enough to handle different android and iPhone models as well. You should see something like so. Then, you can click on the dropdown menu right by the phone model to change it. Make sure to set it to iPhone X.

 


Step 5: Visting the webpage

Click on the link above and enjoy the webpage! Details about the webpage will be further down the section.

Viewing on your mobile device

If you are currently, on your mobile device, good! We tested that the best app experience is by using your mobile phone. For your convenience, scan the QR Code below to directly navigate to our website. You may also use the initial link on your mobile browser. Since not much testing as been done, we cannot guarantee absolute responsiveness for every device. If positioning seems out of place, remember to view the website through your browser using the steps above.

Cloning the repository

If you've chosen to look at how the insides of our web application works, the process is fairly simple.

1. Run npm install -g @angular/cli to install Angular on your local device using your terminal.
2. Next, run git clone https://github.com/QuickPark-Monash/quickpark-monash-mobile.git to download the files to a directory.
3. Then, run npm install to install all the required dependencies.
4. Run ng serve to host your Angular project locally, make sure you're in the project directory
5. By default, the webpage should load at localhost:4200, follow the steps above to change your Google Chrome device size for optimal surfing.

Trying out the QR scanner page

This is an example of a QR code that will lead to a valid scan. As of now, a valid scan just means a parking space that has not been booked or occupied by any other users.

Any other forms of invalid QR code that our backend does not handle will give you an invalid error pop-up window.