https://github.com/huanghanzhilian/c-shopping-rn

This is a complete App developed by React Native (Expo). It is a beautiful e-commerce shopping application. 这个是一个React Native(Expo) 开发的完整App应用，是一个精美的电商购物应用。
https://github.com/huanghanzhilian/c-shopping-rn

async-storage commitlint eslint expo husky jwt lint-staged nativewind prettier react-native react-redux rtk-query

Last synced: 7 months ago
JSON representation

This is a complete App developed by React Native (Expo). It is a beautiful e-commerce shopping application. 这个是一个React Native(Expo) 开发的完整App应用，是一个精美的电商购物应用。

• Host: GitHub
• URL: https://github.com/huanghanzhilian/c-shopping-rn
• Owner: huanghanzhilian
• License: mit
• Created: 2024-01-28T15:15:06.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-26T15:43:17.000Z (9 months ago)
• Last Synced: 2025-04-10T06:24:20.540Z (8 months ago)
• Topics: async-storage, commitlint, eslint, expo, husky, jwt, lint-staged, nativewind, prettier, react-native, react-redux, rtk-query
• Language: JavaScript
• Homepage:
• Size: 1.17 MB
• Stars: 864
• Watchers: 10
• Forks: 141
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - C-Shopping-RN APP

README

          






C-Shopping-RN APP

This is a complete App developed by React Native (Expo). It is a beautiful e-commerce shopping application


## README.md

- en [English](README.md)

- zh_CN [Simplified Chinese](README.zh_CN.md)

## Technologies Used

- React Native

- Redux Toolkit

- RTK Query

- Expo Router

- NativeWind

## Preface

`c-shopping-rn` is an exquisite e-commerce App with an elegant interface, rich functions, small size and speed. It contains the complete functions of an e-commerce platform MVP and has good aesthetic style and coding design.

