DEV Community: rcmisk

Launching IdeaVerify to Streamline Idea Validation — My #BuildInPublic Journey — episode 1

rcmisk — Tue, 19 Mar 2024 10:28:44 +0000

Introduction

I'm finally going to start my #buildinpublic journey! On the journey you will see how I came across a problem, how I chose to solve it and finally how to launch! Each week I'll post what I've worked on and share what I built, so others can learn along the way. Let's get started!

The Genesis:

My coding adventure began as an attempt to bring my brother's vision for a college-centric social network to life. Despite months of development and launching with an initial user base, the lack of market validation led to its stagnation. This pivotal experience highlighted the crucial step we missed—validating the idea before fully committing to its development.

The Awakening:

Fast forward to the present, I've recognized a recurring pattern in my approach to projects—a cycle of enthusiasm followed by a realization of misalignment with market needs. This realization sparked the concept of 'IdeaVerify', a meta-solution born from the lessons learned throughout my journey.

Below is the manual process I did to test out this idea:

Came up with a solution to a problem.
I built a simple landing page describing the problem and the solution.
I described the features, services, and prices with CTA's like Signup Now, or Subscribe now etc. All of the Purchase Now CTA's would not actually allow the user to purchase the SaaS but would show the user to sign up for a waitlist.
I then took that static page and deployed it on places for free like Netlify or Render
The only thing I had to pay for to make it look legit was a Domain address, and to do that I would go to Namecheap to purchase a cheap domain.
Once created I published it to channels like Reddit, Twitter, Quora, Linkedin, Facebook and showed it to users of whom I thought would benefit.
I then analyzed what type of interest I got and from there I made a decision if it's worth it to build.

This is how I came up with Ideaverify! I actually went through the entire manual process above and got a lot of interest by just posting on one or two subreddits on Reddit. I got signups, and messages saying that it was real interesting and that people were wondering when it would be ready.

This is how Ideaverify was born. I wanted to automate this entire process of validating or verifying an idea. It would automate all of the above, all at the click of a button but also provide analytics and a "go or no go" decision.

In this #buildinpublic series I will be using my boilerplate.rcmisk.com SaaS starter kit built in Django and React with all the common SaaS features: transactional emails w/ Postmark, Stripe for payments/subscriptions, Google Analytics, dynamic landing page and copy creation, blog, user login/registration flows, Material UI for styling and deployment to Render.

I'm going to break up this project into different parts, and milestones and show the code, learnings and development along the way!

Milestone 1

Allow user to input what their SaaS is all about and then generate a landing page based off the copy the user provided and different template styles
Automatically create a google analytics app pointing to the url for tracking
User clicks "Create" and behind the scenes deploy the static landing page pointing to a unique URL associated with ideaverify.com subdomain. i.e. my-new-idea.ideaverify.com
Allow user to update copy, images, and style once it's deployed

Milestone 2

Allow user to pick niche subreddits on Reddit and post to from within the ideaverify dashboard.
Show top subreddits/posts on Reddit to post to based off key words that their SaaS is associated with.

Milestone 3

Allow user to point it to their custom domain This I believe will be a good MVP and stopping place to launch Ideaverify!

Follow me here:

https://rcmisk.com

https://twitter.com/rcmisk

https://indiehackers.com/rcmisk

https://dev.to/rcmisk

How to Set Up a Django and React SaaS Boilerplate: A Step-by-Step Guide

rcmisk — Wed, 13 Mar 2024 23:32:27 +0000

Starting a Software as a Service (SaaS) project can be daunting, especially with the initial setup of the infrastructure. Luckily, with the right boilerplate, much of the groundwork is laid out for you. This guide will walk you through setting up a SaaS application using a specific Django backend and React frontend code, including integrating Stripe for payments, Postmark for emails, user management and authentication, Cloudinary for media file uploads, dynamically rendered landing page, blog creation through Django Admin, Google Analytics, Material UI, setting up a PostgreSQL database, and deploying to Render.com. Let's dive in!

Backend Setup
Initial Setup
Create a Project Folder: Start by navigating to your Desktop or preferred directory in your terminal and create a folder named saas-boilerplate. Then, create a subdirectory named backend and navigate into it.

 cd Desktop
 mkdir saas-boilerplate
 cd saas-boilerplate
 mkdir backend
 cd backend

Clone the Boilerplate Repository: Clone the backend boilerplate repository into your backend directory.

git clone https://github.com/rcmiskin10/dj_react_saas_backend_render_template.git .

Set Up a Virtual Environment: Use virtualenv to create an isolated Python environment. Activate it and install the project's dependencies.

 pip install virtualenv
 python3.8 -m venv env
 source env/bin/activate
 pip install -r requirements.txt

