• Chuanyue Shen
• Wenshan Xiong
• Jerry Nie
• Zewei Long
• Tiancheng Jiang

1. Introduction
2. Design and functionality
3. User flow
4. Backend implementation
5. Frontend implementation
6. Getting started locally

We initialized the Flea Illinois application in observing the increasing demand of saving money and rising awareness of environmental sustainablility. Flea Illinois is a second-hand exchange platform, which aims to offer better experience that cannot be fulfilled by the available applications in the market. Currently, Flea Illinois focuses on serving Champaign-Urbana students and residents. The application may be extended to other regions when applicable.

We assessed the current available applications in the market to supplement our study in designing the functionalities. eBay is one of the biggest platforms for second-hand businesses, but it does not provide user verification that inreases the chance of fake information, nor does it provide convenient local transactions that increase the money spending on mailing. For some local second-hand groups, for example, the Free & For Sale UIUC Facebook group, they do not verify user information as well. Besides, functions like item searching are not user-friendly.

Based on the assessment as well as considering the user experience, we designed four core functionalities in resolving the problems encountered in current applications:

• User verification: New users' identifications will be verified by their email addresses and assigned a verification tag accordingly, which is visible to everybody. Students with univerisity email addresses are assigned an "verified" tag. Local residents are also welcome to use this app but are assigned an "unverified" tag initially until their identities and residences are confirmed. This verification function allows our users to buy, sell, and exchange more transparently, reducing the chances of scam and/or deceived information.

• Easy post and update: Registered users can post their items on the Flea Illinois webpage with clear instructions. The post will not be approved if missing information. Product photos can be uploaded and are highly encouraged. When the items are sold, users can mark the product status as sold, which will no longer be shown as available.

• Simple search and view: Users can browse available items in the gallary and also search specific items by keywords. The returned list of items can be sorted by price and/or released date in ascending or descending order. When an item is clicked, detailed informatioin about the product will be displayed.

• Message board: Registered users if interested in the products can leave messages in the message board at the product details page. The sellers can reply and answer any questions accordingly. This functionality offers a seamless interaction between the buyers and the sellers without disturbing the private contact information before making purchase decision.

• Responsive Design: This app has been tested with screen resolutions 1920 x 1080, 1366 x 768 and 1280 x 720.

This is not the hosted page of our project, this is only for backend.

Database service:

• MongoDB Atlas

API framework:

• Node
• Express
• Mongoose

Here is the User Schema:

1. "name" - String
2. "email" - String
3. "verified" - Boolean
4. "phoneNumber" - String
5. "profileImage" - String - stores the image link

Here is the Product Schema:

1. "productName" - String
2. "productDescription"
3. "productPrice" - Number
4. "sellerID" - String
5. "forSell" - Boolean
6. "dateCreated" - Date - should be set automatically by server to present date

We implemented an API with the following end-points (preceded by http://3.145.57.231:4000/).

NOTE: In addition, the API has the following JSON encoded query string parameters for the GET requests to the users and products endpoints:

Here are some example queries and what they would return:

The API is also able to handle any combination of those parameters in a single request. For example, the following is a valid GET request:

http://localhost:4000/api/users?sort={"name": 1}&skip=60&limit=20

This is also the hosted page of our project please visit this page for playing with our project. We deployed our project on Amazon AWS server.

• Use Firebase for user authentication
• Use React Router for routing
• Use Axios for API calls
• Use PropTypes

• Login page: where new users can register accounts and existing users can login into their accounts.
• User page: where registered users can see the products they are selling or already sold.
• Post page: where registered users can post products for sell with product name, price, description, and photo.
• Gallery view: that displays all available products for sell. The gallery view also contains filtering attributes where users can search by keywords and sort by price and released date.
• Detail view: when an item in the search view or the gallery view is clicked, the app displays the detailed information of the specific product.

1. Clone the repository: git clone https://gitlab.com/JerryNie/fleaillinois.git fleaillinois, then cd fleaillinois
2. Install dependencies in both backend and frontend: npm install
3. Start the dev server: npm start or nodemon --exec node server.js to automatically restart the server on save.