The project data interface comes from [c-shopping](https://github.com/huanghanzhilian/c-shopping) Next.js open source project

Project portal: [https://github.com/huanghanzhilian/c-shopping](https://github.com/huanghanzhilian/c-shopping)

I hope those who come will gain something. The story never ends, and youth never ends.

## Feature Demo

| Module | loading                                                                                        | skeleton                                                                                       | success                                                                                        | error or empty                                                                                 |

| ------ | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| feed   | ![](https://public.huanghanlian.com/blog/article/e1f91a01-bf5e-46f4-8cbd-7f485e5039ba.png) | ![](https://public.huanghanlian.com/blog/article/d09fc3af-1bf7-49fa-8957-227a3add172a.png) | ![](https://public.huanghanlian.com/blog/article/efee1d79-9c95-4be5-9a6a-ec5160b7e6ae.png) | ![](https://public.huanghanlian.com/blog/article/c3d29b64-c6be-4716-8b4d-30becfbe4246.png) |

| Module   | loading                                                                                        | success                                                                                        | empty                                                                                          | error                                                                                          |

| -------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Category | ![](https://public.huanghanlian.com/blog/article/5d6451e5-1a71-472d-851d-08049a37df9e.png) | ![](https://public.huanghanlian.com/blog/article/302d74e3-b4ef-4d90-87b7-e57d9217caa2.png) | ![](https://public.huanghanlian.com/blog/article/b164744f-a5cd-4f9c-a3a5-b0b33b90b82d.png) | ![](https://public.huanghanlian.com/blog/article/06c64210-4f8e-4b43-9f1d-9b5c1b2748a4.png) |

| Module                | Loading and skeleton                                                                           | Level 1                                                                                        | Level 2                                                                                        | Level 3                                                                                        | Filter                                                                                         | Sort                                                                                           |

| --------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Classification subset | ![](https://public.huanghanlian.com/blog/article/be7d64db-496d-442f-a1e6-ae7d42e9b628.png) | ![](https://public.huanghanlian.com/blog/article/3be1701c-ed03-4394-984a-9ff9b67dd111.png) | ![](https://public.huanghanlian.com/blog/article/44c1ac35-c6a6-4736-8c49-2a030afe14c8.png) | ![](https://public.huanghanlian.com/blog/article/f54cdf46-72c0-42bc-ade2-9c3df96cd121.png) | ![](https://public.huanghanlian.com/blog/article/e4733e24-fa72-4ee0-9c33-c0dbc8072594.png) | ![](https://public.huanghanlian.com/blog/article/0229b9d8-4785-48fb-9028-f7a00cdccfca.png) |

| Module          | Loading and skeleton                                                                           | Normal screen 1                                                                                | Normal screen 1                                                                                | Error                                                                                          |

| --------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| product details | ![](https://public.huanghanlian.com/blog/article/08946a24-197c-4fc0-9a44-0950621f90b7.png) | ![](https://public.huanghanlian.com/blog/article/43a51e87-8775-41b8-a6a4-519e256015e4.png) | ![](https://public.huanghanlian.com/blog/article/fc28819a-456c-4a50-822b-1fa395198b66.png) | ![](https://public.huanghanlian.com/blog/article/a066c4c3-ebf1-460e-91c1-ad5431f04cb9.png) |

| Module         | Comment section                                                                                | Click to verify login                                                                          | Fill in the comments                                                                           | Submit comment error                                                                           | Comment submitted successfully                                                                 |

| -------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| product review | ![](https://public.huanghanlian.com/blog/article/031b85f9-db43-49b6-9f1b-13209b9bb7ef.png) | ![](https://public.huanghanlian.com/blog/article/b07813d7-bf0d-4fe5-80d7-625dd561e4a4.png) | ![](https://public.huanghanlian.com/blog/article/d8048925-dca5-4330-a753-69e3af19bcd3.png) | ![](https://public.huanghanlian.com/blog/article/e935116f-1ab4-4877-90f0-dac66031f0b9.png) | ![](https://public.huanghanlian.com/blog/article/26faa410-3b6a-4882-9373-9992843f6d7e.png) |

| Module | Not logged in                                                                                  | Data is empty                                                                                  | Screen 1                                                                                       | Screen 2                                                                                       | add to the cart                                                                                |

| ------ | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Cart   | ![](https://public.huanghanlian.com/blog/article/64a07f64-96fd-4129-9a75-a27cc681e839.png) | ![](https://public.huanghanlian.com/blog/article/4a00d6af-a0f0-42e8-8e3b-ed44464cb5da.png) | ![](https://public.huanghanlian.com/blog/article/cee4592d-16e1-4836-8d91-6c79608c1eec.png) | ![](https://public.huanghanlian.com/blog/article/ed79f4cf-db93-4c12-beeb-66503ef31810.png) | ![](https://public.huanghanlian.com/blog/article/20f87dfc-7b5f-4109-8098-0e26db8c8b57.png) |

| Module  | Shopping cart to pay                                                                           | Confirm payment                                                                                | payment successful                                                                             |

| ------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Payment | ![](https://public.huanghanlian.com/blog/article/7f1ce096-7624-4102-9e64-ec562693ee42.png) | ![](https://public.huanghanlian.com/blog/article/33b2435e-5146-425c-a514-c8ab725909f6.png) | ![](https://public.huanghanlian.com/blog/article/bd619f57-6f04-44e8-94ac-ccb3a752dc6a.png) |

| Module  | Not logged in                                                                                  | After logging in                                                                               | After logging out                                                                              |

| ------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Profile | ![](https://public.huanghanlian.com/blog/article/619b8402-79b6-442a-8fed-62763b4163e6.png) | ![](https://public.huanghanlian.com/blog/article/b30c1355-3f4f-47de-8087-7a7e7e55e451.png) | ![](https://public.huanghanlian.com/blog/article/a37a6421-784d-441f-aa8c-c3212654bc4e.png) |

| Module                | A page that requires login                                                                     | Before the button logic, you need to verify whether you are logged in and After entering the page, you need to verify whether you are logged in and redirect | login display error                                                                            | login loading                                                                                  | login handle response                                                                          | register                                                                                       |

| --------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Authentication design | ![](https://public.huanghanlian.com/blog/article/f804fc4b-e1a8-4837-8685-2d7c38ee80ed.png) | ![](https://public.huanghanlian.com/blog/article/48581171-9bcd-4154-bf36-0a87a44fc1e4.png)                                                               | ![](https://public.huanghanlian.com/blog/article/4dd13db6-7360-4faf-9be5-7fd3fa569f50.png) | ![](https://public.huanghanlian.com/blog/article/b07813d7-bf0d-4fe5-80d7-625dd561e4a4.png) | ![](https://public.huanghanlian.com/blog/article/fbbcf9d2-d75b-418d-a942-b489b9fc13fb.png) | ![](https://public.huanghanlian.com/blog/article/9ac75cc6-dd60-42f4-b8a7-ebc655f13e44.png) |

| Module      | Loading or skeleton                                                                            | Normal screen                                                                                  | Empty screen                                                                                   | Error                                                                                          |

| ----------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Orders List | ![](https://public.huanghanlian.com/blog/article/df2e2fa4-cc44-4200-8987-c9bbbff0d849.png) | ![](https://public.huanghanlian.com/blog/article/85bc15cc-fb22-4164-ad16-d5fee2e090fa.png) | ![](https://public.huanghanlian.com/blog/article/3b3d72a9-a30c-4fe0-9d84-a6a3443e9818.png) | ![](https://public.huanghanlian.com/blog/article/08c8202a-323d-476d-8255-b982ee5ba775.png) |

| Module       | Loading or skeleton                                                                            | Normal screen                                                                                  | Empty screen                                                                                   | Error                                                                                          |

| ------------ | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Reviews List | ![](https://public.huanghanlian.com/blog/article/421bca65-41cb-448f-a20b-52ce194fb96e.png) | ![](https://public.huanghanlian.com/blog/article/9e6945a8-fd31-4e7a-a959-8f95745d51cc.png) | ![](https://public.huanghanlian.com/blog/article/1fb3fc3b-61c4-473c-ac1c-8ad7c564c53c.png) | ![](https://public.huanghanlian.com/blog/article/13aa858f-1207-43f8-9cd6-270e7e3e44a4.png) |

| Module              | Loading or skeleton                                                                            | Normal screen                                                                                  | Edit and save                                                                                  |

| ------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| PersonalInfo Screen | ![](https://public.huanghanlian.com/blog/article/c2709941-86e0-42e7-881e-4d44ad2bc009.png) | ![](https://public.huanghanlian.com/blog/article/ba048862-c706-4f6e-94af-18f8981e6b0c.png) | ![](https://public.huanghanlian.com/blog/article/6d892150-d74c-41e4-b704-64868eddbe29.png) |

| Module           | Loading or skeleton                                                                            | Normal screen                                                                                  | Empty screen                                                                                   |

| ---------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Addresses Screen | ![](https://public.huanghanlian.com/blog/article/cf6b9e9a-2cbd-4ac1-96e8-94e74e58564c.png) | ![](https://public.huanghanlian.com/blog/article/affe57f6-fdc3-40cf-bca5-89201081d564.png) | ![](https://public.huanghanlian.com/blog/article/ef73752f-b5f8-4ef8-8b2c-9b179c803946.png) |

| Module        | Loading or skeleton                                                                            | Normal screen                                                                                  | Empty screen                                                                                   |

| ------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |

| Serach Screen | ![](https://public.huanghanlian.com/blog/article/f858a528-e810-4aaa-8b38-15a093ca6fc0.png) | ![](https://public.huanghanlian.com/blog/article/ce3a5199-bb02-4276-8f78-422ab41d68fd.png) | ![](https://public.huanghanlian.com/blog/article/cb818668-b4af-488a-9991-cc5923c2e915.png) |

## Usage

To run the C-Shopping React Native app locally, follow these steps:

1. Clone the repository:

   ```

   git clone https://github.com/huanghanzhilian/c-shopping-rn.git

   ```

2. Navigate to the project directory:

   ```

   cd c-shopping-rn

   ```

3. Install dependencies:

   ```

   npm install

   ```

4. Please create a new `.env` file from `.env.example` file in the project root directory to define the required environment variables.

   Eg:

   ```

   EXPO_PUBLIC_BASE_URL=https://c-shopping-three.vercel.app

   ```

5. Start the development server:

   ```

   npm start

   ```

6. Connect your mobile device or emulator to run the app.

## Contact Me

I am a technology explorer, a eager learner, and a problem solver.




我是一个技术的探索者，一个渴望学习的人，一个解决问题的人。

- Email: [h1319639755@gmail.com](mailto:h1319639755@gmail.com)

- Twitter: [继小鹏](https://twitter.com/Huanghanzhilian)

- Github: [Github](https://github.com/huanghanzhilian)

- Blog: [继小鹏](https://blog.huanghanlian.com/)

- 我的中文渠道:

  - 微博：[继小鹏1](https://weibo.com/u/5653497957)

  - 微信公众号：「继小鹏的博客」

  - 掘金：[继小鹏](https://juejin.cn/user/2119514150414686)

  - 知乎：[继小鹏](https://www.zhihu.com/people/huang-han-zhi-lian)

  - 即刻：[继小鹏](https://web.okjike.com/u/BA3424F7-4D6E-4A2C-BA7E-138B616EED05)

  - bilibili：[继小鹏](https://space.bilibili.com/191128853)

### WeChat Official Account | My WeChat

Follow our WeChat Official Account for more information. Feel free to provide any feedback or suggestions by opening an issue or leaving a message on the Official Account. You're also welcome to add me on WeChat for further communication.

| My WeChat Official Account                                                                                                                             | My WeChat                                                                                                                         |

| ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |

|  |  |

## Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

This README provides a brief overview of the project's code structure and how to install and run the React Native app locally. Adjustments can be made to tailor it further to your specific project.