使用 React Native 和 Redux Toolkit 的 MERN Stack 电子商务应用程序
MERN Stack E-Commerce App using React Native & Redux Toolkit
- 1. Introduction
- 1. Introduction
- 2. App Demo
- 2. React Native Basics
- 3. Installing the App
- 4. React Native Basics
- 5. Navigation Setup
- 6. Basic Styling
- 3. Building Home Screen
- 1. Creating Home Screen
- 2. Header Component
- 3. Search Button
- 4. Categories Component
- 5. Search Component
- 6. Product Card Component
- 7. Creating Footer
- 4. Product Details Screen
- 1. Creating Carousel
- 2. Designing Product Details Layout
- 3. Add to Cart Button
- 4. Toast Message
- 5. Building Cart Screen
- 1. Cart Heading
- 2. Cart Layout
- 3. Cart Item Component
- 4. Checkout Handler
- 5. Confirm Order Screen
- 6. Confirm Order Item Component
- 7. Payment Screen
- 6. Authentication UI
- 1. Building Login Screen
- 2. Forget Password Screen
- 3. Sign-up Screen
- 7. Profile Routes UI
- 1. Building Profile Screen
- 2. Button Box Component
- 3. Loader Component
- 4. Profile Navigation Handler
- 5. Edit Profile UI
- 6. Change Password Screen
- 8. Building Orders Screen
- 1. Creating Orders Screen
- 2. Order Item Component
- 9. Building Admin Routes UI
- 1. Creating Admin Panel
- 2. Product List Item Component
- 3. Creating Chart in React Native
- 4. Admin Navigation Handler
- 5. Building Manage Category Screen
- 6. Admin Orders Screen
- 7. Update Product UI
- 8. New Product Screen
- 9. Manage Product Images
- 10. Building Camera Screen
- 1. Creating Camera Screen & Accessing Gallery Photos
- 2. Capture Image Using Camera
- 3. Using Camera in Actual Phone
- 11. Backend Setup
- 1. Setting Up Backend
- 2. Creating First Route
- 3. Setting Up Database
- 4. Connecting To Atlas Cloud
- 12. Creating User Backend
- 1. Creating User Schema
- 2. Post Man for API Testing
- 3. Register User API
- 4. Login & Hashing Password
- 13. Error Handling
- 1. Error Handler Middleware
- 2. Async Error Handler
- 14. Backend Authentication
- 1. Implementing JWT
- 2. Saving JWT in Cookie
- 3. Authentic Middleware
- 4. Get My Profile
- 5. Cookie Options
- 6. Logout API
- 15. Update Profile Routes
- 1. Update Profile & Change Password API
- 16. Image Upload API
- 1. Setting Up Multer
- 2. Uploading On Cloudinary
- 3. Update Profile Pic API
- 17. Resetting Password API
- 1. Forget Password API
- 2. Sending Email API
- 3. Reset Password API
- 18. Product Backend
- 1. Creating Product Schema
- 2. Get Product APIs
- 3. Create New Product API
- 4. Update Product & Add Images
- 5. Delete Product & Images
- 19. Category Backend
- 1. Add, Get, Delete Category API
- 20. Admin Middleware
- 1. Admin Middleware
- 21. Search & Filter Product
- 1. Search & Filter API
- 22. Order Backend
- 1. Creating Order Schema
- 2. Place Order API
- 3. Orders Remaining API
- 23. Stripe Integration Backend
- 1. Process Payment API
- 24. Deployment
- 1. Correction Before Deployment
- 2. Using Cors in Server
- 3. Deploying Server Method 1
- 4. Deploying Server Method 2
- 25. Integration with Redux
- 1. Implementing Redux Toolkit
- 26. User Reducer
- 1. Creating User Reducer
- 2. Using Axios In Login Action
- 3. Handling Message & Error
- 4. Creating Custom Hook
- 5. Persisting User Data
- 6. Logout User Action
- 7. Sign Up Handler
- 27. Profile Reducer
- 1. Showing Profile Data
- 2. Change Password Handler
- 3. Fixing Update Profile Error
- 4. Update Profile Handler
- 5. Update Profile Picture Handler
- 28. Product Reducer
- 1. Creating Product Reducer
- 2. Get Products Action
- 3. useSetCategories Hook
- 4. Search Query Handler
- 5. Fetching Product Details
- 29. Cart Reducer
- 1. Creating Cart Reducer
- 2. Fetching Cart Items From Redux
- 3. Add To Cart Handler
- 4. Change Product Quantity In Cart
- 5. Changing The Styling
- 6. Fetching Confirm Order Details
- 30. Payment Handler
- 1. Place Order Handler
- 2. Placing Order With COD
- 3. Implement Stripe Payment Method
- 31. Fetching Orders
- 1. Creating useGetOrders Hook
- 2. Fetching Orders
- 3. Process Order Handler
- 32. Admin Handlers
- 1. Fetching Admin Products
- 2. Add & Delete Category Handler
- 3. New Product Handler
- 4. Update Product Handler
- 5. Manage Product Images Handler
- 6. Delete Product Handler
- 33. Reset Password Handler
- 1. Resetting Password