This device is not compatible.
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!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.