Quickstart

This guide is designed to equip you with everything you need to effectively utilize the AI SaaS Template for your Django project. We're going to take you through the process of launching a website, using InterviewDB.com as our example.

Utilizing the AI SaaS Template, we'll create a platform where users can access a vast collection of interview questions and answers. This service will include features for charging access fees, managing subscriptions, and organizing user groups.

The project structure is as follows:

(venv) interview_db $ tree -L 1
.
├── LICENSES.txt
├── Procfile
├── config
├── interview_db
├── manage.py
├── package.json
├── requirements
├── requirements.txt
├── runtime.txt
└── tailwind.config.js

4 directories, 7 files

And it also comes with 4 Django apps located inside of the interview_db/interview_db directory:

(venv) interview_db $ cd interview_db
(venv) interview_db $ pwd
/Users/leon/projects/interview_db/interview_db
(venv) interview_db $ tree -L 1
.
├── __init__.py
├── blog  # A Django app that comes pre-packaged with the template for marketing purposes
├── conftest.py
├── contrib
├── static
├── subscription # A Django app that allows users to subscribe to the service and manage their subscriptions
├── templates
├── tools # A Django AI app that demonstrates the use of OpenAI's GPT API
├── users # A Django app that allows users to sign up, log in, and manage their accounts
└── utils

• blog: This will serve as a cornerstone for initiating marketing efforts for your newly created website.
• subscription: This app allows users to subscribe to the service and manage their subscriptions.
• users: This app allows users to sign up, log in, and manage their accounts.
• tools: This is a demonstration of how to integrate OpenAI's GPT API, our example is a cover letter writer for job candidate.

Each of these apps is meticulously designed to augment your website's functionality and user experience so you can start making your first dollar online quickly.

Let's explore the setup and utilization of these apps in the subsequent sections, ensuring you have all the necessary information to effectively integrate and leverage these features.

Prerequisites

For demonstration purposes, we will use the following details for our project:

• Project name: Interview DB
• Domain: interviewdb.com
• Development environment: macOS (Apple)

The AI SaaS Template includes the following technologies:

• Frontend: Tailwind CSS
• Database: PostgreSQL
• Backend: Django
• Deployment: Heroku
• Payment: Stripe
• Email: Mailgun
• Blog: TinyMCE
• Python Version: 3.11
• Static File Storage: AWS S3 for images and files in production

Download the Boilerplate

If you haven't yet, you can purchase and download our boilerplate directly from the AI SaaS Template website. This is your first step towards building your project with our comprehensive tools and features.

Setting Up the PostgreSQL Database

To kickstart your project, the initial step involves setting up the PostgreSQL database. PostgreSQL is our chosen database management system due to its robustness and reliability.

Installation

If PostgreSQL is not yet installed on your machine, you need to first download and install it. For Mac users, a comprehensive installation guide is provided by SQLPad. Follow the instructions in the PostgreSQL Mac Installation Guide to get PostgreSQL up and running on your system.

Creating Your Project Database

With PostgreSQL installed, the next step is to create a new database dedicated to your project. This can be accomplished directly from your terminal by executing the following command:

createdb interview_db

This command initializes a new database named interview_db, which you will use to store and manage your project's data.

Django Project Dependencies

With the database now ready, the next phase is to install the project dependencies. We'll utilize virtualenv for creating an isolated environment for our Django project.

Let's get started!

Installing Virtualenv

Should virtualenv not be installed on your system, it's necessary to install it first. This can be done through the following commands in your terminal:

python3 -m pip install --upgrade pip
pip install virtualenv

brew install virtualenv

Creating a Virtual Environment

Once virtualenv is installed, the subsequent step is to establish a virtual environment for your project. Execute the command below in your terminal to create it:

virtualenv -p python3 venv

Activating the Virtual Environment

To activate the virtual environment you've just created, use the following command:

source venv/bin/activate

Installing Project Dependencies Finally, to install your local project dependencies, run this command in your terminal:

pip install -r requirements/local.txt

This series of steps ensures your project's dependencies are correctly managed and isolated, leveraging virtualenv for an efficient development workflow.

Setting Up Environment Variables

Configuring environment variables is a crucial step in managing configurations and secrets for your project. Follow these steps to efficiently set up your environment variables.

Our project includes a built-in .env file located at the root directory, designed for storing your environment variables during local development. You can locate this .env file at the project's root. To update your environment variables, simply open the .env file and modify the variables as needed.

export STRIPE_PUBLISHABLE_KEY=pk_your_stripe_publishable_key_for_testing
export STRIPE_SECRET_KEY=sk_your_stripe_secret_key_for_testing
export STRIPE_ENDPOINT_SECRET=your_stripe_endpoint_secret_for_webhook

export OPENAI_API_KEY=your_openai_api_key

Loading the Environment Variables

To make the environment variables available, you have two options:

Manually Load the Variables

Run this command at the root of your project to load the variables (every time you open a new terminal window):

source .env

Automate Loading on Virtual Environment Activation

To streamline your workflow, you can set up your virtual environment to automatically load environment variables every time it's activated. To achieve this, simply append the command that loads the .env file to the tail end of the venv/bin/activate script. This modification ensures that your environment variables are always correctly set whenever you start working in your virtual environment, enhancing both convenience and consistency in your development process.

echo "source .env" >> venv/bin/activate

By following these steps, you ensure that your environment variables are seamlessly integrated into your local development workflow, enhancing security and configuration management.

