SPACES
-
TSI & ITT | Build a Saas from Idea to Impact #5
#5
Wed 24th Apr 2024
Segments
02.
-
Week #4 Recap: Adding Feature to the SAAS Template
Completed
03.
-
Introduction to Tailwind and Designing UI in NextJS
Completed
04.
-
Creating a Compelling Landing Page
Completed
05.
-
Using AI to Implement New UI Components
Completed
06.
-
Recap and Final Thoughts
Completed
Weekly Objective:
In Week 5, we will customize the overall UI and UX of our SAAS template. We will be learning about the different react UI libraries that are available to us for free. The goal is to pick a UI library and integrate it into our website. We will also dive deeper into Tailwind CSS and how to customize the theme of our website and manipulate JSX elements to look and feel like our brand. Additionally, we will be using AI and different vision models such as GPT 4 Vision to write the code for our new UI.
Requirements:
- Github Account
- These applications installed on your computer
- NodeJS
- Github Desktop
- Visual Studio Code
- AI Tutor Plus or any other AI assistant that support vision
- Vercel Account
- Your SAAS template from weeks 2-4 that you want to customize
Resources:
- Tailwind CSS – a framework used for styling React websites. Provides the project with a set of classes we can use inline. Additionally, Tailwind allows us to make our UI responsive and ensure that the experience is comporable across multiple devices.
- v0 by Vercel – Allows users to use artificial intelligence to create different UI elements in their website. Able to input mockups or describe the desired UI and interate on the design. Uses ShadCN components to construct a full page.
- ShadCN – A component library that is used by many Vercel websites. Has enough component to create dashboard, login screens, and fully fledged applications. Also support Tailwind styling and theming.
- NextUI – Another React component library that integrates seemlessly with Tailwind. Also has integration with Figma for easy design to product transition. While there are fewer component, they are typically better designed than ShadCN
- Preline UI – Has a large selection of premade React components. Unlike ShadCN and NextUI, has components that will aid in creating a landing page with FAQ, Team, Blog, Pricing, and Hero sections that are prebuild and work with TailwindCSS
- Ant Design – One of the largest free React component libraries. Easy to use and includes components for layout, navigation, data entry, data display, and feedback.
Here are some more React UI libraries