💎 The top 1% Thrift Club - Marketplace to trade secondhand luxury items
A high-value marketplace to buy or sell secondhand luxury items. Browse, categorize, place an order, or get in touch with the owner through an ever-growing catalog. Rich color combinations with sparsely used accents and smooth transitions give a premium user experience.
Tech used: ReactTS, Typescript, TailwindCSS, Redux, React Router, React Icons, Javascript, CSS, and HTML.
👉 Major Features
The core functionalities of the app:
- Easy to switch between the 'Buyer' and 'Seller' tabs.
- Lazy-loading images only load when they come into the visible part of the browser window, saving the user's bandwidth.
- WEBP image format for faster web loading speed and reduce image data size.
- Saves the user's bandwidth.
- Browse all available items displayed as a scrollable grid.
- Filter out the available catalog by categorizing.
- Categories include Cars, Bikes, Watches, Collectibles, Watches, Jets, and Helicopters.
- An 'All' option to reset back the filtering.
- Prices are in US currency format with the prefix rupee (₹).
- The seller screen contains a form for uploading a new item for sale.
- The form includes the Item's title, Price, Seller name, and Image (optional).
- Uploaded items are visible in the personal listings area, below the form.
- Display item details upon clicking on it.
- Item's title, price, year of making, and description.
- The Seller's name and location.
- Click the 'Take my money' button to add that item to the cart directly from its details page.
- Nudge the Seller by clicking the 'Can we talk' button.
- Add an item to the cart by clicking the '+' icon on the item card or its details page.
- Only clicking the 'Add to cart' button will not open the item details page.
- Canceled the bubbling ripple and prevented default behavior on click event.
- The cart screen.
- Remove an item individually.
- The cart screen shows the total price of the selected items.
- Easy navigation with the 'Return to Store' and 'Return to Home' buttons on the Cart and 404 Error page.
- 404 "Page not found" error page will appear upon entering an unknown URL.
- Used appropriate HTML tags promoting browser accessibility settings for specially-abled users.
- Responsive design.
- Switch smoothly between 16:9 desktop, and 3:4 tablet screen sizes, and loosely also compatible with narrow mobile screen sizes.
- Wrote reusable components.
- For item card, cart strip, and seller's item strip.
- Saved the development time by removing the need to write the same code for each recurring item.
👉 Quality of Life and Design Features
Little details that cumulatively add to a great user experience:
- Rich color combinations of a matte black background with sparsely used golden accents and smooth transitions give a premium user experience.
- Golden is a linear gradient and is not overused.
- The Home and Store screens are separate for ease of user flow.
- Buttons on the welcome screen are animated to catch attention.
- Mouse hover effect.
- Over the item card, the seller's item strip, cart strip, and images will slightly increase its size.
- Over the add to cart button will slightly increase its size.
- Other non-hovered elements stay unaffected by changes in neighboring elements.
- Animations.
- Button downward click effect.
- Quick transitions.
- Short and quick visual cue on clicking the 'Can we talk?' button.
- Short and quick visual cue on clicking the 'Take my money' button.
- Show the current count of items in the cart.
- Image details of items arranged as one big four small layouts.
- The item description is a separate mini-scroll area.
- The 'Return to Store' and 'Return to Home' buttons are on most empty screens for ease of navigation.
- Clicking on the logo will take the user back to the Home screen.
- A default picture is displayed if a seller-uploaded item is missing an image link.
- Custom favicon.
- Custom thin scrollbar design matching the theme.
- Title of the web app in the browser's tab.
👉 Colors Used
(Source: Imagination. I just named them whatever I want, because why not.) 🤷
| Colors | Hex Code |
|---|
| Gold | #ad974f |
| Dark Gold | #8e793e |
| White | #ffffff |
| Semi Dark White | #eaeaea |
| Semi Light Black | #231f20 |
| Black | #000000 |
👉 Credits for Assets
Thank you very much 🙂
👉 More screenshots: