Giter VIP home page Giter VIP logo

algolia / algolia-react-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
23.0 43.0 14.0 98.81 MB

๐Ÿ”ฅ A highly scalable, and customizable boilerplate, made with ReactInstantSearchHooks and with many Algolia's features. Ready to configure and deploy. You have just to follow steps in readme file. ๐Ÿ’ฅ

Home Page: https://algolia-react-boilerplate.netlify.app/

License: MIT License

Shell 0.02% JavaScript 53.08% HTML 0.32% SCSS 13.21% CSS 33.36%
algolia instantsearch reactjs

algolia-react-boilerplate's Introduction

React Boilerplate for Custom Demos

Welcome to the parent directory of the Boilerplate. You can find detailed documentation on how to build your own Algolia demo here

๐Ÿงฑ Structure

This parent directory contains on sub-directory apps that contains two sub-directories:

1/ boilerplate-documentation: This folder contain everything you need to know about the boilerplate application from setting up and getting started to details about every component we're using in this application

2/ boilerplate-front-end This folder contains the front-end code itself. If you wish to use the boilerplate as a template this is the folder you want to modify. You can find every details about how to modify this template the way you want in the boilerplate documentation here. You can also find all the details in the readMe here. Without any modification from you, you'll be able to find the front-end here.

๐Ÿš€ Quick get started

If you'd like to start using this boilerplate for a project, please template this repository to get started. You can either clone this repository or fork it. If you're choosing to fork it please mind your future pushes and PR's

This repository is using Workspaces/Monorepo with TurboRepo.

Pre-requisites

Before proceeding, please make sure you have the following:

  • Node v16.14+ installed
  • pnpm installed here.

How to run the apps

To init and install dependancies please use :

pnpm install

To start both applications (documentation - localhost:3001 & front-end - localhost:3000) please use:

pnpm start

To start only the front-end please use:

pnpm start:front

To start only the documentation please use:

pnpm start:docs

To build both applications please use:

pnpm build

If you get an error during the installation about the package turbo-darwin-64, please install the package separately :

pnpm install turbo-darwin-64

๐Ÿ‘Œ What is the Boilerplate?

The Boilerplate is a tool built by the Demo Engineering team of Algolia to help build neat, reliable and fast custom demos that showcase most of the features of Algolia.

The Boilerplate is highly scalable, and customizable. It is made with ReactInstantSearchHooks and it is ready to be configured and deployed quickly.

By following the steps described in this documentation you will be able to build your own Algolia application in matter of minutes.

Happy Coding!

boilerplate-demo-with-neural

algolia-react-boilerplate's People

Contributors

bendanielgreep avatar danajeremy avatar diegolarraz avatar guimendel avatar htinz avatar hugowith avatar jeffrey-slentz-algolia avatar longjasonm avatar mathougui avatar matthew1809 avatar viralex avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

algolia-react-boilerplate's Issues

Improve clarity of config paths

Under "get started" I feel the directions to alter config files could be more specific i.e.

"Visit src/config and adjust algoliaEnvConfig"

=>

"Change to the src/config directory and edit algoliaEnvConfig.js"

Add to cart button in PDP

Should be clickable by a user
Should trigger an add to cart event to algolia
Should give some temporary indication it was clicked

No results Page wrong behaviour

๐Ÿ‘‹ , we have a wrong behaviour on the NRP, in fact if you type an unknown query and you type enter, the app still stuck on loading page.
Screenshot 2022-06-08 at 09 59 40

Feed refinements from hitConfig

Currently user must add attributes in hitsConfig but then also in refinementsConfig, we can reduce this effort by accessing hitsConfig directly for the standard refinement widgets

Demo Tour

Spec: guided tour of the application to allow anyone unfamiliar with the application to understand Algolia

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.