Change the website's theme

Select either light or dark mode based on your operating system settings

Two users engaging in a trade, which features a chat and an offer tracker.

Cardflow

Technologies used

  • React
  • TypeScript
  • Material UI
  • TailwindCSS
  • Django REST Framework
  • PostgreSQL

Project overview

Cardflow is an open-source online platform that allows users to buy, sell, and trade TCG items like Yu-Gi-Oh cards. This was a collaborative project in which I participated as the main front-end engineer.

The web app supports various functionalities, including:

  • Authentication and authorization - the app uses the access / refresh token model. The front-end implements a "retry" model if it gets a 401 error
  • Various operations with card offers - users can search, view, create, edit, and delete card offers
  • Shopping cart - while viewing a card, users can add a specific offer to their shopping cart and then purchase their cards after checking out
  • Trading - users can search for users and initiate a trade offer. Trades allow users to trade cards between each other, potentially with some cash to compensate for lower or higher value cards. The app provides a chat and an offer tracker that allow the two users to keep track of everything
  • Tracking and managing purchases and sales - users can view a list of their purchases and sales, as well as view details about them (such as the shipment address) and manage them (such as updating the status of the order from "sent" to "received")
  • Internalization - the app is translated in Bulgarian and English
  • Profile customization - users can change their profile picture, username, the default shipment address (which is automatically filled on checkout), and the default currency (between BGN and euro)

I implemented almost all of those features on the front-end single-handedly. The design of the UI was provided to me in Figma, though I occassionally (with approval) made some minor improvements to the UI when I saw that something could be visualized in a better way. I also wrote numerous unit and component tests, which helped me with my goal of making the code more maintainable.

My involvement in the project wasn't limited to just making pages interactive. In particular, I have opened issues on GitHub when I discovered bugs with our backend API, providing detailed steps to reproduce the bugs and even occassionally finding out what's causing the bug, or when I needed a specific feature to implement something on the client. Sometimes, I even contributed bugfixes myself (despite having little experience with Django or Python in general) and very minor feature implementations. I also had the opportunity to review pull requests from external contributors who had expressed interest in contributing to the project.

This project gave me an opportunity to work in a team with other people that I did not even know before that moment. In addition to communicating with each other on a consistent basis, I also had opportunities to raise disagreements when I felt that a particular decision (especially a technical one) was not the best and there were better options to consider.

Back to the portfolio index