Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wooiseong/ksh-project-origin-webpack
This is a website where you can search hostels located in Kaohsiung, Taiwan.
https://github.com/wooiseong/ksh-project-origin-webpack
aos axios bootstrap javascript sass
Last synced: about 1 month ago
JSON representation
This is a website where you can search hostels located in Kaohsiung, Taiwan.
- Host: GitHub
- URL: https://github.com/wooiseong/ksh-project-origin-webpack
- Owner: wooiseong
- Created: 2024-12-17T04:25:12.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-26T14:55:00.000Z (about 1 month ago)
- Last Synced: 2024-12-26T15:33:11.233Z (about 1 month ago)
- Topics: aos, axios, bootstrap, javascript, sass
- Language: CSS
- Homepage:
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :house_with_garden: KSH hostel :house_with_garden:
This is a website built with Javascript, Bootstrap and SASS. Users can search all Kaohsiung hostel informations, register and change profile picture and password.
Demo here :point_down:
## Project View
Desktop (1366px)
You can click on this link to view more pictures :point_right::point_right::point_right:
KSH hostel
## Features
| Components | Description | URL |
| :--------------------------: | ------------------------------------------------------------ | -------------------- |
| Home | 1. Users can either key in hostel name or select region to search
2. If the search result is failed, the users will be reminded
3. Links to registration or login are provided in the navigation bar | /home.html |
| Login | 1. There is a toggle between login form and register form
2. If the input is invalid, the form submission is prevented and users will be reminded
3. Users will be directed to Home page after successful login or login form after registration
4. The navigation logo is replaced with users' profile picture if it exists | /login.html |
| Account | Section A: Change profile picture
1. Users can change a picture in JPG, JPEG, PNG or ICO format
2. A preview is displayed if the picture format is valid
3. A cancel button and a upload button are provided for users to remove the preview or submmit the picture to the backend.
Section B: Change password
1. If the input format is invalid, the form submission is prevented
2. Users will receive feedback from the backend after submission | /account.html |
## Tools
1. Designs ( Bootstrap + SASS )
2. Building tool ( Webpack )
3. Storage ( localStorage )
4. Validation ( Bootstrap validator + jQuery validate )
5. HTTP request ( Axios )
6. Backend ( External APIs )
7. Deployment ( Vercel )
## Bugs/Future plans
1. After users logged in, the navigation logo should be replaced with users' profile picture. The replacement takes 1-2 seconds when the page is refreshed. The desired effect should be: the picture is directly rendered when the page is refreshed.
## Installation
Please follow the instructions to get a copy of this project.
### Prerequisites
* npm
### Clone
```sh
git clone https://github.com/wooiseong/portfolio-project-vercel.git
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Contact
* Email: [email protected]