If your .gitignore does not currently include the .env file, you can easily add it by inserting a line with .env into the .gitignore file. This step ensures that confidential data, such as passwords and API keys stored in the .env file, remain secure and unexposed in your repository.

Verifying Project Setup

After configuring your environment, it's crucial to verify that your Django project is up and running. Follow these steps to ensure everything is set up correctly.

Starting the Development Server

To check if your project runs correctly, initiate the development server by executing the command below in your terminal:

python manage.py runserver

Upon running this command, your terminal will display several pieces of information, including the URL of your local development server. You will also see a message indicating that your project needs migrations.

Database Migration

Before accessing the server, it's essential to migrate your database to ensure all database schemas are up to date. Execute the migration command:

python manage.py migrate

This command prepares your database for use, applying any pending migrations.

Accessing the Development Server

With migrations complete, restart your development server:

python manage.py runserver

You can now access your project by navigating to the provided URL in your browser http://localhost:8000 . Note that the appearance may seem unstyled and poorly formatted at this stage, as Tailwind CSS has not been integrated yet.

Next Steps

Proceed to style your application with Tailwind CSS to enhance its visual appeal and user experience.

Installing Tailwind CSS

To begin styling your website with Tailwind CSS, it's essential to have both Node.js and Tailwind CSS installed on your system. Follow these steps to ensure a smooth installation process.

Installing Node.js

Firstly, if Node.js is not already installed on your system, it's necessary to download and install it. Visit the Node.js website for the latest version and installation instructions.

Verifying Node.js Installation

After installing, verify the installation by checking the Node.js version installed on your system. Open your terminal and run the following command:

node -v

A version number like v21.6.1 indicates that Node.js is successfully installed and ready for use.

Installing Tailwind CSS

With Node.js in place, you can proceed to install Tailwind CSS. This guide assumes your project template already includes a pre-configured tailwind.config.js file and package.json, eliminating the need for npm init.

Tailwind CSS Installation Command

To install Tailwind CSS, execute the following command in your terminal from the root directory of your project:

npm install -D tailwindcss
npm install -D @tailwindcss/forms
npm install -D @tailwindcss/typography

This command installs Tailwind CSS as a development dependency in your project, setting the stage for you to begin styling your website.

Generating Tailwind CSS File

To apply Tailwind CSS styling to your website, you must generate the necessary CSS file. This involves monitoring an input CSS file for changes and outputting the updated styles to another CSS file. Follow the steps below to set up this process.

Tailwind CSS Command

Execute the following command in your terminal to start the CSS generation process. Ensure to replace interview_db with your actual project slug to correctly target your project's directories.

npx tailwindcss -i ./interview_db/static/css/input.css -o ./interview_db/static/css/output.css --watch

This command watches the input.css file for any changes and outputs the compiled styles to the output.css file. Keep this command running in a terminal window to continuously monitor and compile your styles.

Accessing Your Styled Page

With the Tailwind CSS file generated and the watch process running, visit http://localhost:8000 in your web browser. You should now see your project's default landing page styled with Tailwind CSS.

Troubleshooting Tips

If the page does not display the updated styles, try refreshing the page with CMD+Shift+R (Mac) to clear the cache.

Should issues persist, stop the Django development server by pressing Ctrl+C in your terminal, then restart it with python manage.py runserver.

Moving Forward

Now that Tailwind CSS is installed, you're set to start styling your website. While this guide covers the basics of installing Tailwind CSS, for more advanced usage, such as incorporating the official Tailwind UI or the popular DaisyUI plugin, visit our Tailwind CSS Guide.

Next Steps

With Tailwind CSS successfully integrated into your Django project, you're now equipped to further customize and enhance your website's design and user experience. As you continue developing, keep the CSS generation command running to automatically apply your style changes.

Committing Changes

Once you're satisfied with the changes and everything is working as expected, commit your modifications to your Git repository using the appropriate Git commands.

After integrating Tailwind CSS into your project and ensuring everything works correctly, the next step is to save your changes using Git. This process involves initializing a Git repository (if not already done), adding your project files to the repository, and making your initial commit. Follow these steps to secure your work.

Initializing Git Repository

If your project is not already a Git repository, start by initializing one with the following command:

git init

Adding Files to the Repository

Add all your project files to the staging area with the command below. This step prepares them for the commit.

git add .

Committing Your Changes

Commit your staged changes to the repository, providing a meaningful message for the commit. For instance, an initial project setup can be committed with the message "Initial commit":

git commit -m "Initial commit"

Pushing Changes to GitHub

With your changes committed locally, the final step is to push them to your remote GitHub repository. This makes your code available and visible on GitHub.

Setting Up a GitHub Repository

If you haven't already set up a GitHub repository for your project, now is the time to do so. GitHub provides detailed instructions on creating a new repository. Refer to the guide here for step-by-step instructions. Creating a GitHub project.

Pushing to GitHub

Once your GitHub repository is ready, push your changes using the following command. Ensure your local Git repository is linked to your GitHub repository and replace main with your default branch name if it differs.

git push origin main

Conclusion

You've now successfully integrated Tailwind CSS into your project, verified its functionality, and secured your changes with Git. By pushing your code to GitHub, you've also made your source code safe and secured. Continue developing with the confidence that your work is well-documented and version-controlled.

Next, we'll proceed to deploy your project to Heroku, making it accessible to the public.