Overview:

Tech Stack:

Nativewind CSS, Expo, React Native, Node.js, Firebase

Size:

20,000+ Lines of Code & 20+ Mobile Pages

Dates:

August 2024 - January 2025

Summary:

Trading sports cards is one of my favorite hobbies. I had already completed a project within that space but I realized that it wasn't providing a service people really wanted. As a result, I spent a couple of weeks speaking to people in the sports card community about their biggest problems. The large majority (> 90%) said that their biggest problem is how much money they lose from seller fees. Ebay, by far the most popular trading card marketplace, charges sellers a 13% seller fee. However, the rate is closer to 16% because ebay applies the fee to the total final sale price which includes shipping (~$5) and sales tax (an extra 7%). As a result, I wanted to make a no seller fee marketplace for the sports card and collectibles community. I decided to start with the app component because most people in the community interact with marketplaces on their mobile device. The project is extremely large and it is not yet completed. I have stopped working on it to pursue other projects and an internship for the summer since working on the project any longer would have only been practical if I wanted to turn the app into a startup which I am not willing to do with a year and a half left before completing my degrees. I used React Native for its flexibility in working on both Android and IOS devices, Expo to provide filebased routing and a development environment, Node.js because of its widespread use and scalability, and Firebase for its ease of use. I also added NativewindCSS to help streamline CSS design.

User Auth:

User Flow:

Users are able to navigate the Home and Search pages without creating an account. However, the Seller, Collection, and Profile pages are locked and display a Sign In/Sign Up director similar to the one shown. Allowing users to access portions of the app without authenticating improves user retention and user activity.

Modal Design:

The Auth pages feature a slide show up top of various sports cards and a modal at the bottom prompting the user's account information. Adding the slideshow creates a more dynamic and engaging Auth pages which are normally mundane.

Onboarding Balance:

Converting users to accounts requires a delicate balance to collect enough information without overwhelming the user. For a marketplace app, accounts require a lot of information to process payments, create shipping labels, and recommend listings. My method of balancing this is to allow users to create a non-seller account that doesn't require payment and shipping information.

Stripe Connect:

To handle the intensive processes needed for online selling, I integrated Stripe Connect to handle account onboarding, payment processing, and seller payouts. Upon clicking 'Create Seller Account', the user is directed to a page that seamlessly integrates Stripe using a WebView.

Auth Screen Photo

Home:

Discovery:

A problem with existing marketplaces is their lack of listing discovery. I noticed I never go on eBay to browse sports cards and that was a result of their home page containing a lot of other information besides new listings. I took the most engaging discovery design I knew, the TikTok and Instagram Reels' paginated vertical ScrollView, and adjusted it to fit marketplace listings.

Modal 2:

Another balance to strike in the design of this app was with how much of a listing's information to display. You do not want to overload the user with text but need to provide enough to interest them. My solution was a collapsable modal that contained all the listing's information as well as the seller's information. To expand the modal, the user taps on the up arrow/listing title section and to collapse it, I enabled swipe and tap on background to dismiss.

Messaging:

Messaging users to negotiate deals and discuss product description is a necessary component of any marketplace app. I created my own messaging system in-house by managing a 'conversations' collection in Firebase. The data index was created by sorting the 2 conversing accounts alphabetically and then joining them with a '_'. Additionally, each index contained an array with both participant's id so that fetching a user's conversations is efficient.

Home Screen Photo

Search:

Trending:

Relating to my previously stated qualms on listing discovery, another feature I added to improve it was a trending page. This page contains the hottest listings by various metrics such as most number of bids, most likes, and highest bid.

Search:

To implement a search function, I integrated Algolia Search directly into my Firebase collections. Search history (both terms and accounts) is stored in a user's account information and search terms autofill when typing, a feature integrated from Algolia Search.

Results:

The results are fetched from Algolia Search and displayed in a standard vertical list format. There is a reason this implementation is widespread and there was no reason for me to reinvent the wheel here.

Filtering:

Algolia also handles various filtering and sorting methods by creating duplicate indices. Users can sort metrics such as price and number of likes and can filter by price, condition, and listing type. The sold parameter is designed to allow users to check previously sold items to get information on the value of an item.

Home Screen Photo

Selling:

Dashboard:

This is a concept design for the seller dashboard I had envisioned. Providing sellers with clear data allows them to better understand their products and market. From the Seller Dashboard, sellers see their biggest sales of the week and monthly sales totals. In addition, they can manage all of their listings and orders. Promoting orders is one of the main avenues of revenue for the app and this is where users would have the ability to do so. Promoting costs are structured the same way eBay's are where the promotion is a certain percentage of the sale. This way we as a marketplace and the seller are working in tandem to sell the item.

Create Listing:

I found that eBay and other marketplaces have rather mundane and boring Create Listing pages that are just a long list of fields. I designed this page to appear similar to how the listing appears when published with the images, title, description, and price fields in the same location as the published listing page. Different item catagories have different additional "Detail" fields that the user can optionally fill out. The app supported both fixed and auction listings and allowed sellers to choose if buyers could make offers for their item. Shipping costs are determined by the seller. Variable shipping is calculated based on USPS rates and fixed shipping is a flat fee that the buyer pays for shipping (supports free shipping if fixed shipping cost is 0).

Home Screen Photo

Collection:

Vision:

I have not started the Collection tab because it is a non-essential part of the app. I would only start working on the collection tab once the rest of the app is fully functional. The vision for the tab is provide users the ability to track cards that they own and to automatically add or remove cards if they buy or sell them on our platform. Collections would be publicly available for other users to see to create a more social aspect of the app. This would allow users to track down cards they are searching for that they otherwise wouldn't. By purchasing a premium subscription, users could make their collections private and message other users about their collections (subscription benefits similar to LinkedIn Premium). Collection values would be tracked using a similar pricing algorithm to the one I developed for Kryptos.

Profile:

Profile:

For the main profile page, I took inspiration from Instagram and Spotify. The Instagram insperation is rather apparent but the idea to overlay the username onto a user picked banner came from Spotify's artist profile pages.

3 Tab ScrollView:

Below the profile header is a 3 tab horizontal scrollview that contains the user's active listings, sold listings, and reviews. I thought this was a clever solution to fit all of a seller's pertinent information in a small space.

Settings:

The settings tab is where the user can interact with their account details such as their current funds, saved addresses, and transaction history. This is also where users can select to sign out of their account.

Edit Profile:

Users can change their username, personal name, profile picture, and banner image on this page. To select photos for the banner and pfp, I used Expo Image Picker.