A centralized platform for users to buy, sell, exchange, and donate goods and services within campus community. We utilized React.js as well as Firebase in order to allow users to post products to be stored in the Firebase storage. These stored products can be seen by any logged in Augustana User in order to be potentially bought by them.
Buyer: Augustana Student logs in through Google Authentication, this student searches an item they are interested, they click on the item. Once they click on the item, the student can see the item's details and then chat the seller if they are interested.
Seller: Augustana Student logs in using Google, this student goes to the posting page and posts details about their item. They can then wait for buyers to see and chat them about their item.
Click this blog here to gain an overview of our process of building this web app overall.
- React: A JavaScript library for building user interfaces.
- React Router: Used for navigating between different screens in the application.
- JavaScript: The programming language used to build the application.
- Firebase: A platform that provides backend services such as authentication and cloud storage.
- Firestore: A NoSQL database provided by Firebase for storing and syncing data in real-time.
- Storage: Used for storing user-generated content like images and files.
- Query: Implemented for the search bar filtering functionality.
- Google Authentication: Used for authenticating users via their Google accounts.
- React OAuth Google: A React library for Google OAuth2 login.
- CSS: Used for styling the application.
- Notification: Implemented for notifying users about important events.
- React Toastify: A React library for building customizable notifications.
- State Management: Managed using Zustand, a small, fast and scaleable bearbones state-management solution.
- Successfully implemented user authentication using Firebase and Google OAuth.
- Built a real-time chat feature using Firestore for data storage and synchronization.
- Implemented a search bar feature that filters results in real-time.
- Created a responsive and user-friendly interface using React and CSS.
- One of the main challenges was implementing real-time data synchronization for the chat feature. It required a deep understanding of Firestore and its real-time capabilities.
- Managing application state was also challenging. Zustand was used to overcome this challenge, but it required learning a new library.
- Implementing user authentication with Google OAuth was a new and challenging task. It required understanding the OAuth protocol and how to integrate it with Firebase.
- Gained a deeper understanding of Firebase and its services like Firestore and Authentication.
- Learned how to use Google OAuth for user authentication in a React application.
- Improved skills in state management in React applications using Zustand.
- Learned how to implement real-time features in a web application.
- Rating Sellers/Experience: Implement a feature that allows users to rate their transaction experience, providing feedback on sellers and enhancing trust within the app community.
- Enhanced Safety Measures: Develop additional safety measures to ensure the app is a secure platform for trading goods and services.
- Advanced Search Function: Improve the search functionality to allow more precise and efficient searches.
- Filtering Options: Introduce filters for price, category, and seller rating to help users find what they're looking for more easily.
- Favorite/Saved List: Add a feature that allows users to save or favorite items, making it easier to revisit them later.
- Advanced Chatting Feature: Enhance the chat feature with more functionalities like file sharing, emojis, etc.
- Location Sharing: Implement a location sharing feature to facilitate meetups for transactions.
- Payment Feature: Integrate a secure payment gateway to allow transactions directly within the app.