Lost and Found Webpage

Inspiration

We have seen many people post on Snapchat about losing their UCards or dorm keys, but it isn't an efficient way to help find lost items. Snapchat stories have limited time and most people don't even check the app or it gets unnoticed due to many other posts. Our webpage will help people easily find their lost items and others can help them find it too since it is specific to the issue at hand.

What it does

The webpage receives user input when the person logs in using email, username, password and phone number. Then, the person can report a lost item and/or view the lost items list. To report a lost item, you have to input name of the item, description and your contact info. This will store your lost item in the lost items list. You can also help others by reporting that you found an item and attaching a photo, item name and contact info. The item you found will be in the found items list. You can also log out from your account.

How we built it

We built it using VScode and GitHub, along with programming languages, Python, JavaScript, CSS and SQL. We made files and folders using the terminal and starting the backend programming in VScode. The frontend was done using GitHub codespaces and using HTML for the main page, with using CSS to style the page and JS to handle forms and storing data.

Challenges we ran into

We had troubles with event listeners and making sure they were actually working as expected and to solve this we had to simplify our code and tests certain components. Initially, we had issues storing data, but then we decided to store it in LocalStorage due to the limitations of cookies. The most difficult part was integrating the frontend and the backend because there were a lot of errors and the files and code weren't recognizing the other files.

Accomplishments that we're proud of

We made a functional webpage with buttons that direct to different pages and back, which also take user inputs and saves and stores them in list and database using Local Storage to avoid lists changing when webpage reloads. We did full-stack development and overcame many bugs and got better at debugging code.

What we learned

We explored how routes manage data flow between the backend to the frontend. We learned about integration and how to join the backend and frontend. We learned programming languages like SQL and CSS. We learned about local storage which helped store the data from user inputs and save them on our webpage without losing it due to reloading.

What's next for Lost and Found Webpage

We will remove items that have already been found from the list so that confuse anyone. We will make sure that you can always navigate back to the home page regardless of which different pages you are in. We will also have an option of adding a photo when reporting a lost item.