Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rnddave/react-chinesehotpot
Chinese Hotpot, reimagined as an online store built in React
https://github.com/rnddave/react-chinesehotpot
online-shop online-shopping-website react react-router scss
Last synced: 2 days ago
JSON representation
Chinese Hotpot, reimagined as an online store built in React
- Host: GitHub
- URL: https://github.com/rnddave/react-chinesehotpot
- Owner: rnddave
- Created: 2023-03-22T10:13:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-17T11:14:31.000Z (4 months ago)
- Last Synced: 2024-07-18T01:56:08.642Z (4 months ago)
- Topics: online-shop, online-shopping-website, react, react-router, scss
- Language: JavaScript
- Homepage: https://chinesehotpot.co.uk
- Size: 3.03 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chinese Hotpot is now an Amazon Storefront with Blog attached
This project is a storefront built with Vite and React, designed to curate Amazon products to help users experience authentic Chinese cuisine at home. It also includes a blog section where users can read about Chinese culture, restaurants, and personal experiences.
If you are looking for the old [React Storefront project](https://chinese-hotpot.netlify.app/), this is still available in the directory `online-store` whereas the current project is sitting in the `amazon-storefront` directory.
## Features
- Display of featured products with links to Amazon.
- Blog section for sharing posts about Chinese culture and cuisine.
- Dark mode support.
- Responsive design.
## Project Structure
```
.
├── public
│ └── data
│ └── featuredProducts.json
├── src
│ ├── components
│ │ ├── Hero.jsx
│ │ └── ProductCard.jsx
│ ├── pages
│ │ ├── Blog.jsx
│ │ ├── Home.jsx
│ │ └── Post.jsx
│ ├── posts
│ │ ├── 2024-07-15-getting-married-in-china.md
│ │ └── 2024-07-16-another-post.md
│ ├── utils
│ │ └── loadPosts.js
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── package.json
└── vite.config.js
```
## Getting Started
### Prerequisites
- Node.js (version 14 or higher)
- npm (version 6 or higher)
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/amazon-storefront.git
cd amazon-storefront
```
2. Install the dependencies:
```bash
npm install
```
### Running the Development Server
To start the development server, run:
```bash
npm run dev
```
The application will be available at `http://localhost:5173`.
### Building for Production
To build the application for production, run:
```bash
npm run build
```
The production-ready files will be in the `dist` directory.
## Configuration
### Vite Configuration
The Vite configuration file (`vite.config.js`) includes polyfills and aliases to ensure compatibility with the browser environment:
```javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
export default defineConfig({
plugins: [
react(),
],
resolve: {
alias: {
buffer: 'buffer',
},
extensions: ['.js', '.jsx', '.md'],
},
assetsInclude: ['**/*.md'],
optimizeDeps: {
esbuildOptions: {
define: {
global: 'globalThis',
},
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
});
```
## Blog Posts
Blog posts are written in Markdown and stored in the `src/posts` directory. Each post should follow the naming convention `YYYY-MM-DD-post-title.md` and include front matter for metadata:
```markdown
---
title: 'My Post Title'
date: '2024-07-16'
---
This is the content of the blog post. You can use **markdown** here.
```
## Future Improvements
- Implement server-side rendering (SSR) for better SEO and faster load times using a framework like Next.js.
- Enhance the product listing with more detailed information and user reviews.
- Add more interactive elements to the blog posts, such as comments and likes.
## Contributing
Contributions are welcome! Please fork the repository and create a pull request with your changes.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.