michal-radomski / mern_with_stripe_and_sendgrid

MERN Stack App with Stripe and Sendgrid.

MERN App with Stripe and Sendgrid

A MERN Stack App with Stripe and Sendgrid.

Link to the application: Coming soon...

Description

Motivation

I wanted to build a MERN stack application using Stripe and SendGrid but something other than E-commerce and Chat-app.

General Info

There are two inputs: the first input - for the amount, and the second one - for greetings. After clicking the Submit button - the Stripe component is launched - for online card payments. The email is then sent automatically by SendGrid (to the email address you provided during payment) and the information is then stored in MongoDB Atlas Database. You can see all the greetings by clicking on the list. The user interface is bilingual: Polish and English. Translations are handled by i18next.

Payments are in test mode - type to test:
Card Number: 4242 4242 4242 4242
CVC: Any 3 digits
Date: Any future date
More info on Stripe Docs.

Notes

The keys are not hosted on the GitHub.com.
I have some packages installed globally (e.g. TypeScript, Nodemon) so you have to install them manually.

ScreenShots

Built With

• The App is written in TypeScript.
• React Bootstrap and Sass are used to customize the UI.
• Fetching data is done by using : Axios.
• Client-side routing is done using: React Router.
• Global state of the App is maintained by: Redux.
• i18next is used to handle translations.
• React is used to build client-side.
• Express is used to build server-side.
• Mongoose and Typegoose are use to handle MongoDB Atlas Database.

External Providers

• Card payments are handled by: Stripe.
• Sending emails is handled by: SendGrid.
• The data is stored by: MongoDB Atlas Database.

License

MIT