This device is not compatible.

PROJECT


Create an E-Commerce Store in Rust

In this project, we'll learn how to build an e-commerce store in Rust using the Yew library. We'll enable users to add products to a cart and view the cart items.

Create an E-Commerce Store in Rust

You will learn to:

Create a single-page application in Rust using the Yew framework.

Navigate between different pages without page reload.

Integrate API with Rust applications.

Create a front-end web application with WebAssembly.

Skills

Web Development

API Integration

Prerequisites

Good understanding of Rust

Basic understanding of Fetching Data in Rust

Good understanding of HTML and CSS

Technologies

Yew

Rust

Fake Store API

Project Description

In this project, we’ll build an e-commerce store with a cart functionality. We’ll use the Fake Store API that provides data for e-commerce websites. We’ll use it to fetch and display the products in the store.

We will implement the front-end components using Yew, a Rust framework. Yew minimizes the DOM API calls and allows us to navigate to different pages without reloading. The application will allow us to fetch product data from the Fake Store API and add products to the cart.

The initial template is provided with styled components. However, you can style and customize them as you want.

Project Tasks

1

Introduction

Task 0: Getting Started

Task 1: Declaring Types of Products

2

Develop the Shop Page

Task 2: Implement the ShopPage Component

Task 3: Fetch Products Data from the API

Task 4: Implement the Add to Cart Functionality

Task 5: Implement the ProductCard Component

Task 6: Import and Style the ProductCard Component

Task 7: Implement the Header Component

Task 8: Import and Style the Header Component

3

Routing and State Management in Application

Task 9: Add Route for the Shop Page

Task 10: Add Route for the Checkout Page

Task 11: Manage State in App Component

Task 12: Manage State in ShopPage Component

Task 13: Manage State in ProductCard Component

4

Develop the Checkout Page

Task 14: Implement the CheckoutPage Component

Task 15: Import and Style the CheckoutPage Component

Congratulations!