The frontend of this project is a React application, utilizing the Stripe API for payment functionalities.
-
Stripe Integration:
@stripe/react-stripe-js
: React components for Stripe.@stripe/stripe-js
: Stripe's JS library.react-stripe-elements
: Deprecated React components for Stripe.
-
Utilities:
axios
: Promise based HTTP client.moment
: Date library for parsing, validating, and manipulating dates.
-
React Ecosystem:
- Miscellaneous:
react-emojis
,react-icons
,react-router-dom
- Miscellaneous:
start
: Boot up the development server.build
: Prepare app for production.test
: Execute tests.eject
: Remove the single build dependency from the project.
The backend runs on a Node.js server, primarily built with Express. It interfaces with a MongoDB database through Mongoose and offers email functionalities via Nodemailer. Additionally, Stripe integration enables payment processing.
-
Express and Middleware:
express
: The backbone of the backend.cors
: Middleware for enabling Cross-Origin Resource Sharing.
-
Database:
mongoose
: ORM for MongoDB.
-
Configuration:
dotenv
: Manage environment variables.
-
Email:
nodemailer
: Send emails seamlessly.
-
Payment Processing:
stripe
: Handle payments securely.
-
Typescript and Typings:
typescript
: Enabling type-safe JavaScript.- Type definitions like
@types/express
,@types/mongoose
, and others.
-
Development:
nodemon
: Auto-restart during development.ts-node
: Execute TypeScript without a prior compile step.
start
: Launch the backend with TypeScript.build
: Convert TypeScript to JavaScript.serve
: Host the built backend.
cd
into the frontend directory.- Install dependencies:
yarn
- Launch development server:
yarn start
- For production:
yarn run build
cd
into the backend directory.- Install dependencies:
yarn
- Configure
.env
in the root directory with necessary environment variables, please check.env.example
for better insight. - Launch development server:
yarn start
- For production: Build with
yarn run build
, then serve withyarn run serve
.
โ Note: Please note that paying tip using Apple Pay is only visible if user is using iOS or MacOS devices, and paying tip using Google Pay is only visiable if user is using Window or Android devices. โ Note: Please using this email service provider for nodemailer (https://mail.zoho.eu/), because email.service has been set up with it. There are emails for testing in .env.example in backend folder.