Table of Contents
- About The Project
- Getting Started
- Pages
-
Data Structure
- Collection
- Chatting Room
- CommunityItem
- HouseItem
- JobItem
- MarketItem
- User
-
Features
-
Market, Job, House, Community
- Read Items
- Read Item
- Post Item
- Delete Item
- Update Item
-
Chatting
- Send message
- send images
- read message
- unread message
- send notification
-
Auth
- Email Auth
- Google Auth
- FaceBook Auth
-
- Reflecting on the Project
The idea for this project originated from my experience in Melbourne. Living there as a student, I was able to meet a lot of international students and foreigners. They typically live in rental houses or share houses, necessitating frequent relocations. Additionally, Australia ranks among the top five most expensive countries globally, attracting many people to work from abroad. Most of these individuals seek various experiences, so they move often. Each move requires them to buy new furniture, which poses a significant financial burden for those trying to save money. I noticed that due to high living costs and frequent moves, many people often discard a lot of items and buy new ones. As a result, many people either avoid buying new items or inquire among acquaintances for used goods. Moreover, in such environments where many young people gather, I frequently encountered the need for communities to make friends. However, Australia still lacks representative communities that provide meeting opportunities for both foreigners and locals. Based on these observations, I found the potential of used goods and forming communities.
Developed by Hur HyeonBin (Max)
This section explains how to run this project. Since the project is implemented using React Vite, several commands are required.
npm install-> download node modulenpm run dev-> run react vite project- open
Local: http://localhost:5173/
-
The pages related to the item include the all items page, detail page, add page, and edit page.
Title Web images Mobile images Home page 
All items page 
Detail page 
Add page 
Edit page 
Nav bar 
-
From both my profile page and other user's profile pages, you can find the corresponding user's item. Additionally, clicking on an item card will direct the user to that specific item. Moreover, on my profile page, you can also find interested item.
Title Web Images Mobile Images My profile 
Other user profile 
Item card 
-
This project supports three methods of sign-up and sign-in: email authentication, Google authentication, and Facebook authentication.
Title Web Images Mobile Images Sign in 
Sign up 
-
If any errors are found, the program directs the user to the error page. The user can move to other pages using the navigation bar or by pressing the logo on the error page.
Title Web Images Mobile images Error page 
- add Item
To create an item, the user needs to be authenticated and access the add item page. When the user accesses the item page, they can add detailed information about the item, including images, title, description, price, etc. When the user creates an item, the images of the item are first stored in Firebase storage. Then, a function returns the URL for the images, and both the detailed information and image URL are stored in the Firestore database.
Once the user fills out the form and presses Save, they will see a confirmation modal to confirm the item. If the user presses Edit, they can return to the add item page. Once the user presses Confirm, they will see a spinner until the item is added. When the item is successfully added, the page will move to the corresponding item section and lead the user to view the added item.
>
- read Item
2.1 read collection
Once users access the website, user can view all items. By using the search bar and location selector, user can find specific items that are in the selected location and include text in the search text box in title and description.
2.2 read document
If user press a certain item in the item list, user can check the detailed information of the item. The url link includes the item's id, and the program leads user to the deatiled information about the item.
useParams(), and dynamic path are used to read a certain data. Moreover, to render the item detail page, and static path are used.
2.2.1 check other user's profile & start chatting
Once the user accesses the item detail page, user will be able see the author's information. When another user's avatar is pressed, a popup division appears, which includes a profile and a chatting button to either move to the user's profile page or start a chat.
- edit Item
Only the author is able to see the edit button in the item detail page. Once the author presses the edit button, author can move to the edit page, which includes all detailed information regarding the item. If the user edits the item, they can change the item's detailed information.
To edit an item, the item URL must be changed. Editing the item page requires multiple steps. There are several ways to edit the image URL; I chose to delete the old image and add a new one to prevent the storage from becoming too large. Firstly, check whether the images are already stored; if an image is not stored in the storage, it will be uploaded. Moreover, if the images in the storage are no longer used, they will be deleted. Once all progress regarding the storage is complete, a function returns all image URLs in storage, changes the image URL, and updates it. Titles, descriptions, and prices can also be edited.
- delete Item
Only the item's author is able to see the delete button in the item detail page. Once the author presses the delete button user can delete the item.
Once user press the delete button, the item's images in the storage will be deleted first, and if all images of the item are deleted, the item will be deleted from the firestore as well.
- like item
Once signed in, the user can press the like button on the corresponding item. If the user presses the "heart" icon, the "empty heart" will change to a "red heart"; otherwise, it reverts to an "empty heart." If the user likes the item, it will be added to their list of liked items, which can be checked from the user's profile page.
- like item
Once signed in, the user can press the like button on the corresponding item. If the user presses the "heart" icon, the "empty heart" will change to a "red heart"; otherwise, it reverts to an "empty heart." If the user likes the item, it will be added to their list of liked items, which can be checked from the user's profile page.
- comment
6.1 comment
Once user accessed to the item detail page, user can add some comment on to the item. To add item user must be authenticated, and type at least one character. If no characters are typed, the submit button is disabled. User also can delete and modify the comment by pressing delete and modify button on the comment
6.2 reply
If there is a comment, user can add reply to the comment. The reply section can be opened and closed. Once the reply section is opened, user can check the all replys. User also can delete and modify the replys by pressing modify or delete button on the comment.
### Chatting
- create chatting room
To create a chatting room, user must be in a item detail page. Once user accessed to the item detail model, the user can create chatting room using press the author avatar and press the chatting. If there is chatting room already between these user, the old chatting room will be opened, if not, a new chatting room will be created. The list of chat rooms that the user has joined can be found at the top of the page.
- send message
Once a user types at least one character, user can send a message to another user. If no characters are typed, the send button is disabled.
- send image
To send an image, the user needs to press the "image icon" at the bottom left of the chat room. Once the "image icon" is pressed, the user can select an image from their local device. A confirmation modal will appear, and then pressing the "send" button will send the image.
- receive message
If a user receives messages from another user, user can check the numer of received message from the left side of the corresponding chat room.
- read message
If the message is unread, a "1" will appear next to it in the chatroom. Once the user reads the message, the "1" will disappear.
- Email authentication
- Google authentication
- Facebook authentiation
To set location, user need to press the "Set location" button in the main categories page, and item add page. Once user press the "GPS icon" the location will be changed based on the corresponding user location, and press "update" button will changes user's location.
While planning the project, I wanted to cover all municipalities and suburbs, but it was challenging for me to find the same Melbourne location JSON data and the "nominatim.openstreetmap" API address. Users can change the location, but only suburbs in Melbourne city can be filtered.
When I started the project, I aimed to deploy this web service and wanted people in Melbourne to use this application in their real lives. However, while creating the application, I became aware of my shortcomings, such as filtering locations and reducing HTTP requests. Throughout the implementation, I learned a great deal and was able to troubleshoot many problems. I faced countless errors and spent a lot of time figuring them out, which enhanced my troubleshooting skills. My goal for this application is to deploy it within a year. I need to learn more about React and database management. I plan to switch the database from Firebase to AWS to reduce costs and improve network service quality.