https://github.com/kiesun/chat-buy-react

Client for beginners to learn, built with React / Redux / Node
https://github.com/kiesun/chat-buy-react

express immutablejs react react-router redux socket-io

Last synced: about 2 hours ago
JSON representation

Client for beginners to learn, built with React / Redux / Node

• Host: GitHub
• URL: https://github.com/kiesun/chat-buy-react
• Owner: KieSun
• License: gpl-3.0
• Created: 2017-11-21T08:45:37.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-22T06:14:38.000Z (almost 2 years ago)
• Last Synced: 2024-09-23T06:02:38.437Z (1 day ago)
• Topics: express, immutablejs, react, react-router, redux, socket-io
• Language: JavaScript
• Homepage:
• Size: 1.06 MB
• Stars: 1,015
• Watchers: 71
• Forks: 130
• Open Issues: 30
• Metadata Files:
  • Readme: README-EN.md
  • License: LICENSE

Awesome Lists containing this project

README

        








Use React / Node to achieve the application. Project is small but complete, suitable for novice learning.

## Technology stack and main framework

📦 React family：react + redux + react-router 4.0 + immutable.js  

📌 ES6 + ES7     

📡 fetch：axios + socket.io

🎈 UI Framework：antd mobile  

✏️ Back-end：express + mongoDB

## Run Project

``` bash

# clone 

git clone https://github.com/KieSun/Chat-Buy-React.git

cd chat-buy-react

# Mac install MongoDb

brew install mongodb

# run MongoDb

mongod --config /usr/local/etc/mongod.conf

# connect mongo

mongo

# install npm package

npm install

npm i nodemon -g

# run server (Mac)

npm run server

# run server (Windows)

npm run dev

# run localhost

npm run start

```

## Screenshot

I will internationalized text.

![登录](https://user-gold-cdn.xitu.io/2017/12/31/160ab0250a8841d5?w=378&h=667&f=gif&s=32928)

![商品购买](https://user-gold-cdn.xitu.io/2017/12/31/160ab0246b51bfef?w=378&h=667&f=gif&s=31759)

![订单](https://user-gold-cdn.xitu.io/2017/12/31/160ab02588408b53?w=378&h=667&f=gif&s=207506)

![聊天](https://user-gold-cdn.xitu.io/2017/12/31/160ab023c8e6a9d7?w=378&h=667&f=gif&s=67204)

## File structure

```

── server                         

│   ├── chat.js                   

│   ├── foods.json                

│   ├── goods.js                  

│   ├── jwtMiddleware.js          

│   ├── key.js                    

│   ├── model.js                  

│   ├── order.js                  

│   ├── server.js                 

│   ├── socket.js                 

│   └── user.js                   

├── src

│   ├── actions                   

│   │   ├── chat.js

│   │   ├── goods.js

│   │   ├── order.js

│   │   ├── type.js

│   │   └── user.js

│   ├── asyncComponent.jsx        

│   ├── common

│   │   ├── axiosMiddleware.js    

│   │   ├── history.js            

│   │   └── unit.js               

│   ├── components

│   │   ├── allOrders             

│   │   │   └── list.jsx

│   │   ├── common

│   │   │   └── 404.jsx

│   │   ├── goods

│   │   │   ├── buy.jsx           

│   │   │   └── goodsList.jsx     

│   │   ├── login

│   │   │   └── loginForm.jsx     

│   │   ├── message

│   │   │   ├── chatList.jsx      

│   │   │   ├── chatListItem.jsx  

│   │   │   └── messageList.jsx   

│   │   ├── myOrder

│   │   │   ├── myOrder.jsx       

│   │   │   └── myOrderItem.jsx   

│   │   ├── navBar

│   │   │   └── backNavBar.jsx    

│   │   └── register

│   │       └── registerForm.jsx  

│   ├── container                 

│   │   ├── allOrders.jsx

│   │   ├── chat.jsx

│   │   ├── dashboard.jsx

│   │   ├── goods.jsx

│   │   ├── login.jsx

│   │   ├── message.jsx

│   │   ├── my.jsx

│   │   └── register.jsx

│   ├── images                    

│   │   ├── goods-sel.png

│   │   ├── goods.png

│   │   ├── message-sel.png

│   │   ├── message.png

│   │   ├── order-sel.png

│   │   ├── order.png

│   │   ├── user-sel.png

│   │   └── user.png

│   ├── index.js                  

│   ├── reducers                  

│   │   ├── chat.js

│   │   ├── goods.js

│   │   ├── index.js

│   │   ├── orders.js

│   │   └── user.js

│   ├── registerServiceWorker.js

│   ├── router                    

│   │   └── router.jsx

│   ├── store

│   │   └── configureStore.js

│   └── styles

│       └── index.scss

```

## Features

- [√] Route Separate

- [√] Redux

- [√] Back-end interface

- [√] Using Immutable.js

- [√] Login, register and authentication

- [√] Goods UI

- [√] All order UI

- [√] Mine UI

- [√] Chat Features

- [] Use TypeScript

- [] GraphQL

- [] Reative-native

Feedback, issues, etc. are more than welcome!