Built with
React, styled withstyled-components, fetched data withREST API
I served as the product manager and front-end developer for a project that aimed to create a platform for purchasing events and festival tickets through an auction system. Additionally, 10% of the ticket purchase amount would automatically be donated to support cultural and artistic activities for low-income individuals. Our team consisted of three front-end developers and two back-end developers, and we completed the project in just two weeks. During the planning phase, we drew insights from auction platforms for limited products, NFT market platforms, and ticket sales websites to refine our project's details.
As the product manager, I wanted to maximize the completeness of our product within a short timeframe of two weeks. To work efficiently, we discussed and shared the envisioned state of our product using Figma. I also created a Product Requirements Document (PRD) to ensure that all team members had a precise understanding of the product's features and specifications. We managed this document collaboratively, with each team member responsible for their respective sections.
I simplified the page layout decided upon during our meetings into wireframes. Reusable UI components were color-coded for easy identification and later conversion into components.
UX/UI Design - Figma
I shared the wireframes with team members, and they used them as a basis to work on specific UI elements independently. Since we didn't have a dedicated designer, this approach allowed us to allocate more time to actual development work.
Design System - Figma
Given that multiple front-end developers were creating a product from scratch, I believed it was essential to establish a unified design system. This design system proved useful during UI planning and actual code implementation. In the future, I would like to explore more advanced design systems using tools like Storybook.
In this project, I was responsible for implementing user registration & login, purchasing prepaid tokens, user dashboard, and review functionalities.
User Registration/Login: Using OAuth API by Kakao - PR
Our service aims to provide the best user experience when logged in. Therefore, we needed to minimize the hurdles of user registration and login. I implemented a simple registration and login process using Kakao accounts.
- Authentication request to Kakao server
- Passing the Kakao-issued token to the backend
- Conditional rendering of navigation bar buttons based on the presence of the AccessToken issued by the backend
Prepaid Token Purchase: Using Payment API by Kakao - PR
To create a unique experience for our users and add an element of fun to the auction and ticket purchase process, we introduced payment with 'token'. This approach had benefits for both users and our service. Users could conveniently and quickly purchase tickets with prepaid tokens, while our service could secure cash upfront. We incentivized users to select charge options with larger amounts by offering additional token incentives.
Prepaid token purchase was implemented with the Payment API by Kakao for easy payments for users, using SearchParams.
- Request payment preparation to the Kakao server
- The user completes payment via a QR code
- Request payment approval from the Kakao server
- POST request to the backend
Token Transaction History - PR
This is a feature designed to meet the needs of users who want to check where their own money has been spent. Since it involves money, we allowed users to view precise transaction details down to the second. Additionally, to intuitively distinguish between charge and usage history, different font colors have been set.
- Based on the token transaction data received from the backend, conditional rendering is done based on the type of transaction: 'charge' or 'usage'.
- The transaction type value is received as props to differentiate styling between charge and usage amounts.
User Dashboard - PR
- Sent requests to the USER, BID, and ORDER endpoints for data.
- Placed a CTA button that encourages the important conversion event, 'Token Recharge.'
- On the frontend, converted 10% of the total order amount(in tokens) into KRW and displayed the total donation amount.
Bidding History - PR
To provide clarity, I separated ongoing bids and completed bids using a tab. For completed bids, I added 'success' or 'failure' indicators, differentiating them with font colors.
Accept the Successful Deal - PR
When a user's bid ranked high enough at the end of the bidding period, the bid appeared in the "Waiting for Acceptance" list. Users could click the "Confirm Purchase" button to accept the deal. To ensure users were aware of token deductions, I displayed a notification if their token balance was insufficient, encouraging them to charge more tokens.
When the button was clicked, tokens were deducted, ORDER request was sent to the backend.
Tickets in QR Codes Format - PR
On the My Page, users can check the QR code for valid tickets. Tickets were considered valid if the event date was in the future compared to the viewing date. For past events, I provided the option to leave reviews instead of checking tickets.
- I used a QR code generation library.
- I compared the event date to the viewing date to conditionally render the buttons.
Posting Image Reviews: Using FormData - PR
For tickets with event dates in the past, I offered the option to leave reviews. When the event date had passed, the system automatically moved the event to the "Past Events" section on My Page, replacing the "Check Tickets" button with a "Leave Review" button.
- To post reviews, I created an object with the event's ID and the user's text input. I used the
type="file"input to upload images via FormData and send a POST request to the backend. - Default file upload buttons were replaced with custom button images using the
<label>tag.
- All reviews can be accessed on the REVIEWS page, and users can delete the reviews they have posted. The UI of the review page is designed to emphasize images, which aligns with the nature of the platform.
- Render all review data using the Array.map() method.
- Compare the USER ID of the review with the logged-in user's ID, and render the delete button only if they match.
- When the delete button is clicked, send a DELETE request to the backend for removal.
This project allowed me to deeply consider user experience when building a product. Based on insights gained from our other projects, our team was able to work more efficiently. We minimized trial and error and tackled more challenging technologies as a team.
As a developer, I understand that valuable experiences come from facing different issues and finding solutions, no matter the problem. If I encounter similar issues in the future, I will be able to solve them more efficiently. In the real world, I expect to encounter even more complex problems, and I'll accumulate insights and continuously improve my abilities to solve them better.