DEV Community

Cover image for React components SaaS startup landing with RedwoodJS and Tailwind CSS in 10 minutes
Sergey Panarin
Sergey Panarin

Posted on

React components SaaS startup landing with RedwoodJS and Tailwind CSS in 10 minutes

Hi there! Working in tech for 10+ years I always look for efficient solutions. Here I share with you a recipe to build React components landing page in 10 minutes using RedwoodJS framework and Tailwind CSS as UI. This is the first major step for a beautiful and easy-to-grow Jamstack web app.

Image description

Initial setup

We have the following:

Steps to follow

  1. Template – divide Landing page into React components
  2. Web app generation with RedwoodJS – generate web app with Home page and components with Tailwind CSS UI support
  3. Components design – use template code to customize design of components
  4. Deployment to Vercel – deploying our web app to Vercel using GitHub

1. Template components

Image description

First of all we present our Landing page template as sequence of components and their React names:

  1. Header – Header
  2. Hero – Hero
  3. Logos – Logos
  4. Selling Points – SellingPoints
  5. Product Features – ProductFeatures
  6. Team – Team
  7. Testimonials – Testimonials
  8. Blog Posts – BlogPosts
  9. Newsletter Form – NewsletterForm
  10. Footer – Footer

2. Web app generation with RedwoodJS

Now we need:

  1. generate an app
  2. create Home page
  3. generate all 10 components
  4. include all 10 components to the Home page
yarn create redwood-app redwood-tailwind-saas-landing
Enter fullscreen mode Exit fullscreen mode

I use JavaScript version and init Git repo (you can use TypeScript version if needed). It took me 136.61s (~ 2 mins):

cd redwood-tailwind-saas-landing
yarn redwood dev
Enter fullscreen mode Exit fullscreen mode

You'll see the splash screen of RedwoodJS on a local dev server (http://localhost:8910):

Image description

Then we will generate our Home page:

yarn redwood generate page home /
Enter fullscreen mode Exit fullscreen mode

Then we need to generate all 10 components (rw is a shortcut for redwood):

yarn rw g component Header
yarn rw g component Hero
yarn rw g component Logos
yarn rw g component SellingPoints
yarn rw g component ProductFeatures
yarn rw g component Team
yarn rw g component Testimonials
yarn rw g component BlogPosts
yarn rw g component NewsletterForm
yarn rw g component Footer
Enter fullscreen mode Exit fullscreen mode

Image description

We have all components generated – now it's time to open project folder in VS Code and import and add components to the Home page.

Importing components:

Image description

Adding components to the Home page:

Image description

Starting again local development server to see the results:

yarn rw dev
Enter fullscreen mode Exit fullscreen mode

And we see our React components structure on the Home page 🥳

Image description

Next step is to set up Tailwind CSS UI and use design template for our React components.

3. Components design with Tailwind CSS

On this step we need to:

  • set up Tailwind CSS
  • add components HTML code from the template

Setting up Tailwind CSS UI:

yarn rw setup ui tailwindcss
Enter fullscreen mode Exit fullscreen mode

Image description

We open every component's code and add HTML code converted to JSX using some tool like Transform Tools: HTML to JSX:

Image description

Then we add JSX code to component's code (web/src/components/Hero/Hero.js):

Image description

Here is what we see with Head and Hero components added (we will global styled at the end):

Image description

Then we continue with the other components and do some clean up – update pictures to hi-res ones from Unsplash and remove jQuery and it's plugins/libs:

jQuery is not right option to do animations & elements like Sliders in React apps and must be removed. Now animations are done using React components & CSS

And here we are – we have React components-based template now:

The next step is to deploy this app to Vercel via GitHub.

4. Deployment to Vercel

The steps are quite straightforward:

  • commit all changes to GitHub repo
  • deploy on Vercel selecting this repo

Selecting our repo:
Image description

Starting Deploy:
Image description

Image description


And here we are: the project is online at https://redwood-tailwind-saas-landing.vercel.app 🥳


GitHub source

README

Welcome to RedwoodJS!

Prerequisites

Start by installing dependencies:

yarn install

Then change into that directory and start the development server:

cd my-redwood-project
yarn redwood dev

Your browser should automatically open to http://localhost:8910 where you'll see the Welcome Page, which links out to a ton of great resources.

The Redwood CLI

Congratulations on running your first Redwood CLI command From dev to deploy, the CLI is with you the whole way And there's quite a few commands at your disposal:

yarn redwood --help

For all the details, see the CLI reference.

Prisma and the database

Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. Open the schema.prisma file in api/db and replace the UserExample model with the following Post model:

model

Top comments (1)

Collapse
 
fyodorio profile image
Fyodor

That’s awesome 👏 I like such an efficient approach to prototyping and hacking a quick solution 👍 redwood seems to be ideal for that in terms of further scaling with its generators (as opposed to other starter templates and solutions).