Introduction

The Small Sticker Client is a web-based e-commerce platform designed for programmers to purchase stickers and other programming-related merchandise. Built using modern web technologies, this project showcases a blend of static site generation and dynamic client-side functionality to create a seamless shopping experience for developers.

Main Features

1. Static site generation using Gatsby V2 for optimal performance
2. Integration with Strapi headless CMS for content management
3. Emotion for styled components and efficient CSS-in-JS
4. GitHub OAuth for user authentication
5. Dynamic order search dashboard
6. WeChat Pay integration for payments
7. Responsive design for various devices
8. Client-only routes for protected content

Installation Steps

1. Clone the repository:

   git clone https://github.com/smallsticker/smallsticker-client.git
   

2. Navigate to the project directory:

   cd smallsticker-client
   

3. Install dependencies:

   yarn install
   

4. Set up environment variables for Strapi and GitHub OAuth

5. Start the development server:

   gatsby develop
   

Usage Instructions

1. Browse the store at the root URL to view available products

2. Add items to cart and proceed to checkout

3. Authenticate using GitHub OAuth during the checkout process

4. Complete the payment using the available payment methods

5. For order lookup, navigate to the order search dashboard and log in with your GitHub account

6. Administrators can access the Strapi CMS to manage products and content

Important Notes

1. The store uses Strapi as its backend CMS. Ensure the Strapi instance is properly configured and accessible.

2. GitHub OAuth is used for authentication. Make sure to set up the OAuth application in GitHub and configure the credentials correctly.

3. The project uses the gatsby-source-strapi plugin for static data fetching. Familiarize yourself with its configuration for optimal use.

4. WeChat Pay integration may have cross-browser compatibility issues, particularly with Safari-based browsers. Refer to the project issues for updates and potential fixes.

5. The order search functionality is implemented as a client-only route for security. Ensure proper access controls are in place.

6. For local development, you may encounter authentication issues with Safari-based browsers due to local storage problems. Use an incognito window or a different browser for testing.

7. Keep the dependencies updated regularly to ensure security and access to the latest features.

8. The project uses Emotion for styling. Familiarize yourself with Emotion's API for efficient styling management.

9. Continuous Integration is set up with CircleCI. Make sure to configure the CI environment properly when forking or cloning the project.

10. For any issues or feature requests, refer to the project's GitHub Issues section and consider contributing to the open-source project.