JAMstack Crash Course - Build a Full Stack Application

Learn about the JAMstack, the new hotness in Web Development!! In this JAMstack crash course, you'll learn how to build a Full Stack application using some amazing technologies like FaunaDB, Netlify, and React. We'll use Netlify Serverless Functions for the backend and FaunaDB for the database.

_____________________________________________

Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
_____________________________________________

Connect with me 😀
_____________________________________________

Courses 💻

[nathanjeffrey]

James, I have done many many tutorials on here - likely too many. This has seriously been one of the most informative tutorials/course I've ever participated in. Thank you.

[navnathjadhav]

James one thing I can say you are so much hard worker.

[theseanmodd]

This is the best video in the internet.

[alfredoperez]

I change Netlify for Vercel, and React for Svelte, great video!

[lilpodbebe]

Wow how long did you take to prepare all this? Cuz I didnt blink an eye watching this video, it is so easy to follow through.. thank you for your time

[DeveloperJunaid]

James !! You are awesome at making the hard stuff easy !
Love from Pakistan <3

[julianstorm]

Thanks very much for your efforts. Not too many JAM stack courses out there. One thing, try to zoom in wherever you are editing code, in the browser as well as in vs code. Makes it much easier to follow. Check out fireship or netninjas tutorials on youtube. The video caption of yourself is not necessary and only takes away space.
Either way, thanks for your time. Much appreciated

Edit: You got a good voice, put a compressor on it and play just audio for coding tuts.cheers

[misterhtmlcss]

TOML File Fix!
@ 22:33 James talks about setting up the TOML file, but in the end there is no solution written anywhere other than to walk back the redirect. HOWEVER there was an error in the way it was written and I thought I'd add the fix here.

Overwrite the redirects section with this information:
[[redirects]]
from = "/api/*"
to = "/.netlify/functions/:splat"
status = 200
force = true

Notice the leading slash (/) on the API and the netlify/functions uri and that's the big stuff. Feel free to tweak this if I've added too much. I just got it all sorted and I wasn't willing to tweak it further to see if I needed all those changes. ;)

[petecapecod]

EVEN IF I didn't like this video, I would still have to 👍🏻 up it just for the 🐩 in the background!

[praskatti]

James, great content as always. One thing that I kept thinking about was why this was titled JAMstack? From what I understand, for a JAM stack one would typically use static site generation concepts and headless CMS and the like. something this video did not talk about. so will just using serverless function qualify as JAM stack architecture? Appreciate your thoughts here.

[noopurp]

While declaring the mutation createLink, you can also do something like:

mutation($name: String!, $url: String!, $description: String!, $archived: Boolean = false){
createLink(data: {name: $name, url: $url, description: $description, archived: $archived}) {
_id
name
url
description
archieved
}
}

This way, you don't have to pass {archived: false} in the variables all the time.

[noopurp]

The links.gql is no longer present in the source code on github. Can you please check? Thanks.

[Viralplace]

If I use Eleventy like SSG or Gridsome (vue.js) like SSG is the same to make a JAMstack project ?

[roman.kamlykov]

It is necessary that the toml file has a build command. At least this one: command = "#". Otherwise, the functions won't be deployed correctly.

[pepinillolin]

wow, this is an awesome, im trying to do something similar but i need to upload images, do you have any tips on serverless file uploads using this stack?

[SimonDaviesOfCourse]

Another great video and this time got to understand the netlify functions part and a little more react. Be great to follow up on this with the compositions api you mentioned. My one question is with those functions, can anyone then call them by calling the fi they find the desired functions in the code? Also, be nice to find out more about the api issue at the end as that would be a nice way to have an accessible api etc for other devices. Thanks again James 👍

[gosnooky]

My OCD is triggered by those unused dotenv and axios imports still being there at 32:00 after you refactored.

[jaxreacts]

Hey there, Do you do mentoring at all? I've been in the front end game for a long time but my js skills are lacking. Looking for someone to guide me in the right direction when the tough gets going.

[misterhtmlcss]

At 54min mark he makes a sexy conditional on Line 7 of LinkCard, but there are downsides to this pattern that most juniors (myself I've included in this statement) over look.
*This in no way is a negative judgement on this video and I can honestly say that it's difficult to cover every single thing and script every little detail, besides what he did isn't objectively wrong by any means. I'm only adding some food for thought to a great video.

Keep it up James! Great video :)

[Benjimanth]

Anyone know how to run netlify-cli -g? And do I run it in VS? He said he would show it however I didn't see it now I cannot run netlify dev