Build a Reactive Web App with SolidJS and Tailwind

In this project, we’ll learn how to use SolidJS and Tailwind in real-world applications by building a bookstore web app from scratch.

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

Introduction

Task 0: Get Started

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

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.