Home

Awesome

<p align="center"> <img alt="logo" src="https://github.com/huanghanzhilian/huanghanzhilian/raw/main/projects/c-shopping-rn.svg" width="300"> </p> <h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">C-Shopping-RN APP</h1> <h4 align="center">This is a complete App developed by React Native (Expo). It is a beautiful e-commerce shopping application</h4>

README.md

Technologies Used

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 Next.js open source project

Project portal: https://github.com/huanghanzhilian/c-shopping

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

Feature Demo

Moduleloadingskeletonsuccesserror or empty
feed
Moduleloadingsuccessemptyerror
Category
ModuleLoading and skeletonLevel 1Level 2Level 3FilterSort
Classification subset
ModuleLoading and skeletonNormal screen 1Normal screen 1Error
product details
ModuleComment sectionClick to verify loginFill in the commentsSubmit comment errorComment submitted successfully
product review
ModuleNot logged inData is emptyScreen 1Screen 2add to the cart
Cart
ModuleShopping cart to payConfirm paymentpayment successful
Payment
ModuleNot logged inAfter logging inAfter logging out
Profile
ModuleA page that requires loginBefore 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 redirectlogin display errorlogin loadinglogin handle responseregister
Authentication design
ModuleLoading or skeletonNormal screenEmpty screenError
Orders List
ModuleLoading or skeletonNormal screenEmpty screenError
Reviews List
ModuleLoading or skeletonNormal screenEdit and save
PersonalInfo Screen
ModuleLoading or skeletonNormal screenEmpty screen
Addresses Screen
ModuleLoading or skeletonNormal screenEmpty screen
Serach Screen

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. <br/> 我是一个技术的探索者,一个渴望学习的人,一个解决问题的人。

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 AccountMy WeChat
<img alt="Ji Xiao Peng Official Account" src="https://public.huanghanlian.com/blog/article/4632461d-0d43-4378-bcf7-bb32bf0de950.jpeg" width="150"><img alt="My WeChat" src="https://public.huanghanlian.com/blog/article/6f041fb6-2141-49d8-b20b-6e989687bf9a.png" width="150">

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 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.