Online print house concept created with Next.js, Firebase and MongoDB.
- signup/login/logout
- delete/update account
- password reset
- update claims
- add/remove products from the basket + persist store to session storage
- create/update/delete orders
- upload/delete product files
- calculate the most optimal shipping container
- card payment for orders
- two languages - english, polish (translated with url paths)
- caching fetched data
- styled components
- notification popups
- form validations
- pagination
- rate limits
- Install project locally using npm
$ npm install
. - Create Firebase, MongoDB, Stripe accounts and connect them to your project by creating .env file and setting up required enviromental variables:
App
NEXT_PUBLIC_APP_URL
- App url, for development usehttp://localhost:3000
Mongo db
MONGODB_URI
- Mongo db connection string with username and passwordMONGODB_NAME
- Database name
Firebase client
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
Firebase admin
FIREBASE_CLIENT_EMAIL
FIREBASE_PRIVATE_KEY
FIREBASE_DB_URL
Stripe
NEXT_PUBLIC_STRIPE
STRIPE_SECRET
WEBHOOK_SECRET
Stripe webhook secret to validate webook attempts.
- Create in database following collections:
products
,productCategories
,productPrices
andshippings
by uncommenting the code in pages/index.js file:
// import productsColl from "@/mongodb/collections/products";
// import productCategoriesColl from "@/mongodb/collections/productCategories";
// import productPricesColl from "@/mongodb/collections/productPrices";
// import shippingsColl from "@/mongodb/collections/shippings";
and
// try {
// await db.collection("products").insert(productsColl);
// await db.collection("productCategories").insert(productCategoriesColl);
// await db.collection("productPrices").insert(productPricesColl);
// await db.collection("shippings").insert(shippingsColl);
// } catch (err) {
// console.log(err, "error creating collections");
// }
After saving the changes and refreshing the page, collections should be successfully created in your mongodb. You can delete commented code above and the entire folder mongodb/collections
.
- Setp up firebase rules.
- Firestore database:
rules_version = "2"
service cloud.firestore {
match /databases/{database}/documents {
match /users/{uid} {
allow read, write: if isLoggedIn() && isContentOwner(uid);
}
}
function isLoggedIn() {
return request.auth != null
}
function isContentOwner(uid) {
return request.auth.uid == uid
}
}
- Firebase storage:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /userFiles/{uid}/{orderId}/{file} {
allow read: if isLoggedIn() && isContentOwner(uid);
}
}
}
function isLoggedIn() {
return request.auth != null
}
function isContentOwner(uid) {
return request.auth.uid == uid
}
-
Start project using
npm run dev
. -
Set up stripe webhooks.
- Locally: To listen stripe webhhook events locally you need to install Stripe CLI on your computer and run unzipped
.exe
file from your terminal, then usestripe login
command to login your stripe account andstripe listen --forward-to localhost:3000/api/payment
to listen webhhok events. - Production: Add webhook endpoint in your stripe account (
www.yourdomain.com/api/payment
) and listen forpayment_intent.succeeded
event.
- all users have ability to add admin claims to thier accounts.
- admin can update/delete and view other users orders (so dont use your private informations and files in this project).
- admin cannot download other users order files, only thier owners can (in order details).
- all products informations and prices are random.
- create order limit 5/15 min.
To make successful payment use stripe test card number: 4242424242424242. Other fields can be filled with random numbers.
@fortawesome/fontawesome-svg-core
,
@fortawesome/free-solid-svg-icons
,
@fortawesome/react-fontawesome
,
@stripe/stripe-js
,
babel-plugin-styled-components
,
bcryptjs
,
binpackingjs
,
body-scroll-lock
,
connect-mongo
,
dotenv
,
express-rate-limit
,
file-type
,
filepond
,
filepond-plugin-file-validate-size
,
filepond-plugin-file-validate-type
,
final-form
,
firebase
,
firebase-admin
,
js-cookie
,
micro
,
mongodb
,
mongodb-core
,
next
,
next-connect
,
next-redux-wrapper
,
next-translate
,
nprogress
,
react
,
react-dom
,
react-filepond
,
react-final-form
,
react-redux
,
react-toastify
,
redux
,
redux-devtools-extension
,
redux-persist
,
redux-thunk
,
redux-wrapper
,
stripe
,
styled-components
,
styled-reset
,
swr