Online print house concept created with Next.js, Firebase and MongoDB.

🚀 Live Demo

• 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

1. Install project locally using npm $ npm install.
2. 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 use http://localhost:3000

Mongo db

• MONGODB_URI - Mongo db connection string with username and password
• MONGODB_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.

3. Create in database following collections: products, productCategories, productPrices and shippings 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.

4. 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
}

5. Start project using npm run dev.

6. 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 use stripe login command to login your stripe account and stripe 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 for payment_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