Category A
Coding
Data
Design

Capstone Project: Tailwind Trading

Tailwind Trading is an eCommerce application with buyer and seller portals. The merchant portal allows merchants selling on Tailwind Trading to manage their orders and view business metrics while the buyer portal functions as an online store to allow customers to purchase items.

Written by
Last updated
July 19, 2024
Keep up with us! Get all your Rocket Academy updates straight to your inbox.
By submitting this form, you consent to receive marketing emails from us and we promise never to spam you!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Heading

What’s a Rich Text element?

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Heading

What’s a Rich Text element?

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Stay updated with our newsletter.

Keep up with us! Get all your Rocket Academy updates straight to your inbox. 

By subscribing you agree with our Privacy Policy, and we agree not to spam you!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Get to buying and selling quicker

Currently, Tailwind Trading has three product categories - kitchen, furniture and clothes, and products within each. The creators have plans to add more categories as we develop the app further. 

How the buyer portal works

Buying an item is straightforward. On the shop page, the shopper can see all the available items and click 'Buy Now' on the item they want. They are then taken to the product page that has the product photo, price and description. The shopper can select the product quantity and proceed to buy the item or add it to their cart should they wish to continue shopping.

If the shopper wishes to buy the item right away and clicks 'Buy Now', they are taken to a user login page. Here, they enter the email and password associated with their Tailwind Trading account (if already registered) or sign up if they're a new customer. 

The checkout screen has the item image and quantity. The order summary is simple, with just the total order amount. The buyer can adjust item quantity and the new total is reflected automatically. Buyers can add multiple products per order. A database that tracks the products going into each order was also built.

A cool credit card animation on the payment page assists buyers in entering their credit card details. Thereafter, the buyer can click 'Pay and Place Order', with the order amount indicated to confirm once again how much they will be paying.

A window pops on screen to inform the buyer that their order has been successfully placed. They can close the window or click 'Go to my order' to see their order page with details such as the product, order ID, purchase date, item quantity and price. The buyer receives an order confirmation email at the end as well.

How the merchant portal works

Online sellers offering their products on Tailwind Trading sign in to the merchant portal where they can view the following:

  • A dashboard that shows shop revenue over time and sales volumes. They can also see the total likes and views their shop has received, and current balance (revenue at any given time). In the future, they will be able to withdraw or deposit money from their balance. 
  • The page also shows a list of all products purchased, alongside the order quantity, order date and shipment status. This data is linked to the backend but doesn't track the status of the order. We plan to add this feature and enable shipment confirmation emails. 
  • Shop Preview provides merchants the latest version of their shop after their most recent updates. They can see what their shop looks like and review changes.          
  • The other menu item is Product List, which shows all the products from the merchant that are  active on the Tailwind Trading site. From here, the merchant can edit or delete a product, or add a new product. When the merchant logs out, they will be taken to the consumer page, where they can see the new product.

Why Tailwind Trading?

As of 2021, there were 2.14 billion online shoppers worldwide. One out of every four shoppers is an online buyer and it's not difficult to imagine why. Online shopping is convenient, time-saving, and creates opportunities for finding good prices or discounts, saving buyers money. eCommerce shops today provide shoppers a personalized experience, same-day delivery, easy returns and exchanges, and user reviews and ratings to make smart choices.

What we love about it

  • The merchant dashboard is visually pleasing and offers important functionality for the merchant such as shop preview, order status, product management and business metrics. 
  • The order confirmation email is great - and one might argue - an essential aspect of the customer's post-purchase journey. 
  • The credit card animation is a neat touch and helpful for those who may need assistance making a purchase online using their credit card.

Keep up with us! Get all your Rocket Academy updates straight to your inbox.

By submitting this form, you consent to receive marketing emails from us and we promise never to spam you!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Related posts

Glad you're enjoying our articles, keep going!