Skip to content

Commit 5d0afe2

Browse files
emwpemwp
authored
feature: Next.js e-commerce template (#292)
1 parent 4ff7ebc commit 5d0afe2

File tree

121 files changed

+22695
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+22695
-0
lines changed

‎starters/nextjs/firebase-ecommerce/.eslintrc.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": ["next/core-web-vitals", "next/typescript", "prettier"],
3+
"rules": {
4+
"@next/next/no-img-element": "off"
5+
}
6+
}

‎starters/nextjs/firebase-ecommerce/.gitignore

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts
37+
38+
vsce-debug.log*
39+
40+
# Firebase
41+
firebase-debug.log*
42+
firebase-debug.*
43+
.firebase

‎starters/nextjs/firebase-ecommerce/README.md

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
# Firebase E-Commerce Project
2+
3+
This project is a Firebase-based e-commerce application designed for developers to bootstrap their e-commerce projects. Below is the documentation to help you set up, provision, and maintain the application.
4+
5+
## Overview
6+
7+
The application provides a quick and easy to use shopping experience with features like:
8+
9+
- Firebase Authentication for user sign-up, sign-in, and management.
10+
- Product and collection management of assets with Firebase Storage.
11+
- Real-time database connections using Firebase Data Connect.
12+
- Checkout and payment processing through Stripe.
13+
- Dynamic pages for collections, products, and orders.
14+
15+
## Table of Contents
16+
17+
1. [Setup and Configuration](#setup-and-configuration)
18+
2. [Environment Variables](#environment-variables)
19+
3. [Application Features](#application-features)
20+
4. [Provisioning Steps](#provisioning-steps)
21+
5. [Support and Maintenance](#support-and-maintenance)
22+
23+
## Setup and Configuration
24+
25+
### Firebase Setup
26+
27+
#### Firebase Auth
28+
29+
1. Create a new Firebase project in the [Firebase Console](https://console.firebase.google.com).
30+
2. Enable **Email/Password Authentication**.
31+
3. Add Firebase app secrets to `.env.local`.
32+
4. Include Firebase app secrets in **App Hosting**.
33+
34+
#### Firebase Data Connect
35+
36+
1. Install the **Firebase Data Connect** extension for VS Code.
37+
2. Create a new Data Connect instance and service.
38+
3. Set up billing for the Firebase project.
39+
4. Switch to the Blaze plan.
40+
5. Define the required schema, queries, and mutations.
41+
6. Deploy the schema, queries, and mutations to production.
42+
43+
#### Firebase Storage
44+
45+
1. Create a new Storage bucket.
46+
2. Use the bucket to store images for products and collections.
47+
48+
#### Firebase App Hosting
49+
50+
1. Connect the Firebase app to your GitHub repository.
51+
2. Create a new backend for the application.
52+
3. Deploy secrets to app hosting using the Firebase CLI.
53+
4. Deploy the application to Firebase Hosting.
54+
55+
### Stripe Setup
56+
57+
1. Create a new Stripe account.
58+
2. Add API keys (Publishable and Secret) to `.env.local`.
59+
3. Set up a webhook endpoint in the Firebase project.
60+
4. Add the webhook secret to `.env.local`.
61+
5. Deploy webhook configurations using the Firebase CLI.
62+
6. Customize the webhook to handle required Stripe events.
63+
64+
## Environment Variables
65+
66+
The following environment variables must be configured in `.env.local`:
67+
68+
- **Firebase Secrets**: `NEXT_PUBLIC_FIREBASE_API_KEY`, `NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN`, `NEXT_PUBLIC_FIREBASE_PROJECT_ID`, `NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET`, `NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID`, `NEXT_PUBLIC_FIREBASE_APP_ID`.
69+
- **Stripe Secrets**: `NEXT_PUBLIC_STRIPE_PUB_KEY`, `STRIPE_SECRET_KEY`, `STRIPE_WEBHOOK_SECRET`
70+
- **Google/Gemini API Key**: `GOOGLE_API_KEY`
71+
72+
## Application Features
73+
74+
### Homepage
75+
76+
- Displays featured collections with links to individual pages.
77+
- Includes a header with navigation links, a search bar, and user/cart icons.
78+
- Showcases product highlights and promotions.
79+
80+
### Product Page
81+
82+
- Displays product details including name, description, price, images, and options (e.g., size, color).
83+
- Features a reviews section and a cart addition button.
84+
85+
### Collection Page
86+
87+
- Lists collection details such as name, description, and products.
88+
- Displays products in a grid layout.
89+
90+
### Cart
91+
92+
- Shows cart items, address input, and a checkout button.
93+
- Items are displayed with name, price, and image.
94+
- Enables checkout once an address is added.
95+
96+
### Checkout
97+
98+
- Handles payment through Stripe Checkout.
99+
- Displays an order summary with total price.
100+
- Redirects to the orders page upon successful payment.
101+
102+
### Orders
103+
104+
- Lists user orders with details like date, tracking, total price, and order ID.
105+
- Allows users to view detailed order information.
106+
107+
### Authentication
108+
109+
- Managed via Firebase Auth.
110+
- Supports user sign-up, sign-in, and sign-out.
111+
- Authenticated users can access order history and complete checkouts.
112+
113+
## Provisioning Steps
114+
115+
1. Follow the Firebase and Stripe setup instructions.
116+
2. Deploy the application using Firebase CLI.
117+
3. Ensure all environment variables are correctly configured.
118+
119+
## Support and Maintenance
120+
121+
- **Firebase Data Connect**: Update schemas and queries as needed.
122+
- **Stripe Webhooks**: Monitor and update event handling.
123+
- **Secrets Management**: Rotate secrets periodically and update `.env.local`.
124+
- **User Support**: Monitor Firebase Auth logs for user-related issues.
125+
- **Storage**: Regularly review storage usage and optimize image sizes.
126+
127+
## Additional Notes
128+
129+
- Ensure that billing is enabled for all Firebase features.
130+
- Test webhook integrations thoroughly before deploying.
131+
- Keep environment variables secure and avoid hardcoding secrets.
132+
133+
For further support or questions, refer to the project documentation or contact the development team.
134+
135+
## Local Development
136+
137+
To run this project locally, follow these steps:
138+
139+
1. Clone the repository:
140+
```
141+
git clone https://github.com/username/firebase-ecommerce.git
142+
```
143+
2. Move into the project directory:
144+
```
145+
cd firebase-ecommerce
146+
```
147+
3. Install dependencies:
148+
```
149+
npm install
150+
```
151+
4. Copy the example environment variables:
152+
```
153+
cp .env.example .env.local
154+
```
155+
• Fill in the required values (Firebase config, Stripe keys, Google API key, etc.).
156+
5. Start the development server:
157+
```
158+
npm run dev
159+
```
160+
6. Open the application in your browser at:
161+
```
162+
http://localhost:3000
163+
```
164+
165+
---
166+
167+
## Contributing
168+
169+
We welcome contributions to this project! Before making any contributions, please read and follow these guidelines:
170+
171+
1. Create an issue describing your proposed change or feature request.
172+
2. Fork the repository and create a new branch for your changes.
173+
3. Ensure your code adheres to the existing style and linting rules.
174+
4. Write or update tests if applicable.
175+
5. Submit a pull request (PR) following the PR template (if you have one).
176+
6. Once approved, your changes will be merged into the main branch.
177+
178+
---
179+
180+
## License and Credits
181+
182+
• This project is licensed under the [MIT license](LICENSE) (or adjust as needed for your license).
183+
• Built with:
184+
185+
- [Next.js](https://nextjs.org/) for the React framework
186+
- [Firebase](https://firebase.google.com/) for authentication, storage, and hosting
187+
- [Stripe](https://stripe.com/) for payment processing
188+
- [Google Generative AI](https://developers.generativeai.google/) for review summaries
189+
190+
Feel free to add acknowledgments or shout-outs to libraries or contributors here.
191+
192+
---
193+
194+
## Security and Firebase Rules
195+
196+
For an e-commerce app handling user data and transactions, security is critical:
197+
198+
1. Make sure you enable the correct Firebase security rules for Firestore/RealtimeDatabase and Storage.
199+
2. Keep your environment variable secrets private. Do not commit them to Git.
200+
3. Rotate your Firebase, Stripe, and Google API keys periodically.
201+
4. Implement user authentication checks (via Firebase Auth) before reading or writing sensitive data.
202+
203+
Reference:
204+
• [Firebase Rules Documentation](https://firebase.google.com/docs/rules)
205+
• [Firestore Security Rules Examples](https://firebase.google.com/docs/firestore/security/get-started)
206+
207+
---
208+
209+
## Additional Integrations (Optional)
210+
211+
If you plan to integrate other services or need advanced features, you can add details here. For example:
212+
213+
• Analytics: Google Analytics or Segment usage.
214+
• Shipping Providers: FedEx/UPS/Shippo integrations.
215+
• Automated Emails: Transactional emails with SendGrid/Mailchimp.
216+
• Domain Config: Steps to configure custom domains in Firebase Hosting.
217+
218+
---
219+
220+
## Project Structure
221+
222+
Below is a high-level overview of the main directories and their purposes:
223+
224+
```bash
225+
firebase-ecommerce/
226+
├─ dataconnect/ # Firebase Data Connect migrations and schemas
227+
├─ src/
228+
│ ├─ app/ # Next.js app router: includes pages, API routes
229+
│ ├─ components/ # Reusable React components (UI, sections, etc.)
230+
│ ├─ lib/ # Utility functions and helpers
231+
│ └─ ... # Other feature-based directories
232+
├─ .env.local # Environment variables (ignored by Git)
233+
├─ package.json
234+
├─ README.md # Documentation
235+
└─ ...
236+
```

‎starters/nextjs/firebase-ecommerce/apphosting.yaml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Settings for Backend (on Cloud Run).
2+
# See https://firebase.google.com/docs/app-hosting/configure#cloud-run
3+
runConfig:
4+
minInstances: 0
5+
6+
# Environment variables and secrets.
7+
env:
8+
# Grant access to secrets in Cloud Secret Manager.
9+
# See https://firebase.google.com/docs/app-hosting/configure#secret-parameters
10+
- variable: NEXT_PUBLIC_FIREBASE_API_KEY
11+
secret: FIREBASE_API_KEY
12+
- variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
13+
secret: FIREBASE_AUTH_DOMAIN
14+
- variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
15+
secret: FIREBASE_PROJECT_ID
16+
- variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
17+
secret: FIREBASE_STORAGE_BUCKET
18+
- variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
19+
secret: FIREBASE_MESSAGING_SENDER_ID
20+
- variable: NEXT_PUBLIC_FIREBASE_APP_ID
21+
secret: FIREBASE_APP_ID
22+
- variable: GOOGLE_API_KEY
23+
secret: GOOGLE_API_KEY
24+
- variable: STRIPE_ACCOUNT_ID
25+
secret: STRIPE_ACCOUNT_ID
26+
- variable: STRIPE_SECRET_KEY
27+
secret: STRIPE_SECRET_KEY
28+
- variable: NEXT_PUBLIC_STRIPE_PUB_KEY
29+
secret: STRIPE_PUB_KEY
30+
- variable: STRIPE_WEBHOOK_SECRET
31+
secret: STRIPE_WEBHOOK_SECRET

0 commit comments

Comments
 (0)