Learn Algolia, Rails and React-storybook

Today’s users expect great things from their search experiences — speed, relevance, and usability, to name a few. Algolia provides developers with out-of-the-box and customizable search experiences that are a joy to build.

This introductory course on the Algolia search solution focuses on the user-facing part of search. Using the Algolia InstantSearch.js front-end library, we’ll see how to build an engaging search experience in no time. (28 minutes, to be exact.) 

**Prerequisites:** 
You don’t need previous experience with search to follow this course — we’ll use an example index with an e-commerce data set preconfigured. We will work mainly in JavaScript, so basic JS knowledge is expected.

If you want to play with your own index settings and data set, you can [create a free Algolia account here](https://www.algolia.com/users/sign_up/hacker/?utm_medium=link&utm_source=egghead&utm_campaign=education), but this is not required to follow along with this first course. 

Algolia's full suite APIs enable teams to develop unique search and discovery experiences for their customers across all platforms and devices. Type a query. Click a link. Open an app. Everything your customers do sends a signal about what they want. Algolia decodes that intent to deliver the right content - instantly.

algolia

Getting Started with Algolia InstantSearch.js

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

rails

Expanding on [Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1), this lesson will look at how to bootstrap AngularJS in a rails application as part of the asset pipeline. With Angular available, you'll see how to communicate with the Rails API using $resource.

Rails Todo API Part 2

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Rails makes an excellent choice for delivering data to AngularJS via REST apis. In this first lesson of a two part series, you'll see how to create a simple API for CRUD operations on TODOs using Rails. This isn't an introduction to Rails, and assumes you know the basics. 

Rails Todo API Part 1



[React Storybook](https://github.com/kadirahq/react-storybook) is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our [documentation](https://getstorybook.io/docs).

Getting Started with React Storybook

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Load React Storybook Stories Dynamically

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

Write the First React Storybook Story

Create a search directive with AngularJS and Rails. You'll want to take a look at the related [Rails TODO API Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1) and [Rails TODO API Part 2](https://egghead.io/lessons/angularjs-rails-todo-api-part-2). This is **not** a Rails how-to, so some knowledge there is expected to get up and running.

Search Directive with Rails

React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!





Jest Snapshot Testing with React Storybook

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to set up Storybook to display React components from scratch.

Set up Storybook for React from Scratch

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

In this lesson we'll go through the process of setting up Storybook for Vue. We'll use Vue CLI to create a new Vue application and Storybook CLI to setup some initial stories and config. Storybook can help you develop UI components in an isolated area without running your full application.

*Additional Resources*
https://medium.com/storybookjs/introducing-storybook-for-vue-940f222541c5
https://storybook.js.org/basics/guide-vue/

 Getting Started With Storybook for Vue

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show the best configuration for React Storybook, and walk through adding your very first React Component and Story to your Storybook.

Add your first React Story to Storybook

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to add a landing/welcome page to your Storybook, so that first-time viewers get to read a message from you or have some orientation around the structure of the Storybook you are building. We also introduce the idea of sequential additions to your Storybook config so you can get a sense of how to modify it for your own needs.

Add a Welcome Page with Sequential Stories to a React Storybook

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Storybook has a rich Addons ecosystem that really adds a lot to the developer experience. Here I show how to set up the JSX Addon in Storybook to display the code behind React components. The juxtaposition of code and visual display can be very effective documentation for any users of your components.

Display the JSX of a React Storybook Story with the JSX Addon

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to set up the Info addon to make your Storybook stories into interactive documentation, including the best way to style the Info addon to your heart's desires.

Apply Style to a React StoryBook with the Info addon to Turn Stories into Documentation

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to set up the Knobs decorator in Storybook to make your Storybook stories infinitely interactive based on their props, and not just your predefined Stories.

Create Interactive Storybook Stories with the Knobs Decorator

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how best to configure a React Storybook to use [Typescript](/q/typescript) (with TSX). This lets you write your reusable components with maximal type safety. Please see the provided code for the full source.

Configure React Storybook for use with Typescript

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

In this short video I show how to set up the `react-docgen-typescript-webpack-plugin`, a neat plugin that leverages the types you are -already- writing for Typescript to autogenerate documentation. 

Automate Documentation Generation in your Typescript React Codebase with Storybook

In this course, we will learn how to set up all the necessary infrastructure to build a Design System of reusable React components, with state of the art developer experience enabled by Typescript and Storybook.

A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. Head to designsystemsrepo.com and you can see Design Systems used by some of the biggest companies and strongest brands from Priceline, Apple, IBM, Wework, Github, and even the US Government. Design Systems can be a significant productivity multiplier in any medium-to-large project or company because you can document your components as you develop them, ensure a consistent look and feel throughout all your screens, and have a seamless workflow between designers and developers.

Introducing Design Systems with React and Typescript in Storybook

This will get you started on how to setup the Javascript API client of Algolia search solution. To follow along the video having a free Algolia account already setup will make things easier (but is not required). Once the client is setup we will test it by pushing a couple of records to an index.  

Topics

Instructors

Content Type

Free or Pro