ZotSell

• 

  Home Page

• 

  Account Creation

• 

  Add a listing

Inspiration

Our inspiration for our product came from scrolling through Instagram, Snapchat, and Reddit and seeing many items being listed for sale on these platforms by fellow Anteaters. We then thought that there could be an easier way to advertise these items to local Anteaters. We then came up with the idea of ZotSell, a platform for Anteaters to buy and sell items from other Anteaters.

What it does

ZotSell allows Anteaters to post listings of their items to sell and have other Anteaters look through the listings. To post a listing, the user would first have to create an account on the sign up page. The user then can add a listing which has them fill out a form asking for name of the item, condition, categories, price, and optionally a meeting location. The listing gets posted on the main page where listings can be sorted by price, conditions, categories, and search for specific items. When a listing is clicked on, it shows the product page which has a picture of the item, price, description of the item, condition, categories, and contact information.

How we built it

For the website design, we used HTML5 and CSS3 in order to create a visually pleasing design. For the backend, we used JavaScript as our language of choice to code our website. Firebase was used to manage our user login and signup. Google Cloud was used to store the listing data and pictures.

Challenges we ran into

Challenges that we ran into were sending data from the website to be stored and later recalled to the website, setting up the user creation for Firebase and password authentication, and how to produce the listing data to show on the product page. Because none of us had ever used Firebase before, we had to do some extensive research into the documentation and debug for long periods of time. It was a challenge to find a way to keep track of each listing that we receive from users and be able to return every one of them when the home page was displayed.

Accomplishments that we're proud of

Accomplishments that we're proud of are the creation of our home page, the beautiful login, sign up, and add listing pages. The form to add a new listing to the form is quite intuitive, and provides key information that people might need in engaging in a quick and easy transaction on campus. There is definitely potential for real-world use cases with ZotSell.

What we learned

We learned about the implementation of Firebase in a practical project with several moving parts. Using the Fetch API, we strengthened our skills in communicating from our front-end to back-end and back to front-end data structures. Additionally, making an extensive form like our add-listing form requires several different types of HTML input tags, such as radio, checkbox, textarea, and even file uploads. It is essential to use the best type for a given job in order to make the data collection as efficient as possible.

What's next for ZotSell

To make our application widely accessible and intuitive, there are a couple more features we seek to add past the conclusion of HackUCI. We hope to give users the ability to edit their listings and even generate a profile where other users can view what they have sold in the past. For convenience, we could even implement a chat feature using an API that would allow instantaneous contact through our website -- no phone numbers required!

Built With

• css3
• firebase
• google-cloud
• html5
• javascript