An open API service indexing awesome lists of open source software.

https://github.com/phyohtetarkar/bookshop

Online shop app build with reactjs and firebase
https://github.com/phyohtetarkar/bookshop

ecommerce firebase nextjs reactjs

Last synced: 8 months ago
JSON representation

Online shop app build with reactjs and firebase

Awesome Lists containing this project

README

          

# Bookshop

## Environmental variable file

For admin (.env.local)
```env
REACT_APP_FIREBASE_API_KEY=

REACT_APP_FIREBASE_STORAGE_PATH=https://firebasestorage.googleapis.com/v0/b//o
```

For consumer (.env.local)
```env
NEXT_PUBLIC_APP_NAME=Shop Name

NEXT_PUBLIC_FIREBASE_API_KEY=

NEXT_PUBLIC_FIREBASE_STORAGE_PATH=https://firebasestorage.googleapis.com/v0/b//o

NEXT_PUBLIC_FACEBOOK_PAGE_ID=
```
## Data model
```json
{
"banner": [
"homeBanner": {
"images": "",
},
],

"category": {
"id": "",
"name": "",
"createdAt": "",
"createdBy": "",
"updatedAt": "",
"updatedBy": ""
},

"author": {
"id": "",
"name": "",
"createdAt": "",
"createdBy": "",
"updatedAt": "",
"updatedBy": ""
},

"book": {
"id": "",
"name": "",
"nameLowercase": "",
"price": "",
"discount": {
"value": "",
"newArrival": "",
"popular": "",
"available": "",
"code": "",
"publishedYear": "",
"numberOfPages": "",
"publisher": "",
"edition": "",
"images": "",
"hidden": "",
"description": "",
"category": "",
"author": "",
"createdAt": "",
"createdBy": "",
"updatedAt": "",
"updatedBy": ""
},

"order": {
"id": "",
"orderNumber": "",
"customer": "",
"phoneNumber": "",
"address": "",
"totalProduct": "",
"subtotal": "",
"totalPrice": "",
"discount": "",
"deliveryFee": "",
"status": "",
"items": [
{
"quantity": "",
"unitPrice": "",
"discount": "",
"price": "",
"productId": "",
"product:": ""
}
],
"createdAt": "",
"updatedAt": "",
"updatedBy": ""
},

"notification": {
"id": "",
"title": "",
"description": "",
"createdAt": "",
"createdBy": ""
},

"setting": {
"generalSetting": {
"aboutUs": "",
"termsAndConditions": "",
"appStoreUrl": "",
"playStoreUrl": "",
"contact": {
"phoneNumbers": "",
"email": "",
"address": "",
"location": {
"lat": "",
"lon": ""
}
},
"socialMedias": {
"facebook": "",
"twitter": "",
"instagram": ""
},
"updatedAt": "",
"updatedBy": ""
},
"productSetting": {
"publishers": "",
"editions": "",
"updatedAt": "",
"updatedBy": ""
},
"orderSetting": {
"minimumOrderLimitPerProduct": "",
"payments": [
{
"method": "",
"number": ""
}
],
"updatedAt": "",
"updatedBy": ""
}
}
}
```

## Firebase setup

### Authentication

This project use firebase auth for admin login with email and password. This project manually need to create admin users in firebase auth. After you created users, you need admin users' **uid** for security rule setup up to restrict your resources (firestore and storage) access.

1. Setup firebase auth
2. Add admin users manually with email and password
3. Add a collection naming **users** in firestore
4. Add document to **users** collection with **id** and field **admin** for each auth users
- **id** (uid from firebase auth)
- **admin** (boolean type with value *true*)

### Firestore

Collections as shown in **data model**

- banners
- authors
- categories
- books
- orders
- users
- settings

> [!NOTE]
> You will also need to create firestore composite indexes for **books** and **orders** for data query filtering.

```bash
# Security rule
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
function isAdmin() {
return get(/databases/$(database)/documents/users/$(request.auth.uid)).data.admin == true;
}

match /orders/{document=**} {
allow create: if true;
}

match /{document=**} {
allow read: if true;
allow write: if isAdmin();
}
}
}
```

### Storage

This project need to create **banners** and **books** folders for storing images.

```bash
# Security rule
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
function canAccess() {
return request.auth.uid in ['your-admin-uids'];
}

match /{allPaths=**} {
allow read: if true;
allow write: if canAccess();
}
}
}
```

## Screenshots