Urban Haven Rentals frontend

Information Systems: Rental ads board

Frontend repository by 21321108 Huang Yiyu

Backend repository (in development) also by 21321108 Huang Yiyu

Tech Stack

This project is built with Vue3 + Vite + TypeScript for the ease of responsive programming and debugging. The atomic CSS library Tailwind is implemented for readability of the codes.

Disclaimer

To keep this lab work meaningful and make myself more familiar with Vue programming, I hereby guarantee that:

All views and components in this project are built without any component libraries (such as Element Plus) or any help with AI (such as ChatGPT).

The dependencies can be seen in packages.json.

Features

Click to view screenshots

NEW EXTRA POINTS UPDATE

Search

• LEFT: Searching a keyword 'as'
• RIGHT: Searching a keyword which no ad contains

Chat

• LEFT: A user receiving a text message from the user on the right
• RIGHT: A user sending a text message to the user on the left

• LEFT: Register view
  
• RIGHT: login view with token expired message

Ads list with pagination,

• LEFT: Page 1, wide window layout
  
• RIGHT: Page 2, narrow window layout

Ad details view,

• LEFT: Wide layout
  
• RIGHT: Narrow layout

Manage ads view,

• LEFT: Admin viewing ads posted by herself (with an switch to manage all ads), wide layout
  
• RIGHT: Average user viewing ads posted by himself, narrow layout

Editing ads view,

• LEFT: Admin editing ads posted by others, markdown preview on, attaching 9 images (limit), wide layout
  
• RIGHT: Average user posting an ad, markdown preview off, attaching 2 images, narrow layout

• LEFT: Editing user info with an error message about inconsistent new password & confirm password
  
• RIGHT: Attempting to delete his own account, with a warning dialog

Mouse floating on avatar area,

• LEFT: Admin with a "Manage users" option
  
• RIGHT: Average user without the option

Admin managing users (with pagination),

• LEFT: Upgrading 'horace'(on the right) to Admin
  
• RIGHT: Admin resetting other user's password

• I have tried my best to make the UI style of this project as close as possible to Google's Material You. The result turned out to be pretty well, at least to me🥰.
• All HTTP requests have a visual feedback, like a progress bar, or a top bullet message, or both. This makes the user feel way better when there is are requests ongoing.
• Login & register with common error handlers. User info include username, password, avatar, and email.
• Board Homepage ads list and pagination, with a responsive layout: 3-col grid when wide & 2-col grid when narrow. 6 ads per page.
• Post or edit an ad in post view, with a responsive layout: horizontal when wide & vertical when narrow. The ad detail info supports rich text via Markdown. You can preview the compiled markdown as you type. Each ad can attach up to 9 images.
• Manage personal ads in a dedicated view. Admin can manage all ads, with a switch component allowing to switch view. Each ad can be edited or deleted.
• An admin can manage all users in a separate view, unseen to average users. In this view, an admin can upgrade/downgrade other users to/from admin, or delete a user, or reset a user's password to 12345. All users are shown in a list with pagination, 20 per page.
• One can edit his account information in a separate dialog view, including username, email, password, and avatar image.
• One can log out or delete his account.

Extra points

• One can search ads by keyword.
• One can have an instant chat with another user via clicking the message button in post details. When the receiver is not in the chat view, then he/she will receive a pop-up message on the upper-left corner.

Development

Dependencies

npm i

Dev

npm run dev

Build

npm run build

ESLint

npm run lint