This device is not compatible.
You will learn to:
Build reactive single-page apps using SolidJS framework from scratch.
Utilize Tailwind to reduce the amount of CSS in your bundles.
Familiarize yourself with the basic syntax of SolidJS, including templating, conditional rendering, fetching data, event handlers, and more.
Implement routing, sorting, filtering, modifying, or duplicating data states in SolidJS.
Skills
Web Development
Web Frameworks
API Integration
Prerequisites
Good understanding of HTML, CSS, and JavaScript
Good understanding of ES6 features like arrow functions and array handling
Basic understanding of Tailwind
Technologies
SolidJS
Tailwind
JavaScript
Project Description
In this project, we’ll learn how to use SolidJS and Tailwind to build a bookstore web app. We’ll also learn how to implement data fetching, routing, searching, filtering, and toggling between different themes. We’ll also learn to style components using Tailwind. Users will be able to view the details of the books and add or remove books from a wish list. The wish list will represent the books users are interested in reading in the future.
In a reactive web app, a program reacts instantly to changes. These changes could be user interactions such as user inputs, changes in state or data, or the environment. That’s where SolidJs is useful, making it a fast-growing technology of modern software development, especially for web applications. One of the comparative advantages of SolidJS is that it does not use virtual DOM. The function components only run once to compile the JSX template into the DOM using its reactive system, making it productive.
Project Tasks
1
Introduction
Task 0: Get Started
2
Build Application with Static Content
Task 1: Implement Header and Footer Components
Task 2: Implement Routing in the Application
Task 3: Display Books on the Home Page
3
Add Dynamic Features to the Application
Task 4: Add Dynamic Data Fetching
Task 5: Implement Conditional Rendering
Task 6: Implement the Book Details Page
Task 7: Add Search Functionality to Filter Books
Task 8: Implement the Wish List Context Using State Management
Task 9: Implement the Wish List Rendering and Book Removal Feature
Task 10: Add the Theme Toggle Feature
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.