Skip to content

Commit 7b66ab2

Browse files
marcelodosreismarcelodosreis
authored
Merge pull request #9 from marcelodosreis/develop
Release v0.0.2
2 parents 75601e0 + c404536 commit 7b66ab2

31 files changed

+9555
-204
lines changed

‎README.md

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,21 @@
1010

1111
Welcome to **Sassy**, a powerful template generator designed to accelerate the development of Micro-SaaS applications. Built with **Next.js 15**, **TypeScript**, **TailwindCSS**, **Supabase**, and **Stripe**, Sassy provides a robust foundation for building subscription-based services with integrated authentication, subscription management, and payment processing.
1212

13-
| **Feature** | **Status** |
14-
|--------------------------------------------------|------------|
15-
| OAuth Authentication (Google, Facebook, Twitter) | ✅ |
16-
| Subscription Management (Stripe) | ✅ |
17-
| Billing Portal (Stripe) | ✅ |
18-
| Webhooks for Stripe Events | ✅ |
19-
| API Routes for Subscriptions and Payments | ✅ |
20-
| User Authentication (Supabase) | ✅ |
21-
| Personalized Dashboard for Users | ✅ |
22-
| Responsive Design + Landing Page (TailwindCSS) | ✅ |
23-
24-
25-
On Progress
13+
| **Feature** | **Status** |
14+
|-----------------------------------------|------------|
15+
| OAuth Authentication (Google, FB, Twitter) | ✅ |
16+
| Subscription & Billing (Stripe) | ✅ |
17+
| Free Trial Periods (Stripe) | ✅ |
18+
| Billing Portal (Stripe) | ✅ |
19+
| Webhooks for Stripe Events | ✅ |
20+
| Subscriptions & Payments API Routes | ✅ |
21+
| User Authentication (Supabase) | ✅ |
22+
| Personalized Dashboard | ✅ |
23+
| Responsive Design + Landing Page | ✅ |
24+
| Logs & Monitoring (Datadog) | ✅ |
25+
26+
You can learn more about the other features by visiting the following documentation page: [Sassy Documentation](https://github.com/marcelodosreis/sassy/blob/develop/docs).
27+
2628
We are constantly improving Sassy with new features to make it even more powerful. You can find the current roadmap and planned features on our [Feature Roadmap](https://github.com/marcelodosreis/sassy/blob/develop/docs/feature-roadmap.md)
2729

2830

@@ -38,7 +40,6 @@ src/
3840
├── components/ # Reusable UI components
3941
├── constants/ # Global constants and configurations
4042
├── contexts/ # React contexts for global state management
41-
├── handlers/ # Event handlers and backend logic
4243
├── hooks/ # Custom React hooks
4344
├── libs/ # Third-party libraries and utilities
4445
├── pages/ # Next.js pages corresponding to routes
@@ -76,15 +77,20 @@ create table subscriptions (
7677
The environment variables are configured to integrate Sassy with Supabase and Stripe. Make sure to update the values accordingly.
7778

7879
```env
79-
NEXT_PUBLIC_PROJECT_URL=http://localhost:3000
80+
NEXT_PUBLIC_PROJECT_URL=
81+
82+
NEXT_PUBLIC_SUPABASE_ANON_KEY=
83+
NEXT_PUBLIC_SUPABASE_URL=
84+
85+
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
8086
81-
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
82-
NEXT_PUBLIC_SUPABASE_URL=https://your_supabase_url
83-
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
87+
NEXT_PUBLIC_DATADOG_APPLICATION_ID=
88+
NEXT_PUBLIC_DATADOG_CLIENT_TOKEN=
8489
85-
SUPABASE_SECRET_KEY=your_supabase_secret_key
86-
STRIPE_SECRET_KEY=your_stripe_secret_key
87-
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
90+
SUPABASE_SECRET_KEY=
91+
STRIPE_SECRET_KEY=
92+
STRIPE_WEBHOOK_SECRET=
93+
DATADOG_SECRET_KEY=
8894
```
8995

9096
> **Note:** Replace the above values with your own Supabase and Stripe keys.

‎docs/datadog.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Sassy Integration with Datadog: Real User Monitoring (RUM)
2+
3+
To enable Real User Monitoring (RUM) for Sassy, you need to set up your environment with two essential keys and then configure your Datadog dashboard for monitoring.
4+
5+
## 1. Set up Datadog Keys in `.env`
6+
7+
The integration requires two environment variables to connect Sassy to Datadog's RUM service. These keys should be added to your `.env` file in your project:
8+
9+
```
10+
NEXT_PUBLIC_DATADOG_APPLICATION_ID=<your-application-id>
11+
NEXT_PUBLIC_DATADOG_CLIENT_TOKEN=<your-client-token>
12+
```
13+
14+
- **`NEXT_PUBLIC_DATADOG_APPLICATION_ID`**: This is the unique application ID provided by Datadog for your RUM integration.
15+
- **`NEXT_PUBLIC_DATADOG_CLIENT_TOKEN`**: This is the client token provided by Datadog to authenticate the RUM events.
16+
17+
## 2. Configure Datadog for RUM
18+
19+
Once the keys are set, the next step is to configure the Datadog RUM on your Datadog dashboard:
20+
21+
1. Go to your **Datadog Dashboard**.
22+
2. Navigate to **Digital Experience** in the Datadog menu.
23+
3. Under **Digital Experience**, select **Real User Monitoring** (RUM).
24+
4. Here, you can monitor all the user interactions, page views, and error tracking from your Sassy app.
25+
26+
## 3. Troubleshooting
27+
28+
If the RUM data is not appearing or working correctly, follow these troubleshooting steps:
29+
30+
### 3.1. Verify Environment Variables
31+
Ensure that the **`NEXT_PUBLIC_DATADOG_APPLICATION_ID`** and **`NEXT_PUBLIC_DATADOG_CLIENT_TOKEN`** environment variables are correctly set. Double-check that the `.env` file is correctly loaded in your application, and restart the server if necessary.
32+
33+
### 3.2. Check Browser Console
34+
Open the browser developer tools and check the console for any errors related to Datadog RUM. The Datadog library should be properly initialized, and there should be no issues with loading the RUM events. You can also verify if there are network requests to Datadog's RUM endpoints.
35+
36+
### 3.3. Datadog Dashboard
37+
Once you have successfully set up RUM, check the **Real User Monitoring** section in your Datadog dashboard to ensure that the data is coming through. You should see:
38+
39+
- **Session Data**: User interactions such as clicks, page loads, and scrolls.
40+
- **Errors**: Any frontend errors encountered by users (JavaScript errors, etc.).
41+
- **Page Performance**: Metrics related to how long the pages take to load.
42+
43+
If the data does not show up immediately, it may take a few minutes for Datadog to process the RUM data.
44+
45+
### 3.4. Validate RUM Initialization
46+
Ensure that the RUM configuration is being initialized properly in the **client-side** of your application, as RUM needs to track user interactions in the browser.
47+
48+
## 4. Final Notes
49+
50+
Once everything is set up correctly, you should be able to see RUM data flowing into Datadog, providing insights into your users' interactions with your Sassy app. Use Datadog’s analytics and troubleshooting tools to monitor performance, detect issues, and improve the user experience.
51+
52+
For more information on RUM and Datadog setup, check the [official Datadog documentation](https://docs.datadoghq.com/real_user_monitoring/).

‎docs/feature-roadmap.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@
66

77
| **Feature** | **Status** |
88
|----------------------------------------------------|------------|
9-
| Trial Periods for Subscription Plans | ⬜ |
10-
| Detailed Logs and Monitoring | ⬜ |
11-
| Dark/Light Theme | ⬜ |
9+
| Trial Periods for Subscription Plans | ✅ |
10+
| Detailed Logs and Monitoring | ✅ |
1211
| Translation and Multilingual Support (i18n) | ⬜ |
12+
| Dark/Light Theme | ⬜ |
13+
1314

1415
---
1516

1617
### **🛠️ Medium Priority (Expand Features and Attract Users)**
1718

1819
| **Feature** | **Status** |
1920
|----------------------------------------------------|------------|
20-
| Free Plan with Limitations | ⬜ |
2121
| Team Features | ⬜ |
2222
| Integration with Transactional Emails | ⬜ |
2323
| Multi-Currency Support in Stripe | ⬜ |
@@ -33,6 +33,4 @@
3333
| Offline Support | ⬜ |
3434
| Admin Dashboard | ⬜ |
3535
| Plan Customization | ⬜ |
36-
| Charts and Metrics in Admin Dashboard | ⬜ |
37-
38-
Let me know if you'd like to make any changes or additions!
36+
| Charts and Metrics in Admin Dashboard | ⬜ |

‎docs/free-trial.md

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# Trial Functionality in `Pricing` Component
2+
3+
## Overview
4+
5+
The `Pricing` component, located at `sassy/src/components/Pricing/index.tsx`, includes functionality for enabling a free trial period for users. This feature is now controlled via a constant in `sassy/src/constants/FreeTrial.ts`, allowing developers to easily enable or disable the trial and set the trial duration if desired.
6+
7+
## Enabling/Disabling the Trial Feature
8+
9+
The trial feature is managed by the constant `HAS_FREE_TRIAL` in `sassy/src/constants/FreeTrial.ts`. This flag determines whether the free trial functionality is active. By default, this flag is set to `false`, but it can be modified as needed.
10+
11+
### How to Enable the Trial:
12+
13+
1. Open the `FreeTrial.ts` file at `sassy/src/constants/FreeTrial.ts`.
14+
2. Locate the constant `HAS_FREE_TRIAL`.
15+
3. Set the constant to `true` to enable the trial or leave it as `false` to disable it.
16+
17+
```js
18+
// sassy/src/constants/FreeTrial.ts
19+
export const HAS_FREE_TRIAL = false; // Trial disabled
20+
// OR
21+
export const HAS_FREE_TRIAL = '7d'; // Trial enabled for 7 days
22+
```
23+
24+
### Example:
25+
26+
When `HAS_FREE_TRIAL` is set to `'7d'`, a message informing the user about the free trial will be displayed. This message typically says:
27+
28+
```
29+
You have a free trial for 7 days!
30+
Try our service with no commitment.
31+
```
32+
33+
This message is shown to the user inside a styled notification.
34+
35+
## Trial Feature Behavior
36+
37+
### 1. Display of Trial Information
38+
39+
If `HAS_FREE_TRIAL` is set to `'7d'`, the component will display a message informing users that they have a trial period available for 7 days.
40+
41+
```js
42+
// sassy/src/components/Pricing/index.tsx
43+
import { HAS_FREE_TRIAL } from '../../constants/FreeTrial';
44+
45+
{HAS_FREE_TRIAL && (
46+
<div className="mt-4 bg-indigo-100 p-4 rounded-md text-gray-800">
47+
<p className="text-lg font-bold">
48+
You have a free trial for {HAS_FREE_TRIAL}!
49+
</p>
50+
<p>Try our service with no commitment.</p>
51+
</div>
52+
)}
53+
```
54+
55+
### 2. Impact on Other Pricing Plans
56+
57+
The trial functionality operates alongside the available pricing plans. If a user opts for the trial, they will still be able to select any subscription plan afterward, either on a monthly or annual basis. The trial does not affect the ability to choose between these billing options.
58+
59+
### 3. Customization of Trial Duration
60+
61+
You can customize the duration of the trial by setting the `HAS_FREE_TRIAL` variable to any string value representing the duration (e.g., `'7d'` for 7 days, `'14d'` for 14 days, etc.).
62+
63+
Example:
64+
65+
```js
66+
// sassy/src/constants/FreeTrial.ts
67+
export const HAS_FREE_TRIAL = '14d'; // Trial enabled for 14 days
68+
```
69+
70+
### 4. Checkout Flow
71+
72+
During the trial period, users are not charged. However, once the trial ends, users can proceed to the checkout flow to select a paid plan. The `Pricing` component handles the checkout process by invoking Stripe's API for processing payments.
73+
74+
- **Monthly and Annual Billing Options**: The toggle in the component allows users to choose between monthly or annual payment options, and the selected option will apply when they switch from the trial to the paid plan.
75+
- **Handling Free Plan**: If a user selects the "free" plan, no checkout session is created, and no payment is processed.
76+
77+
## Conclusion
78+
79+
The free trial functionality in the `Pricing` component offers a flexible way to give users an initial, risk-free experience with your service. By enabling or disabling the trial through the `HAS_FREE_TRIAL` constant in `FreeTrial.ts`, developers can easily manage the availability of the trial. The trial period does not interfere with the checkout process, allowing users to seamlessly transition from the trial to a paid plan when they're ready.
80+
81+
### Customization
82+
83+
- Modify the `HAS_FREE_TRIAL` constant in `FreeTrial.ts` to enable or disable the trial.
84+
- Set the trial duration by changing the value of `HAS_FREE_TRIAL` (e.g., `'7d'` for 7 days).
85+
- Integrate with other components like `Toggle` for monthly/annual billing options.
86+

0 commit comments

Comments
 (0)