Overview

Weekly Objective:

In Week 4, we will be working on splicing some of the project we found on GitHub into our SAAS template. We will also get a better understanding of NextJS and how the SAAS template is expandable. Moreover, we will start using artificial intelligence to help us code and integrate several API services into our SAAS template. During this week, we should have a solid idea of what our SAAS product is and have several Github projects that showcase the features that our SAAS template will have.

Requirements:

• Github Account
• Access to an AI chat platform to help with coding. We highly recommend using AI Tutor Plus which has large context window and a fine-tuned prompt specifically for development.
• Your nextjs-subscription-payment project locally on your computer
• 2-3 projects from GitHub that will be integrated into our SAAS template.
• These applications installed on your computer
  • NodeJS
  • Github Desktop
  • Visual Studio Code

Resources:

• AI Tutor Plus – For this project, we will need a powerful AI assistant to help us with integrating features into our SAAS template. In AI Tutor Plus, we will mostly use GPT 4 Turbo. This model has large context (up to 128k) and it does well with NextJS. Developer personality is already fine-tuned for coding. Additionally, Plus allows us to parse large messages which we need in order to analyze the code that we are working with.
• NextJS – This week, we will be diving deeper into NextJS and how our SAAS template works. Specifically, we will be learning about app router and components. Additionally, on the NextJS website you can find several templates that you can build and learn with.
• Draw a UI Project Example – This example uses can easily integrate into our SAAS template. It utilizes GPT Vision to understand when the user draws and turns it into usable code. This project is completely open source and you can develop features on top of it.
• GPT 4 Vision – One of the few vision models on the market. Typically understands images better than Gemini Vision. This is an official model from Open AI and the API is easy to interact with.

Guides

Understanding NextJS Project Structure

Creating a Protected Page in the SAAS Template