Environmental Variables: Create a .env file in your backend directory. Populate it with the necessary environmental variables provided below:

 STRIPE_API_TEST_PK=<STRIPE_API_TEST_PK>
 STRIPE_API_TEST_SK=<STRIPE_API_TEST_SK>
 STRIPE_LIVE_MODE=False
 PROD_BACKEND_URL=<PROD_BACKEND_URL>
 PROD_FRONTEND_URL=<PROD_FRONTEND_URL>
 BACKEND_URL=http://127.0.0.1
 FRONTEND_URL=http://localhost:3000
 DEBUG=True
 DEV_EMAIL_HOST_USER=<DEV_EMAIL_HOST_USER>
 DEV_EMAIL_HOST_PASSWORD=<DEV_EMAIL_HOST_PASSWORD>
 POSTMARK_SERVER_TOKEN=<POSTMARK_SERVER_TOKEN>
 DEFAULT_FROM_EMAIL=<DEFAULT_FROM_EMAIL>

Now you need to set up Stripe.

If you do not have a stripe account register a free one here: dashboard.stripe.com/register. If you do have a stripe account login here: dashboard.stripe.com/login.

Once account is set up or you're logged in, turn on Test Mode (Toggle button in top right corner of dashboard) it should bring you to: dashboard.stripe.com/test/payments

Go to dashboard.stripe.com/test/apikeys

Grab your Publishable key token and set the environmental variable STRIPE_API_TEST_PK in your .env file created above.

Next grab your Secret key token and set the environmental variable STRIPE_API_TEST_SK in your .env file created from above.

Next go to Stripe Products to add your products, i.e. subscription tiers

Add as many tiers as you want i.e.

Free w/ a description and price: $0

Pro w/ a description and price: say $10

Make sure both are Recurring and Monthly or however you would like to set up your subscriptions.

Postgres Database Setup: Download and install PostgreSQL. You can use this download link. Once installed, create a database named postgres and ensure your settings.py reflects the correct database settings. For example: default="postgresql://postgres:postgres@localhost/postgres" , if your database name is postgres.

Apply migrations and create a superuser for Django admin access.

 python manage.py migrate
 python manage.py createsuperuser

Running the Server: Start your Django server and log into the admin panel to verify that everything is set up correctly.

 python manage.py runserver

Integrating Stripe Products and Prices, Email, and Landing Page data
Add Products and Prices: Navigate to the Django admin payments section to add Stripe products and their prices. Ensure each product in Django matches its counterpart in Stripe, including the recurring intervals and price IDs.

You can find Stripe Product Id in stripe products and click on product and in the URL you will see an ID with prefix prod_xxxxxxxx and letters and numbers as the unique id.
Do the same for all products
Now go to Django Admin Product Price
Add the price for each product from Stripe here: Django Admin Add Product Link
Select Product that you added to Django Admin.
Add the Price from what you entered on Stripe. Add the interval, i.e. Monthly
Add the stripe price id
Go to https://dashboard.stripe.com/test/products?active=true
Select the Product and scroll down to Pricing and look under API ID and copy id with prefix and numbers/letters like price_xxxxxxxxx and paste into stripe price id on django admin.
Do for all products
Now you can add descriptions of the tiers here: Django Admin Add Product Description Link
Add as many description list items for each product
Email Setup: Configure your development email settings by adding DEV_EMAIL_HOST_USER and DEV_EMAIL_HOST_PASSWORD to your .env file, using an app password generated from your Gmail account.
Set DEV_EMAIL_HOST_USER to your gmail for DEV testing
Set your DEV_EMAIL_HOST_PASSWORD to the password set up in your gmail account from above. You need to create an App Password in: https://myaccount.google.com/security
Make sure 2-Step Authentication is enabled.
Then go to https://myaccount.google.com/apppasswords and create a new app and a new password will be created.
Now Emails will be sent through gmail smtp in DEV
Next up is setting up the landing page data.
Note here you can add whatever copy, images, icons, you would like through the Django admin
Go to http://127.0.0.1:8000/admin/landingpage/landingpage/add/
Add the hero section copy and image
Add the features of your SaaS
the Feature mui icon name: can be selected from https://mui.com/material-ui/material-icons/?query i.e. find Add and get the name of the icon from the end of the import in the modal import AddIcon from '@mui/icons-material/Add'; i.e. Add
You can add as many features as you like and Order them however you like by applying 1,2,3... to each feature. i.e. 1 will be first in line.
Do the same for how it works, Secondary hero, and Social Media Links
We will set up prod environmental variables later.

Frontend Setup
Setting Up the Frontend: In a new terminal, navigate to your project root and set up the frontend directory by cloning the frontend boilerplate repository. Install dependencies with npm install.

 mkdir frontend
 cd frontend
 git clone https://github.com/rcmiskin10/dj_react_saas_frontend_render_template.git .
 npm install

