HomeОбразованиеRelated VideosMore From: Web Dev Simplified

Finish Project - Node.js/Express/MongoDB Course #9

46 ratings | 704 views
In this video we will be finishing the entire Mybrary application. To do this we need to: 1. Finish styling our author search/show page 2. Style the file upload box 3. Style the book show page 4. Create a partial for our book grids 5. Clean up any remaining styles Code For This Video: https://github.com/WebDevSimplified/Mybrary/tree/v1.8 Previous Video: https://youtu.be/iPKrpRpUOzQ Playlist: https://www.youtube.com/playlist?list=PLZlA0Gpn_vH8jbFkBjOuFjhxANC63OmXM Twitter: https://twitter.com/DevSimplified GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified #Node.js #FullStack #CSS
Html code for embedding videos on your blog
Text Comments (35)
Annie Taylor Chen (8 days ago)
I finally finished today! ^^ Lots of coding and debugging haha. It's such a wonderful course that teaches a lot of concepts and best practices, such as breaking up parts so they could be reused later, or using variable for easily changing colors or sizes later. Thank you for your great work! I feel beginners could benefit a bit from a document tree diagrams illustration, I guess I struggled a bit from looking up files to edit. I also personally feel building a front-end with its style first(with some static images, can replace them later), then adding back-end and the dynamically rendering data from EJS might be easier, maybe because it's easier for me.
Annie Taylor Chen (8 days ago)
+Web Dev Simplified I just checked: Amazon entered China in 2004 after it bought out local book-selling business Joyo for $75 million. Yet they forced their own ugly interface there, and 15 years later they had to close down because other websites(Taobao, JD, wechat etc) have grown and provided better localized UX.
Web Dev Simplified (8 days ago)
+Annie Taylor Chen I have not heard of that. That is really interesting. I feel that Amazon would want to focus on China because they are a huge market with so many people.
Annie Taylor Chen (8 days ago)
+Web Dev Simplified Speaking of UI and UX, have you heard that Amazon will shut down online store in China in July 2019? I think one of the major reasons is that they didn't do localization for the Chinese users, both online and offline. Users have been complaining that their design is from last century, the UI is so bad, they have no desire to navigate, etc. While their Chinese competitors have done a lot to cater to local taste, both online and offline. I also personally think China changes so quickly in recent decades, so the users there are used to changes, and are eager to embrace new features and new technology, so marketing, UI, UX need to adapt quickly.
Annie Taylor Chen (8 days ago)
​+Web Dev Simplified Haha, I guess maybe because I am more a visual learner and that's why I also feel visual demonstration about concepts helps me . I like to see the UI first, then UX, (mockup, prototype design <- i often skip and jump directly to -> front end code, back end code for functions). so I have something in mind what it feels like. That said, I'm often turned off by bad design/no design, even it functions well. (such as Amazon! or GoodReads! To me they're more or less giant spreadsheets and I feel the developers don't bother to add any more css because of too much code/data on one page, lol) Having a back-end only (I also tried Postman in my other project) feels so odd and I can't connect the code to final product. But back-end is new to me and I just started, compared to front-end, where I already coded for a few months. Perhaps the more back-end stuff I do the more comfort I will be with it. ^^
Web Dev Simplified (8 days ago)
Thank you for the kind words. I find it interesting that you think building sites that way is easier. I almost always do a mockup design in something like Figma, then code the backend before jumping into the frontend. I mostly do this because I am better at the backend than the frontend so it is easier for me to make good progress on the backend. I also usually end up changing things from my design and it saves me from having to style it twice since I just do the frontend after any changes come up.
Nonsolovita (9 days ago)
you are of great inspiration, thx for your time
Web Dev Simplified (9 days ago)
Thank you! I really appreciate the kind words.
C Vong (15 days ago)
Thank you for your hard work! Looking forward to react projects! 🔥
Web Dev Simplified (14 days ago)
Me too. I love working with React.
Mike SOMDOW (18 days ago)
Before i start the course, do you cover any of the "VIEW" portion of the app? like say ANGULAR? or anything like that? or are you sticking with built in view engines?
Web Dev Simplified (18 days ago)
This app uses the built in view engine of EJS since there is no major front end interactivity needed.
Andy Hall (1 month ago)
Awesome series. Thanks for all the work you did to put this together. I do have one question: How do I make the error message show when a user tries to delete an author that still has books. I see where we created the error message 'the author has books still', but I don't see how to pass that message back to the re-rendered author page after the deletion fails. Forgive me if I missed something obvious but I am just not seeing it. Thanks again!
Annie Taylor Chen (8 days ago)
+Web Dev Simplified Ahhhhh you're right! I keep thinking the delete is just a button, without connecting it to another route. :"> Now I wrote this and my message from models shows up finally! Thank you! :D router.delete('/:id', async (req, res) => { let author try { author = await Author.findById(req.params.id) await author.remove() res.redirect('/authors') } catch (error) { if (author !== null) { res.render('authors/edit', { author: author, errorMsg: error.message }) } else { res.redirect(`/authors/${author.id}`) } } })
Web Dev Simplified (8 days ago)
+Annie Taylor Chen it sounds like your catch section is never being executed. This could be because you have your code written in the edit section and not the delete section of your routes.
Annie Taylor Chen (8 days ago)
+Web Dev Simplified I tried to write this part as follows: router.get('/:id/edit', async (req, res) => { try { const author = await Author.findById(req.params.id) res.render('authors/edit', { author: author }) } catch (error) { res.render('authors/edit', { author: author, errorMsg: error.message }) } }) and I expected the new Error msg I wrote in models will appear here when I delete an author that has books under. But nothing happens. No error message shows up. In fact, when I wrote errorMsg: 'Error deleting author', nothing happens either. Why is that? I did console.log(error) but nothing shows up either. What is the right way to do this?
Web Dev Simplified (1 month ago)
The error should be accessible through the error object in the catch block. catch (error) { error.message } It is probably not at error.message, but it could be. I'm guessing it is most likely buried inside some mongoose object.
Andy Hall (1 month ago)
+Web Dev Simplified I got it figured out. That worked! I still don't know how the user would be able to get access to the error we threw in the original code. And since we didn't log it to the console either... what is the point of throwing the error? Where would we ever be notified that the error occurred?
Ivaylo Silovski (1 month ago)
Great Series! Great Tutorial! Keep it up with the good stuff ;)
Web Dev Simplified (1 month ago)
Thank you! I am glad you enjoyed it.
Milos Stojanovic (1 month ago)
This was so helpful. Great tutorial. Thank you man. Can you make full stack Vue project? I think it would be fantastic.
Milos Stojanovic (1 month ago)
+Web Dev Simplified I am so not familiar with react, so i am really excited for Vue project. Good luck.
Web Dev Simplified (1 month ago)
Thanks! I do want to dive into making some front end framework projects, but react will probably be first since I am most familiar with react. Then vue will probably be second since I really want to learn vue more.
Ikram Ikky (1 month ago)
some great stuff here 🔥
Web Dev Simplified (1 month ago)
Host Promo (1 month ago)
Start up the server, lets gooo 🔥I really like the dark theme.
Kotama18 (1 month ago)
Thx a lot:-)
Web Dev Simplified (1 month ago)
You're welcome!
ASD (1 month ago)
good stuff!
Effective Code Academy (1 month ago)
Great work, my friend! It was 🔥🔥🔥🔥🔥🔥🔥🔥🔥
Khoi Dang (1 month ago)
thank you man :)
Web Dev Simplified (1 month ago)
You're welcome!
Robin törn (1 month ago)
Nice work man
Web Dev Simplified (1 month ago)
Thank you!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.