A platform for trading goods & services
This is the front-end client for our 2 week-long sprint, during which our team built an MVP for an external client.
While there are many platforms and websites that allow people to sell goods & services for money, the market is severely lacking a solution for those who wish to buy and sell their trade. Our solution to this is Marxet, an online platform on which users can trade goods & services.
On Marxet, users can create postings for the goods or services that they are willing to sell, as well as search through postings created by other users. It brings power back to the people, allowing themselves and not the "free market" to define their prices.
Because we only had eight days to build Marxet, we chose to use a mix of familiar dependencies we've worked with for weeks and new technologies that are easy to use and come ready to use out of the box.
We'll be using React to build the client, Express for our server, and MongoDB for our database (located in another repository). Alongside these, our new technologies are:
- Firebase for our login and authentication processes
- MaterialUI in conjunction with styled-components because it's an easy-to-use styling library that has produced beautiful, modern websites.
- Next.js for its React server-side rendering capabilities, routing, and ability to serve static websites. It's a simple and well-documented tool for routing, as well.
- Lastly, we used Vercel to deploy our client and API.
-
Create file
.env.localin root directory. You can copy and rename from the.env.local.examplefile -
Add the following variables to the
.env.localfile by copying and pasting the following lines:NEXT_PUBLIC_FIREBASE_API_KEY=<your api key>NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<your firebase app domain>NEXT_PUBLIC_FIREBASE_APP_ID=<firebase app id>NEXT_PUBLIC_FIREBASE_PROJECT_ID=<firebase project id>NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<firebase storage bucket>NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<firebase messaging id>NEXT_PUBLIC_API_URL=<api server endpoint> -
Double and triple check that
.env.localis included in your.gitignore. This is very important.
Marxet was given to us by our client as nothing but a concept-He wanted a cashless bartering platform where users can list, buy, and negotiate on offeredgoods & services. That was all we were given.
As a result, the team had to consider a lot of UI/UX principles, and we often had to put ourselves in the consumer's shoes. As a user looking to purchase something on the platform, what is the smoothest, easiest way to get from viewing the listing to making an offer for it? How would you want to list your own goods or services? How would we encourage & enforce equitable business practices? How would Marxet guarantee transaction integrity or location security?
It was a very tedious process of accounting for varying future circumstances, and the only way we could manage it was by creating several very-detailed wireframes. Even so, after all that planning, there were a few instances where a team member would bring up an important feature that we hadn't even considered, and we'd be back at the drawing board figuring out where that would fit into the website we had so far.
Here's an example of one such wireframe:
These wireframes greatly assisted us in developing these pages, as evidenced by how the login / signup page eventually turned out:
Designing our website's color scheme also took a while, but we ultimately decided on this:
Firebase might be simpler to pick up, but there's still a learning curve. We used this web sequence diagram to orient ourselves.
Thanks to Firebase, users can log in and sign up using their e-mail address or Google account. Once logged in, they'll immediately have access to all features that Marxet has to offer.
A capture of the login / signup page is available above.
Each user has their own customizable user profile. They can create their biography, view their listings, add goods and services to their wishlist, and show off any reviews that other users have left for them.
The user may Favorite a listing, which adds it to their personal Favorites list, or Watch the item in case the lister updates it or supplies more items that they would be willing to trade for.
Each listing is uploaded with a picture and appropriate details on the side. There are also buttons that allow users to View seller or Make an offer.
Clicking the Make an offer button takes you to this modal window, where you may select any number of your current listings to offer up as a trade.
Once you send the offer, the button updates to alert the user that the offer was successfully sent.
Unfortunately, if you haven't got any listings posted and the listing isn't free, you won't be able to send an offer.
This project has taught us that constant and concise communication is the key to efficiently building something. In order to streamline this workflow, we chose to use GitHub Projects instead of Trello boards because we prefer its integrated features, such as linking code blocks to related tickets. You can view our ticket board here.
Why have one when you can have four? Or six? Or whatever is enough to get your listing out there.
These reviews & ratings will be added to the individual listing page beneath the photos and listing information. This will greatly improve users' browsing experience and decision-making when it comes to trading.
Not only will the Search results render more responsively, but there will also be a discrete sticky button anchored on the left side of the screen. Users can click this button to be sent back to the top of the screen so they can more easily access the Search bar.
Dark mode soon, we promise!