I have this issue when watching tutorial videos like this where if the instructor makes a typo or something, I'll be hyper-fixated on it until it gets acknowledged. Anything said/taught between the time of the typo and the time of acknowledgment goes in one ear and out the other. So the fact that you did those little popups immediately acknowledging it was wonderful.
I'm somehow not able to delete the todos. Every time I press the button that removes the todo, in the console I get the following error: "Failed to load resource: the server responded with a status of 404 (Not Found)". The thing is that the uri is correct, but it somehow gives me that error. From the swagger UI it works fine, but it doesn't from the frontend. Any tips on what can be done to resole this issue? I'd appreciate it! Edit: I actually found the problem! If anyone is encountering the same problem, it's that in the file Todo.js, in the deleteTodoHandler, the uri is wrong (in the frontend , Bek Brace used this uri "localhost:8000/api/todo/${title}", while the API responds to "localhost:8000/api/todo${title}" and the difference is the / that shouldn't be there to match the uri to the API).
This is a great guide!! Everything works really well and relative to other frameworks it is super-easy to learn and use; i was wondering if you could please show how to connect to mongodb proper ( in the cloud); i have tried a few things but somehow, something was off; it would be nice to connect to cloud, not just on-prem; thanks so much!!
For those that don't know Python, this can also be done using NodeJS, Express, and Mongoose. You can create a schema and set routers that can generate simple CRUD API calls in a very similar way as the FastAPI.
Thank you so much for this tutorial. I'm just wondering how and how often the data are refreshed ? The backend seem to have a lot of requests in my implementation.
@@rice5817 yes i was facing the same problem because there is no dependency on which the state should change that is why we get that endless api calls in terminal. Solution-> create a new usestate key with initial value set to 0.Then in useeffect just add 1 in old key const [refreshKey, setRefreshKey] = useState(0); useEffect(() => { axios.get('localhost:5007/fetch_all_todo') .then(res => { setTodoList(res.data) }) }, [refreshKey]); const addTodoHandler = (id,title,desc) => { axios.post('localhost:5007/create_todo', { 'id': id, 'title': title, 'description': desc }) .then(res => setRefreshKey(oldKey => oldKey +1))
Great tutorial very easy to follow along! Do you have any suggestion for an ideal approach to adding user authentication in FastAPI i.e. recommended authentication library we can use that allows pbkdf2 or ssha encryption as well as generating session tokens?
Thank you, Michael - glad to hear :) I have a tutorial for user authentication with FastAPI and JSON Web Tokens - maybe this can help you : ua-cam.com/video/0_seNFCtglk/v-deo.html
FCC Team - Will there be a complete class with more courses in a playlist on the topics of computer vision/Neural network and CISSP and SEC+? I’m sure a lot of people here would look forward to that.
great : and you have a good , easy to follow voice. Some FCC courses have AWFUL voices , super hard to listen to for long....high extrinsic cognitive load imposed!
I am facing pydantic.error_wrappers.ValidationError: 1 validation error for Todo response value is not a valid dict (type=type_error.dict) , While calling post method response = await create_todo(todo.dict()) . Please can you help in this.
So I'm trying to follow along with this tutorial, but when I run both front and backend, once my react page loads, it continuously makes calls and doesnt stop. I also am unable to delete or create tasks. Does someone have a repo of this project I can check out?
It's the onChange that makes the call continuously for me. As for the deletion and creation of tasks, even I'm facing the same issue. An empty task is being displayed for me
That's a great point. Using title as an identifier is bad practice. What if you have duplicate titles, for example? Stick to the todo id, which is always unique!
FARM stack is proudly sponsored by the exceptional Farmers over at Ligue1! Jokes apart, at this rate we have MERN, PERN, NERN(Next) and we will have JS Fatigue all over again. LOL
It's probably an issue with how you setup your virtual environment and if you are using VS Code, you need to check and see that you're using the correct interpreter that matches with your current venv file. You can press Ctrl+Shift+P and select "Python: Select Interpreter". Choose the one with (venv) or having "Recommended". You may need to restart your VSCode window sometimes.
I see in the console of the browser that // Read all todos useEffect(() => { axios.get('localhost:8000/api/todo') .then(res => { setTodoList(res.data) }) }); generate and infinite call to get todos as the component App was continuosly rendered. I add [] as second parameter of useEffect to call it once and change the add handler to update the state, further I move the delete hanlder in the App.js and pass the reference deep in the child component, also in the delete handler I have to update the state // Post a todo const addTodoHandler = () => { axios.post('localhost:8000/api/todo/', { 'title': title, 'description': desc }) .then(res => { console.log(res); const newTodoList = [...todoList]; newTodoList.push(res.data); setTodoList(newTodoList); }); } const deleteTodoHandler = (title) => { const encoded = encodeURI(`localhost:8000/api/todo/${title}`); axios.delete(encoded) .then(res => { console.log(res.data) const newTodoList = todoList.filter(item => item.title !== title); setTodoList(newTodoList); }); };
Thanks Manlio, nice update to this great video. Quick question: how did you pass the reference after moving "deleteTodoHandler" tp App.js? Can you please show example?
@@isaacafara5811 useEffect(() => { readTodosHandler() }, [todoList]) This will watch when todoList changes (I didn't have to move the delete function). Also it's a good idea to extract the useEffect axios call into it's own function.
How would you go about deploying it on heroku for example ? Do you host two separate apps and hard code your backend url instead of localhost:3000 ? Thanks in advance
At 40:17 my database did not connect to the compass. I even replaced all of my code with the one in the repo and it still didn't work. Does anyone know what the problem could be?
Execute the post method after the connection- that triggers the automatic creation of the TodoList database (since we already have established the connection)
This channel should be awarded with honour for what they have been doing for the society ❤️
I have this issue when watching tutorial videos like this where if the instructor makes a typo or something, I'll be hyper-fixated on it until it gets acknowledged. Anything said/taught between the time of the typo and the time of acknowledgment goes in one ear and out the other. So the fact that you did those little popups immediately acknowledging it was wonderful.
Hello! thanks you sir carnes FCC, thanks all of you guys to help us.
Didn't know FARM stack existed ...
Thanks, I can finally see the big picture how each component (FastAPI, React, MongoDB) connects togther!
MongoDB not graphql - Thank you for this refreshing turtorial
ua-cam.com/video/S5FzZPpqndY/v-deo.html Javascript tutorial easy example
ua-cam.com/video/waXnjADEEAg/v-deo.html
I love this stack
Next Stack: NUTS (Nuxtjs, TailwindCSS, Supabase). Mark my words!
ua-cam.com/video/S5FzZPpqndY/v-deo.html Javascript tutorial easy example
ua-cam.com/video/waXnjADEEAg/v-deo.html
Don’t you mean get on your NUTS? 😂
I just saw this stack in mongodb channel live
@c_a yes ua-cam.com/users/MongoDBofficial
0:02
"The FARM stack is FastAPI, React and GraphQL."
I went through this video, but I didn't find any other reference to GraphQL
ua-cam.com/video/S5FzZPpqndY/v-deo.html Javascript tutorial easy example
ua-cam.com/video/waXnjADEEAg/v-deo.html
probably just a miss on their side, it shouldbe MongoDB not GraphQL
These 3 letter acronyms don't make sense anymore, and most of them wont sound good, or be memorable.
Love the channel ❤️ such great content
First,
Edit: tomorrow's my exam and these pple posting one after other videos, cool videos
Thank you 🙏
Waiting for some database to start with T to make it " FART Stack "
Sorry for that joke :(
Appreciate the Content
There's Teradata and Tibero for farts ;)
lol
FastAPI, React and Typescript!
That was an awesome short tutorial on farm stack✌
GREAT JOB! Thank You, Bek !
Thank you, Kratos :)
First, and also fast api is really good!
Thanks!
Very good introduction , thank you !
LAMP, MEAN, MERN, FARM - what is the next stack? :)
MEVN, PERN, WISA xD
You missed MEVN
RUSP - Rust Svelte Postgres
JAM stack
JS, Api & -MongoDB- * Markup *
😂
How about FAVM?
Thank you so much for this. Now I can dive deeply into the FARM stack
I'm somehow not able to delete the todos. Every time I press the button that removes the todo, in the console I get the following error: "Failed to load resource: the server responded with a status of 404 (Not Found)". The thing is that the uri is correct, but it somehow gives me that error. From the swagger UI it works fine, but it doesn't from the frontend. Any tips on what can be done to resole this issue? I'd appreciate it!
Edit: I actually found the problem! If anyone is encountering the same problem, it's that in the file Todo.js, in the deleteTodoHandler, the uri is wrong (in the frontend , Bek Brace used this uri "localhost:8000/api/todo/${title}", while the API responds to "localhost:8000/api/todo${title}" and the difference is the / that shouldn't be there to match the uri to the API).
This is a great guide!! Everything works really well and relative to other frameworks it is super-easy to learn and use; i was wondering if you could please show how to connect to mongodb proper ( in the cloud); i have tried a few things but somehow, something was off; it would be nice to connect to cloud, not just on-prem; thanks so much!!
use Pymongo
Can’t believe this is free. People charge hundreds for such lessons split into a bunch of short form videos.
Great tutorial !!
ua-cam.com/video/S5FzZPpqndY/v-deo.html Javascript tutorial easy example
ua-cam.com/video/waXnjADEEAg/v-deo.html
this was really helpful, thank you!!
If you are using Python 3.11, you have to use motor == 3.1.1 dependency.
❤️❤️MERN is love❤️❤️
It would be great if there will be a course on deployment an web app
Hi sir I just joined this channel .very usefull to my software study
Great
Thank you for such great videos , great work
Wow, thank you so much for sharing the knowledge 🫡🙏👍😊
For those that don't know Python, this can also be done using NodeJS, Express, and Mongoose. You can create a schema and set routers that can generate simple CRUD API calls in a very similar way as the FastAPI.
ofc, but that defeats the very purpose of this course
Thank you so much for this tutorial. I'm just wondering how and how often the data are refreshed ? The backend seem to have a lot of requests in my implementation.
Does the official docs not mention anything about that?
@@rice5817 yes i was facing the same problem because there is no dependency on which the state should change that is why we get that endless api calls in terminal.
Solution-> create a new usestate key with initial value set to 0.Then in useeffect just add 1 in old key
const [refreshKey, setRefreshKey] = useState(0);
useEffect(() => {
axios.get('localhost:5007/fetch_all_todo')
.then(res => {
setTodoList(res.data)
})
}, [refreshKey]);
const addTodoHandler = (id,title,desc) => {
axios.post('localhost:5007/create_todo', { 'id': id, 'title': title, 'description': desc })
.then(res => setRefreshKey(oldKey => oldKey +1))
40:12 if you don't have todo in mongo, try post method in docs
How do we dockerize this stack?
Great tutorial very easy to follow along! Do you have any suggestion for an ideal approach to adding user authentication in FastAPI i.e. recommended authentication library we can use that allows pbkdf2 or ssha encryption as well as generating session tokens?
Thank you, Michael - glad to hear :)
I have a tutorial for user authentication with FastAPI and JSON Web Tokens - maybe this can help you : ua-cam.com/video/0_seNFCtglk/v-deo.html
thank you
FCC Team - Will there be a complete class with more courses in a playlist on the topics of computer vision/Neural network and CISSP and SEC+? I’m sure a lot of people here would look forward to that.
ua-cam.com/video/S5FzZPpqndY/v-deo.html Javascript tutorial easy example
ua-cam.com/video/waXnjADEEAg/v-deo.html
Thanks
Woow🥰🥰🥰
A course on Three.js please
ua-cam.com/video/S5FzZPpqndY/v-deo.html Javascript tutorial easy example
ua-cam.com/video/waXnjADEEAg/v-deo.html
great : and you have a good , easy to follow voice. Some FCC courses have AWFUL voices , super hard to listen to for long....high extrinsic cognitive load imposed!
👍
I am facing pydantic.error_wrappers.ValidationError: 1 validation error for Todo
response
value is not a valid dict (type=type_error.dict) , While calling post method response = await create_todo(todo.dict()) . Please can you help in this.
At database.py you need to change return of create_todo function to "document", not "result" value.
@@bohdan134 In the video he said that was a mistake. He should correct somewhere or do an annotation.
@@bohdan134 And because of that error I discovered I can put multiple Duplicate titles. is there a primary key in Mongo DB
I clicked on this video because the stack name sounds interesting.
26:12 Why do you use await? I tried to run program without await but it also runs nomarlly.
So I'm trying to follow along with this tutorial, but when I run both front and backend, once my react page loads, it continuously makes calls and doesnt stop. I also am unable to delete or create tasks. Does someone have a repo of this project I can check out?
It's the onChange that makes the call continuously for me. As for the deletion and creation of tasks, even I'm facing the same issue. An empty task is being displayed for me
Why start with todo ids when defining routes and then switch to using titles as identifiers?
That's a great point. Using title as an identifier is bad practice. What if you have duplicate titles, for example? Stick to the todo id, which is always unique!
Awesome 👍😎
Nicely done, :)
I could feel the lag after 45:00 in real life
Need a mean stack full course..
Why do you prefer NPM over YARN?
Im using angular as frontend but i really liked the backend part
In Poland it is AŻUR not aizure
Nice.. now make the right tutorial... FastApi, Vuejs and PostgreSQL
Where is the video to set up the paths?
FARM stack is proudly sponsored by the exceptional Farmers over at Ligue1! Jokes apart, at this rate we have MERN, PERN, NERN(Next) and we will have JS Fatigue all over again. LOL
Can we have a FARM with Fastify?
I thought u have some really cool mouse pointer afterimage effects, but it was just the video lagging XD
Yes, I apologize for that, it also bothered me when I was done recording
when creating a post I get the error "object has no attribute 'dict'
what's he using to run Linux terminal on windows?
Hi im having trouble. axios keeps calling backend api when fetching all todos in useeffect part. Is this expected?
Why did not you use Moralis Serverless?
How common would a FAVM stack be? 🤔
I'd love to recreate this with Vue.js someday
Is this serverside rendering or clientside rendering?
when will be java backend tutorial?
Please
Ehh enterprise not use mongo :( I need FARP Postrges variant
Hi, can you provide the link for fast api course in comments?
there you go Bro
ua-cam.com/video/62pP9pfzNRs/v-deo.html
@@TR1ckY_TV thanks bro!
I am not able to import motor package .... tried upgrading all packages also still the same problem is there
most likely it is a python-version-related problem
It's probably an issue with how you setup your virtual environment and if you are using VS Code, you need to check and see that you're using the correct interpreter that matches with your current venv file. You can press Ctrl+Shift+P and select "Python: Select Interpreter". Choose the one with (venv) or having "Recommended". You may need to restart your VSCode window sometimes.
Superb tutorial
I also had the same problem in VS code so i used PyCharm😁😁😁😁
I see in the console of the browser that
// Read all todos
useEffect(() => {
axios.get('localhost:8000/api/todo')
.then(res => {
setTodoList(res.data)
})
});
generate and infinite call to get todos as the component App was continuosly rendered. I add [] as second parameter of useEffect to call it once and change the add handler to update the state, further I move the delete hanlder in the App.js and pass the reference deep in the child component, also in the delete handler I have to update the state
// Post a todo
const addTodoHandler = () => {
axios.post('localhost:8000/api/todo/', {
'title': title,
'description': desc
})
.then(res => {
console.log(res);
const newTodoList = [...todoList];
newTodoList.push(res.data);
setTodoList(newTodoList);
});
}
const deleteTodoHandler = (title) => {
const encoded = encodeURI(`localhost:8000/api/todo/${title}`);
axios.delete(encoded)
.then(res => {
console.log(res.data)
const newTodoList = todoList.filter(item => item.title !== title);
setTodoList(newTodoList);
});
};
Thanks Manlio, nice update to this great video. Quick question: how did you pass the reference after moving "deleteTodoHandler" tp App.js? Can you please show example?
@@isaacafara5811
useEffect(() => {
readTodosHandler()
}, [todoList])
This will watch when todoList changes (I didn't have to move the delete function). Also it's a good idea to extract the useEffect axios call into it's own function.
Now we need something a T so we can have a FART Stack
FastAPI React TErraform DynamoDB - FARTED
Bro tutoriall full video python androidhelper... Plsee bro🙏🙏
The web dev had a FARM, E-I-E-I-O...
pls make a course on ios development using swiftui
ua-cam.com/video/S5FzZPpqndY/v-deo.html Javascript tutorial easy example
ua-cam.com/video/waXnjADEEAg/v-deo.html
What about update?
how to use gridfs/imageupload with fastapi motor
Is FastAPI python framework?
Yup
How would you go about deploying it on heroku for example ? Do you host two separate apps and hard code your backend url instead of localhost:3000 ? Thanks in advance
24:00
33:00
How to deploy this?
Can anyone help me how to upload file in FARM stack
At 40:17 my database did not connect to the compass. I even replaced all of my code with the one in the repo and it still didn't work. Does anyone know what the problem could be?
I think, i have the same problem, for me it works when i do close vs code and open again and do the post method.
Execute the post method after the connection- that triggers the automatic creation of the TodoList database (since we already have established the connection)
666.. that's bound to be some sort of a sign
ua-cam.com/video/hB5MGUpjli4/v-deo.html
Hi
thank you for an amazing tutorial. I can not find the FastApi course, would you share the link?
Save my life!!!!
Thats a lot of stack rhyme
LMAO - Linux, Mongo, Angular, OpenAPI
Could you please do a video on how to deploy this to Google cloud? or firebase? or any hosting?
First♥️
Who wants LAME stack next ?
Linux Apache MongoDB Elixir 😂
Make channel like that on Russian
Wooo 7 comment 😂
32:45
Fourth
First
Thanks!