Configure Environment Variables: Create a .env file in your frontend directory. Add your Stripe Publishable key and Google Analytics ID.
Add the publishable key from Stripe to the environmental variable REACT_APP_STRIPE_API_TEST_PK with the value from STRIPE_API_TEST_PK in backend/.env
Now add an environmental variable REACT_APP_GA_ID for Google Analytics
Go to https://analytics.google.com/
Add an analytics account
Add an app
Go to top search bar and search for MEASUREMENT ID in Data Streams and copy the ID that has prefix G-XXXXXXXX
Past that G-XXXXXXXX as value for environmental variable REACT_APP_GA_ID in frontend/.env
Start the Frontend Server: Run npm start to launch your React app. Your SaaS landing page should now be visible at http://localhost:3000/.

Deploying to Render.com

Prepare for Deployment: Ensure your backend and frontend folders are pushed to separate GitHub repositories.
Deploying the Backend: Follow Render.com's documentation to deploy your Django app, adding the necessary environment variables for production, including Stripe keys, Cloudinary for media files, and email settings via Postmark.
Follow tutorial here: https://docs.render.com/deploy-django#use-renderyaml-for-deploys
The backend/render.yaml already exists in the saas boilerplate. You can change all the names to fit whatever you like, but our boilerplate named everything backend
In the Render Dashboard, go to the Blueprints page and click New Blueprint Instance.
Make sure to first create a repository to hold your backend/ folder on github.
Now you can select the repository that contains your blueprint and click Connect.
Give your blueprint project a name and click Apply.
Now add the Production Environmental Variables by clicking the backend app and going to Environment
Add you Stripe STRIPE_API_TEST_PK found in your local .env file or if you are ready to use live Stripe data use the Production PK found in stripe dashboard.
Same with the:

STRIPE_API_TEST_SK
STRIPE_LIVE_MODE=False

BACKEND_URL will be the url that your backend render app is pointing to: something similar to this backend-xxxxonrender.com
For your media files first set up Cloudinary account by going to the cloudinary website and create a free cloudinary account. After your account has been created, go to the dashboard page and copy the cloud name, api key and api secret.
Add the cloud name to CLOUDINARY_CLOUD_NAME
Add the api key to CLOUDINARY_API_KEY
Add the api secret to CLOUDINARY_API_SECRET
For your emails create a postmark account here https://postmarkapp.com/. Follow instructions here: https://postmarkapp.com/support/article/1008-what-are-the-account-and-server-api-tokens to find your Server API Token and set it to POSTMARK_SERVER_TOKEN
Set DEFAULT_FROM_EMAIL to your email with postmark.
After you deploy the frontend app below, come back to setting FRONTEND_URL
Finally run python manage.py createsuperuser in the Render shell in the settings of the backend app so that you can create an admin account.
To see your backend admin page, go to <YOUR_APP_URL>/admin to login.
Deploying the Frontend: Deploy your React app on Render.com, setting environment variables for connecting to the backend API, Stripe, Cloudinary, and Google Analytics.
Connect your github account here: https://dashboard.render.com/select-repo?type=static
Follow the instructions to deploy
Once deployed go to settings for frontend app
In Redirect/Rewrite rules add:

/* as Source

/index.html as Destination

And `Rewrite as Action

Now go to Environment and add:

REACT_APP_STRIPE_API_TEST_PK to same Stripe API Key that you set in backend

Add REACT_APP_BACKEND_API_URL and use the backend url from above after backend was deployed
Add your REACT_APP_MEDIA_URL to the Cloudinary url. Something like this https://res.cloudinary.com/xxxxxxx/image/upload/v1/ The xxxxxxx should be found in your cloudinary dashboard that you used in backend set up.
Now add REACT_APP_GA_ID from your .env REACT_APP_GA_ID in local file.
Finally take the Frontend url from the react frontend app and set it in the backend app on render.com's environmental variable FRONTEND_URL that you previously set up.
Final Adjustments: After deploying both frontend and backend, ensure all environment variables are correctly set and pointing to the right services. Test your live application to ensure everything works seamlessly.

Congratulations! You've successfully set up and deployed your SaaS boilerplate application. This setup provides a solid foundation for developing your SaaS product, with scalable options for payment processing, database management, and deployment strategies. Happy coding!

Coming soon!

Deploy to GCP Cloud Run w/ React inside Django's static files!

Automate all steps in this blog post, all at the click of button!

Tutorials on the code for both backend and frontend repos!

https://github.com/rcmiskin10/dj_react_saas_backend_render_template

https://github.com/rcmiskin10/dj_react_saas_frontend_render_template

P.S comment below on any issues!

Sign up for my newsletter to hear about my #buildinpublic journey! See original post here: https://rcmisk.com/how-to-set-up-a-django-and-react-saas-boilerplate-a-step-by-step-guide