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
1:02:08
2:28:32
26
32 comments
• Sep '24
In the oficial nextjs web page, there is a free learning path: https://nextjs.org/learn
There is also a react foundation course: https://nextjs.org/learn/react-foundations
3
• Sep '24
Thank you Iker for sharing this with us. This is very helpful.
2
• Sep '24
you welcome! Happy to help!
1
2
• Sep '24
Amazing. Thank you for this!!
2
• Sep '24
Of course!
I love that you guys are all in on learning! Please let me know if you get stuck along the way!
2
• Sep '24
Fo Sho. Big ups for all of the help!!
2
• Sep '24
man, you're such a great teacher 👏 Watching and learning from you dude 👀
2
• Sep '24
thanks man! And I’m learning just as much from you guys! Everyone’s winning lol
0
• Sep '24
I was going to ask how we could prepare for the course. Thanks so much for these videos Brandon.
2
• Sep '24
Just watched the Todo app. Great tutorial/overview. I might have to rewrite/refactor my app to make use of these skills. The loading and use of component libraries was an eye opener.
2
• Sep '24
2
• Sep '24
love this giph! 😂
1
• Sep '24
From the next.js Page
"Next.js has two different routers: the App Router and the Pages Router. The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming. The Pages Router is the original Next.js router, which allowed you to build server-rendered React applications and continues to be supported for older Next.js applications."
Reading around this previously people are saying to use App as opposed to Pages now. What is your view or is it much of a muchness? Will the course be using Pages or App? just wondering as the to-do list uses Pages?
2
• Sep '24
Hey! The simple answer is to go with App Router to access those latest features offered inside of NextJS.
In the course, we are strictly going to focus on app router.
And I could have sworn the todo app used app router. That's my mistake!
If that's the case, I'd go with the other course and then try building the todo app on your own after.
1
• Sep '24
No I think he does use app router in the end, but he discusses pages. probably because he was using Next.js 13, and we are now using 14. Seems to be a few little bits different, but that could just be me.
1
• Sep '24
If, when working through the ToDolist video, you enter 'rafce' whilst trying to create AddTask, nothing meaningful happens.
Thanks Claude!
To enable the "rafce" (React Arrow Function Export Component) snippet in Visual Studio Code, you'll want to install the "ES7+ React/Redux/React-Native snippets" extension. This popular extension provides a wide range of useful snippets for React development, including the one you're looking for.
2
• Sep '24
I love that when you get stuck, you look up the answer and keep trucking!
You'd be amazed with how many people that just stop and give up.
Keep powering through man!!
1
• Sep '24
Thanks. I love learning new stuff just for 'shitz and giggles'. Besides, I needed to learn VSCode, so this is as good a way as any. I think I'm about 9-10 minutes into the Todo list video and have already spent an hour on it just learning things.
I'm impressed at the productivity LoL
1
Thank you!!
2
excelent, sir! Thanks a lot. This seems jummylicious.... I have got my weekend plans right here, yeah.
1
Great Thank you so much !
1
• Sep '24
thank you so much! I truly appreciate how you always keep us on track 😎
1
• Sep '24
That’s really great advice to screenshot and paste into ChatGPT
1
• Sep '24
I’d also suggest have chatgpt give you a full commit structure with readme and tests , grouped into utils you think you might need and let it use the readme files to complete, you can edit the readme files and also load it into your ai code assistant of choice that doesn’t cost as much as gpt4 or Claude once one of them gives the architecture and readme. I find they produce useful mockups for tests which can be quite challenging on your own for web code
1
• Sep '24
Hey before i go dump my OpenAi subscription , not the API, will i need it for the Course? I already have Claude and Perplexity, and id rather use the $20 currently used on ChatGPT to be used on Cursor Pro?
1
• Sep '24
Hey! I have a slide talking about this exact question 😂
Let me find it and shoot it over!
0
• Sep '24
if anyone need any help with the Nextjs, l am happy to help with whatever knowledge I have.
1
• Sep '24
I'd like to hear your professional take on this: https://docs.fastht.ml/
0
• Sep '24
I have no experience in using FastHtml but it seems like it heavily leans towards HTMX. You will like it if you are into pythonic development. From what I read, the Python objects are represented as HTML elements. If you are not good at CSS or Javascript then FastHtml may be ideal for you.
1
• Sep '24
Thanks!
0
User
Your comment
Brandon Hancock
7
Full Stack AI Marketing Platform Prerequisites + Prep
AI Developer Accelerator
skool.com/ai-developer-accelerator
Master AI & software development to build apps and unlock new income streams. Transform ideas into profits. 💡➕🤖➕👨‍💻🟰💰
Leaderboard (30-day)
powered by