react-demo-store - GitLite

KO | EN

gitlite — search

#python #react #llm #golang #machine-learning #deep-learning #macos #cli #kubernetes #vue #security #mcp #ios #openai

react-demo-store

(★ 195)

Moltin + React powered online store

파일 탐색기

최종 버전 다운로드 (.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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-demo-store

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Docker

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Docker Desktop 컨테이너를 빌드하고 실행하려면 필요합니다. 설치 후 실행해서 백그라운드에 켜두세요.

docker build -t react-demo-store .

Dockerfile을 기반으로 실행 가능한 이미지를 빌드합니다.

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

빌드된 이미지를 실제 컨테이너로 실행합니다.

✅ 터미널에 docker compose ps 를 입력해 컨테이너들이 Up 상태인지 확인하세요. README에 포트 번호가 적혀있다면 브라우저에서 http://localhost:포트번호 로 접속해보세요.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn # or npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn start # or npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 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-)