- 摘要
- Deploy your project with Firebase Auth, Bootstrap UI Kit, Cloud Firestore, Stripe payments, and Google Analytics hosting on Vercel. Customize styles via SASS variables or scoped CSS files for seamless integration.
## 👉 Get Started
Install dependencies
```
npm install
```
Update your `.env` file with values for each environment variable
```
API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas
etc ...
```
Install the Vercel CLI
```
npm install -g vercel
```
Link codebase to a Vercel project and run development server
```
vercel dev
```
When the above command completes you'll be able to view your website at `http://localhost:3000`.
_Note: You can run just the front-end with `npm run start`, but `vercel dev` also handles running your API endpoints (located in the `/api` directory)._
## 🥞 Stack
This project uses the following libraries and services:
- Framework - [Create React App](https://create-react-app.dev) with React Router
- UI Kit - [Bootstrap](https://react-bootstrap.github.io)
- Authentication - [Firebase Auth](https://firebase.google.com/products/auth)
- Database - [Cloud Firestore](https://firebase.google.com/products/firestore)
- Payments - [Stripe](https://stripe.com)
- Newsletter - [Mailchimp](https://mailchimp.com)
- Contact Form - [Formspree](https://formspree.io)
- Analytics - [Google Analytics](https://googleanalytics.com)
- Hosting - [Vercel](https://vercel.com)
Styles
You can edit Bootstrap SASS variables in the global stylesheet located at src/styles/global.scss. Variables allow you to control global styles (like colors and fonts), as well as element specific styles (like button padding). Before overriding Bootstrap elements with custom style check the Bootstrap docs to see if you can do what need by tweaking a SASS variable.
Custom styles are located in their related component's directory. For example, if any custom style is applied to the Navbar component you'll find it in src/components/Navbar.scss. We ensure custom styles are scoped to their component by prepending the classname with the component name (such as .Navbar__brand). This ensures styles never affect elements in other components. If styles need to be re-used in multiple components consider creating a new component that encapsulates that style and structure and using that component in multiple places.
Install dependencies
```
npm install
```
Update your `.env` file with values for each environment variable
```
API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas
etc ...
```
Install the Vercel CLI
```
npm install -g vercel
```
Link codebase to a Vercel project and run development server
```
vercel dev
```
When the above command completes you'll be able to view your website at `http://localhost:3000`.
_Note: You can run just the front-end with `npm run start`, but `vercel dev` also handles running your API endpoints (located in the `/api` directory)._
## 🥞 Stack
This project uses the following libraries and services:
- Framework - [Create React App](https://create-react-app.dev) with React Router
- UI Kit - [Bootstrap](https://react-bootstrap.github.io)
- Authentication - [Firebase Auth](https://firebase.google.com/products/auth)
- Database - [Cloud Firestore](https://firebase.google.com/products/firestore)
- Payments - [Stripe](https://stripe.com)
- Newsletter - [Mailchimp](https://mailchimp.com)
- Contact Form - [Formspree](https://formspree.io)
- Analytics - [Google Analytics](https://googleanalytics.com)
- Hosting - [Vercel](https://vercel.com)
Styles
You can edit Bootstrap SASS variables in the global stylesheet located at src/styles/global.scss. Variables allow you to control global styles (like colors and fonts), as well as element specific styles (like button padding). Before overriding Bootstrap elements with custom style check the Bootstrap docs to see if you can do what need by tweaking a SASS variable.
Custom styles are located in their related component's directory. For example, if any custom style is applied to the Navbar component you'll find it in src/components/Navbar.scss. We ensure custom styles are scoped to their component by prepending the classname with the component name (such as .Navbar__brand). This ensures styles never affect elements in other components. If styles need to be re-used in multiple components consider creating a new component that encapsulates that style and structure and using that component in multiple places.
