Tabs

Lost an item while travelling? We'll keep Tabs on it.

Comment

Inspiration

Losing items at airports is a common occurrence for travelers and is also especially devastating when they lose valuable items they will never see again. Customer support exists at airports, but at times, it can be unreliable as staff members are constantly busy. Thus, Tabs has been created to address this issue as it creates a community lost and found bulletin board app tailored towards airports.

What it does

Tabs is a web app structured like a social media app with a dashboard, a form for lost items, and a profile of the user. Before accessing the contents of the app, the user will need to log in with the credentials, for which their personal information and airline data are tied to. The dashboard contains users’ posts on their lost items with each post containing important information regarding their lost items such as description, location, and estimated time. The dashboard will also provide updates for when a lost item is found that matches the information and description inputted by the user, giving other users notices of items to look out for. Additionally, the form can be filled out by users, and posts of lost items are generated to be posted on the dashboard. The profile of the user displays their contact information, name, and items lost on the flight.

How we built it

We started by structuring our ideas into breakable down steps and assigned tasks to each team member. Afterward, we began by developing the front-end side of our website. For the users, we wanted to include an intuitive and simple design to navigate through our website with ease. We used HTML as the backbone structure of our website and all the contents were stylized with modern CSS. We followed a color pallet as a guide on how our website will look like for our users. For the backend, we structured a json.data file. Then we extracted the user information and user input using login.js and compared them together in order to verify login.

Challenges we ran into

We ran into a testing issue in which our login.js file was not able to read from the data.json file directly. Later, we managed to use the console to figure out the error code, which we did not think of at the time. After extensive searching to understand the error code, we came to understand that it was due to a browser policy called CORS (Cross-Origin Resource Sharing), which prevented us from directly accessing the json file locally. So, we had to set up an http-server to circumvent the policy. We also had a difficult time figuring out how to extract user data from data.json due to its format. As a result, we had to restructure the json file multiple times and implement a new for-loop statement. Connecting mongodb instead of a json file was a very difficult task to do in such a short time as part of figuring out the online database as a server-client response versus a local database. Part of the backend code is very raw and unconnected with the frontend as of the moment but given more time this can be fixed and working functionally.

Accomplishments that we're proud of

  • We made a functional UI that is user-friendly, both aesthetically and functionally.
  • We understood the necessity of having a database vs a json file in order to be able to update the application in an automatic way
  • We know how to implement the json web tokens to make a more secure application
  • We made a functional log-in page even though we ran into various problems that made the implementation very difficult.

What we learned

Over the course of building our project, we learned to effectively design and brainstorm our ideas to guide us through the development process. We quickly learned the fundamentals of web development which include HTML, CSS, and Javascript to bring our ideas to life. In addition, we realized the importance of version control when it comes to working in a group and efficiently distributing the work among our team members. Lastly, and most importantly, we learned to get creative and have fun through the lifecycle of our project.

What's next for Tabs

In the future, we plan to add the following features to Tabs:

  • GPS that shows items that are lost at certain locations
  • Chat/SMS system that notifies customers of their found items and allows them to talk to airport staff
  • Restructuring the backend with a functional database that can store and update user data permanently and create web tokens to improve security.
  • Adding pictures of the item for easier identification

Working username and password combinations

  • User: hma12, Password: qwerty123
  • User: nh23, Password: asdqwe123
  • User: yfv13, Password: 123Tbs
  • User: alanprz, Password: 1234
    The product looks best on mobile as the UI dimensions are catered towards them, so please view are product there.
+ 1 more
Share this project:

Updates