W2-201: Developing Planet-Scale Web 2.0 Serverless Cloud Apps and APIs using Next.js 13 and Cloud Development Kit (CDK) for Terraform
The objective of this course is to teach participants to develop customer-facing planet-scale Websites, Full-Stack Apps and templates, Dashboards, and Muti-Cloud Serverless APIs. By the end of the quarter, the participants will be able to develop and deploy web platforms like Facebook, Shopify, etc. The technologies covered in this course will include Next.js 13, Figma, Tailwind CSS, Chakra UI, tRPC, QraphQL, Prisma, Cockroachdb Serverless (PostgreSQL Compatible), AWS Serverless Technologies, and Cloud Development Kit for Terraform (CDKTF).
- 1) Next.js 13 Web Development
- Next 13 Official Documentation (View Documentation)
- Latest Learn React Official Website (View Documentation)
- Learn Next.js 13 Learning Repo (View GitHub)
- First Project for Quarter 2 Students: Build a Resume Website and Deploy it on a Custom Domain
- All Quarter 2 students are required to Build their resume/CV website using Next.js 13 and Tailwind CSS
- Watch this video to learn: (View Website)
- Once you have built your resume website, buy a domain if you can afford it and host your resume website on a custom domain: (View Website)
- Add your custom domain to your Vercel Project: (View Website)
- However, if you cannot afford it find a way to get it for free: (View Website)
- You will get your website graded by a faculty member in class and receive a Report Card which you will always bring to class.
- 2) Next.js 13 using Chakra UI (Remote Zoom Class)
- CSS Flexbox Explained – Complete Guide to Flexible Containers and Flex Items (View Document)
- Chakra UI Docs (View Document)
- 3) UI/UX Design with Figma, TailwindCSS, and Chakra UI (Remote Zoom Class)
- Designing and Prototyping Interfaces with Figma: Learn essential UX/UI design principles by creating interactive prototypes for mobile, tablet, and desktop by Fabio Staiano (View Website)
- Figma Design Kit for TailwindCSS (View Website)
- Chakra UI Figma Kit (View Website)
- 4) API Routes with Next.js (Remote Zoom Class)
- API Routes (View Document)
- 5) APIs with Next.js and tRPC (Remote Zoom Class)
- Build a tRPC CRUD API Example with Next.js (View Website)
- Stop building REST APIs for your Next.js apps, use tRPC instead (View Website)
- 6) SQL and Prisma
- Start from scratch with relational databases (View Document)
- SQL For Beginners Video Tutorial (Watch Here)
- Database Management Systems and SQL – Tutorial for Beginners (View Website)
- 7) Next.js 13 using TailwindCSS (Remote Zoom Class)
- Modern CSS with Tailwind, Second Edition by Noel Rappin (View Website)
- 8) AWS Application Composer (Remote Zoom Class)
- What is AWS Application Composer? (Watch Here)
- Event-driven apps with AWS Application Composer (Watch Here)
- Visually design and build serverless applications quickly (View Documentation)
- Must Have: Create Free AWS Account
Note: For AWS Free Tier you will need a credit or debit card. The easiest way for Pakistani students is to open a bank account with Meezan Bank. Open a Meezan Aasan Account if you have no earning proof. Meezan Bank will charge Rs. 1100 for ATM Debit Card and there is a requirement of Rs. 100 minimum deposit. The card will be delivered in a few weeks. Our students have reported that this Debit card works with AWS.
- AWS Free Tier https://aws.amazon.com/free/
- Now you can create a virtual VISA Debit card through the NayaPay app which can be used to create AWS/GCP/Azure accounts. This is good news for those students who find it difficult to create physical debit and credit cards from banks. (https://www.nayapay.com/)
- You can also get a $300 credit https://pages.awscloud.com/adoptf90d_GLOBAL_POC-credits.html
- 9) Multi-Cloud GraphQL Serverless API Development with Cloud Development Kit for Terraform (CDKTF) (Remote Zoom Class)
- Learn Multicloud Serverless API Development using CDK Terraform in Baby Steps (Visit GitHub)
- Web 2.0 Projects
- 1) Next.js Projects (Visit Website)
- 2) Styling Next.js Projects using TailwindCSS and Chakra UI (Visit GitHub)
- 3) Todo Full-Stack App (Visit GitHub)
- 4) Build a Twitter Clone (Watch Here)