Full Stack AI Marketing Platform Prerequisites + Prep

I've received a bunch of questions and emails over the past few days asking "how can I prepare for the upcoming course" and "what do I need to know" before starting the course.

The TLDR is that you need to have a basic understanding of NextJS, Typescript, and React.

If you haven't worked with these technologies before, don't worry! It is pretty easy to pick up these technologies especially with the help of AI.

To help you get started learning the fundamentals of these technologies, I've attached 2 free YouTube tutorial that do a good job of covering the basics of NextJS.

By the end of these tutorials, you'll know the basics of working with React, Typescript, and NextJS.

If you are trying to learn these technologies as fast as possible, I'd focus on learning all the high level topics first then dive deep into the specifics.

Here's exactly how I would learn the high-level topics:

First, pick one of the YouTUbe tutorials and pull it up on one screen and ChatGPT in the other.
Do NOT code while you're watching the video the first time through.
As your watching the video, I would approach everything with a child like curiosity. What I mean by that is every time you see something new in the video, take a screenshot of it and pass it over to ChatGPT. Then, ask ChatGPT, "What is this?", "When do devs use this?", "Can you show me another example of this?", "As a new dev, what should I know about this".
As your asking ChatGPT a million questions, your goal is to understand all the high level terminology and how everything connects together.

By the end of this high level review, you should know the following words even though you might not know how to 100% use them yet:

Props
Components
Dynamic routing
async / await
Pages
Client side
Server side

Now, it's time to go deep! Here's how you're going to do that:

In this stage, you're going to get your hands dirty and actually start coding along in the video.
As you are cloning the applications, pay attention to when you create new components, when you add `useState` and `useEffect` to your app.
The goal of this phase is to build up muscle memory when it comes to the core elements of a NextJS app.

Finally, it's time to put all of your new knowledge to the test! In this final stage, you're going to build your own app - with the help of AI of course!

In this last stage, you are going to use ChatGPT/Claude to help you build out whichever video you didn't watch the first time. If you watched the todo video, you're going to build the ticket system. If you watched the ticket app originally, you're going to build the todo app.

Now, here's how you should go about building out the app using AI.

First, take a screenshot of the final version of the app that you're going to build. This will be your north star.
Next, you are going to use your newfound React skills and break apart the final version of the app into simple Pages and React components. Our goal in this phase is to stub out the entire application.
Once you've broken down the app into its pieces, you can start using AI to help you build out each page and component one at a time.
When you are using AI to help you build out each piece, do your best to **Speak React**. For example, when you're creating the create todo component in your app, you would want to say, "create a react functional component that has 2 `useStates` - one to store the loading state of the create button and one to store the error message that we will conditionally show to the user if something goes wrong". This process of actively stating what you want to build with React will help you learn 10x faster compared to saying things like, "build me a component that has button that spins win loading".
Remember, this is not a race with yourself to crank out an app as fast as possible.
The goal is to learn the fundaments of a new technology so that later you can go on to build more complex apps.

I hope that you find this detailed approach to learning the new tech stack helpful!

Please let me know if you have any questions about these videos! I'm always happy to clear up any confusion!

Cheers,

Brandon

P.S.

Here's the link for the todo app. For some reason, the link isn't in the description: https://github.com/candraKriswinarto/simple-todoapp-with-next13

32 comments