You have a software product and you want to make a website for it. The conventional wisdom would be to hire a web developer. However, if you want to save money, and have more control over the outcome of the project, you can also build your own site.

Building a website is not an easy task for a SaaS, startup, and entrepreneur. However, there are plenty of tools out there that will come to your aid. One of them is Bootstrap, which makes it even easier for you to create a website that looks great on any device. …

What is Supabase?

Supabase is an open-source alternative to Google’s Firebase. It’s currently free to use, supporting PostgreSQL databases and authentication tools.

It relies on existing open-source projects and a serverless solution will be released soon.

React + Supabase Tutorial

Create a Supabase account

Django ModelForms is a helper class that allows you to create a Form class from an existing Django model.

It honestly sounds more complicated than it actually is to implement.

Create a Django Model

Add a model to models.py

mysite > main > models.py

from django.db import models# Create your models here.class Movie(models.Model):
	movie_title = models.CharField(max_length=150)
	release_year = models.IntegerField()
	director = models.CharField(max_length=100)
	movie_poster = models.ImageField(upload_to='images/', null=True)
	movie_plot = models.TextField()
		def __str__(self):
		return self.movie_title

The example above is from How to use Django Models. The model contains CharFields, IntegerField, ImageField, and a TextField.

The function at the bottom returns the movie’s title as…

A Bootstrap modal is a component that’s positioned over everything else in the HTML document. Bootstrap modals by default place a transparent, darkened background over all elements behind the modal.

React is an open-source JavaScript library for user interface components. When combined, React and Bootstrap modals can quickly create a clean UI experience for edit forms, extra information, and confirmations.

Create your React App

Facebook’s create-react-app

C:\Users\Owner\desktop\react> npx create-react-app react-bootstrap

Create a React app from Facebook’s create-react-app repo. It has Babel and webpack already configured.

You’ll want to refer to the React beginner’s guide if you’re new to this.

Install React-Bootstrap

Windows Command Prompt

…

Adding a React “Copy to Clipboard” function is easy enough. It can be done inline or called as a method.

Basics of the React Copy to Clipboard event handler

onClick React event

onClick={}

Start with a onClick React event.

Inline event handler

onClick={() => {navigator.clipboard.writeText("http://localhost:3000/")}}

The arrow function is the React event handler, contained within curly braces.

Add navigator.clipboard to access the system clipboard and write the text "http://localhost:3000/" as the contents of the clipboard.

Event handler as a method

copy() {
    navigator.clipboard.writeText("http://localhost:3000/");
}


onClick ={this.copy}

Another way is to place the event handler as a separate method and call…

A favicon or favorite icon is the icon located on the left side of a browser tab. The generic favicon for Google and Firefox browser tabs is a globe icon.

Websites often override this generic favicon and use their logo or an image associated with their site.

Favicons are typically added to the head element, but the Django favicon location is the static folder where it is then called via the urls.py file.

This tutorial will show you how to add a favion.ico file to your Django project and, in the process, get rid of the Django favicon.ico …

Tailwind CSS currently does not have documentation on how to integrate the Tailwind CSS download with a Django project.

Luckily there is a package designed for this exact integration.

Note: I’ll name my environment, project, and app env, project and app to keep things simple.

Install Node.js and npm

Many websites list their contact email address in the footer where it is up to the user to send an email. While this is by no means a bad way for users to contact staff, it requires more work and effort on the user’s side than what’s necessary.

So let’s help the user easily send a contact email with an in-site contact form that instantly sends an email to the website staff upon submission. While this may seem daunting at first, Django actually handles most of the heavy lifting.

We will cover (1) how to create the Django contact form…