react-demo-store - GitLite

KO | EN

gitlite — search

#javascript #react #ai #llm #go #golang #machine-learning #linux #java #awesome #kubernetes #vue #pytorch #open-source

react-demo-store

(★ 195)

Moltin + React powered online store

File Explorer

Download Latest Version (.zip)

- - production.min.js
- index.html
- manifest.json
- style.min.css
- - header.png
- - App.js
- - cart.js
  - categories.js
  - checkout.js
  - collections.js
  - index.js
  - payments.js
  - product.js
  - products.js
  - styles.js
- index.css
- index.js
- moltin.js
- store.js
.dockerignore
.gitignore
.prettierrc
app.json
app.yml
Dockerfile
LICENSE
package-lock.json
package.json
README.md
static.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/moltin/react-demo-store

Downloads the entire project code from GitHub to your computer.

cd react-demo-store

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

docker build -t react-demo-store .

Builds a runnable image based on the Dockerfile.

docker run -p 8080:80 react-demo-store

Runs the built image as an actual container.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn # or npm install

Downloads and installs the libraries listed in package.json.

yarn start # or npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <a href="https://ilovelamp.now.sh">
    <img src="https://i.imgur.com/B1EZxsB.png" alt="Moltin React Demo Store" />
  </a>
</p>

# Moltin &mdash; React Demo Store

An example store built using [React](https://reactjs.org/), [Redux](https://redux.js.org/) and [moltin](https://moltin.com). This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).

* [Demo](https://ilovelamp.now.sh)
* [API Reference](https://docs.moltin.com)

## Development

```bash
git clone https://github.com/moltin/react-demo-store.git
cd react-demo-store
yarn # or npm install
yarn start # or npm start
```

Note: You will want to change the `client_id` inside `src/moltin.js` with your own moltin store credentials.

This demo store uses the Redux "[ducks](https://github.com/erikras/ducks-modular-redux)" approach to bundling reducers and actions.

## Deployment

### Heroku

[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)

### Docker

1. [Download and install docker](https://docs.docker.com/engine/installation/)
2. Make sure docker is running locally
3. Run `docker build -t lamp .` at command line
4. Run the docker image with the command `docker run -p 5000 IMAGE_ID` where `IMAGE_ID` is the image ID shown in the result of step 3.
5. Access your app on port 5000

## Using this app with your own moltin store

The app expects a certain inventory setup to correctly function as an ILoveLamp store, if you'd like to build it from the ground up, here's what to do:

1. [Create a collection](https://docs.moltin.com/collection#create-a-collection) with the slug `top_picks`
2. [Create at least one category](https://docs.moltin.com/collection#create-a-category)
3. [Create at least one product](https://docs.moltin.com/collection#create-a-product)
4. [Create at least one file i.e. an image for your product](https://docs.moltin.com/collection#create-a-file)
5. [Attach the product/s to the category and collection](https://docs.moltin.com/collection#create-category-relationship-s-)
6. [Attach the file to the product as a main image](https://docs.moltin.com/collection#create-file-relationship-s-)