ajm-gov / realestatecare

This is my first Vue Project for the front-end development courses I'm taking. It's a fictional case for an agency that does inspections, repairs, etc. for real estate agencies. This app is going to be the prototype for their Single Page Application. Vue is going to be the leading framework here, with a cheeky bity of Tailwind CSS as well.

Real Estate Care Estate Management Application

Real Estate Care is a fictional company as part of a final assignment for my Front End Development. This application is a mobile application, and mimics a mobile app that is used to maintain inspections for a Real Estate Company. It has a couple of key functionality pieces:

1. Authentication: since this is a prototype, it only has authentication in the visual sense where you can login to access content. Authentication in this app is not safe or secured in anyway and for demo purposes only.
2. Overview of completed jobs: You can access completed jobs based on an API response from a JSON file under db.json, utilizing my-json-server.typicode to mimic API functionality
3. Execute scheduled jobs: ability to execute an inspection job based on 1 of 4 job types: Damage, Maintenance, Modification or Inspection. Overview of jobs that are scheduled and ability to execute them.
4. Knowledge base: prototype of what a knowledgebase would look like
5. Settings section: prototype of what a settings overview would look like

Libraries/Frameworks used

This application is based on Vue, Ionic (https://ionicframework.com/), TypeScript and Capacitor (https://capacitorjs.com/). Application is deployed to Vercel, and can be accessed under https://realestatecare.vercel.app/auth/login.

Installing the project

Once you've cloned this repo, cd into the correct folder (cd realestatecare in your terminal), and then run the install command using npm install in your terminal. This will build out all dependencies in the untracked node_modules folder.

Setting up your .env file

Next step is to set-up your .env file, which will contain all of your environment variables. Currently the project uses 1 environment variable:

VITE_JSON_DB_BASE_URL

This is the variable used to set a base URL for the my-json-server.typicode. By default, this should be set to "https://my-json-server.typicode.com/ajm-gov/realestatecare". This will automatically pick-up on the db.json file into the root of your project.

Running a local instance

In order to run your application locally, we are using ionic serve. This will run the application on http://localhost:8100, where you can access your local instance.

Authenticating

When starting the application, you will be faced with a login screen. This authentication is super basic, it checks for a user in db.json and see if the password matches. If you want to log in to the application, you can login with one of the following credentials sets:

[email protected] lookthisisapassword123 146589

[email protected] lookthisisapassword123 232342

Unfinished Parts

If using this project, the following should be kept into consideration.

Authentication

Please keep in mind that the implemented authentication is NOT PRODUCTION READY. This is purely for demonstration purposes. The authentication process checks for the existing users in db.json, and see if the password, email, and authentication code matches. 2 Factor Authentication is not dynamic and just a pre-set numeric code. Any API responses regarding logging in are exposed in the console as well as in the network requests.

Executing Scheduled Jobs

The form submissions are not actual form submissions. It mimics a form submission but the form is not posted to any database or service, and once again is just for demonstration purposes. Form submissions will not alter the db.json in anyway and does not have any purpose besides giving a demonstration of what the eventual end product would look/act like.

Settings

The settings are just for demonstration purposes for the User Interface, and do not take any affect to the application at this point

Knowledge Base

Knowledge Base has some sample content and all Knowledge Base Article Cards lead to 1 Knowledge Base Article that is used as a demonstration. Future state would be integrated with a headless Content Management System so that Knowledge Base Articles could be managed there.

Usability

Confirmation/Error actions

Thanks to the ToastController of Ionic, I implemented various points in the application to give user feedback based on interaction. Think about confirmation/error actions at login, form submission, etc.

User Control and freedom

I found it important to add an easy way out in my application. I introduced the "ExitComponent" in my application, a simple reusable component to exit a current state of the app to a desired path. For example, when working on a scheduled job, at the top you can easily access the previous screen. Same for the knowledge base, it offers an easy way to go back to the home screen.

Consistency and standards

By using Ionic, there is a lot of consistency between the used components, styling is coherent across the application.

Error handling

All errors that could occur from retrieving/posting API calls are caught in the console for debugging.

WCAG 2.1 Guidelines

Thanks to the use of Ionic as a framework, a lot of the WCAG 2.1 Guidelines have been implemented at the start of the application. Aria labels and roles have been assigned to the various elements within the web application. Google Lighthouse Accessibility Mode has been used to assess the Accessibility Guidelines and current implementation of the application seems to pass all Google Lighthouse Accessibility Checks.