freeCodeCamp.org | Build a Full Stack Book Store App Using React, Node, MongoDB @freecodecamp | Uploaded October 2024 | Updated October 2024, 6 hours ago.
Learn to build a comprehensive fullstack MERN stack bookstore website from @mdalmamunit427. This project will cover both frontend and backend development from the ground up.
As a MERN stack project, we'll be using React for the frontend, Node.js and Express.js for the
backend, and MongoDB as our database. We'll also leverage technologies like Tailwind CSS,
Redux, RTK Query Toolkit, Mongoose, and JWT (JSON Web Tokens) to enhance our project.
Our bookstore will feature an admin dashboard for managing books, a cash-on-delivery system, and a robust inventory management system. Users can easily add or remove products from their carts, proceed to checkout, and place orders. For admins, we'll create a secure admin dashboard accessible with a username and password. Admins will have the power to upload new books, manage and update existing book
information, and delete books as needed.
💻 Starter Files: github.com/mdalmamunit427/book-store-app-ui-assets.git
💻 Full Source code: github.com/mdalmamunit427/build-full-stack-book-store-mern-app.git
⭐️ Chapters ⭐️
0:00:00 Introduction
0:01:39 Project Overview
0:12:41 Setup Project
0:22:04 Install Tailwind CSS
0:28:46 Setup React Router DOM
0:43:36 Customize Your Project
0:54:57 Create a Responsive Navbar
1:30:35 Banner Section
1:39:33 Top Sellers Section
2:11:55 Recommend Books
2:15:15 News Section
2:29:01 Footer Section
2:35:21 Login and Register Page
3:03:42 Install Redux Toolkit & Add to Cart
3:31:41 Cart Page, Remove from Cart, Clear Cart
3:43:57 Create Checkout Page
3:54:45 Server Setup, Mongoose & MongoDB
4:19:22 Create Blog Schema & Model
4:24:09 Book Routes & Controllers
5:07:53 Create bookApi using RTK Query & Display Books
5:36:56 Firebase Setup, Implement Login & Register
6:26:39 Private Routes
6:33:13 Create Order Endpoint & Place Order
7:16:58 Create Admin & Verify Token
7:45:30 Admin Router & Dashboard Login
8:07:20 Admin Dashboard: Add, Edit & Delete Books
8:55:58 How to Deploy Your MERN Project
🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual
--
Learn to code for free and get a developer job: freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
Learn to build a comprehensive fullstack MERN stack bookstore website from @mdalmamunit427. This project will cover both frontend and backend development from the ground up.
As a MERN stack project, we'll be using React for the frontend, Node.js and Express.js for the
backend, and MongoDB as our database. We'll also leverage technologies like Tailwind CSS,
Redux, RTK Query Toolkit, Mongoose, and JWT (JSON Web Tokens) to enhance our project.
Our bookstore will feature an admin dashboard for managing books, a cash-on-delivery system, and a robust inventory management system. Users can easily add or remove products from their carts, proceed to checkout, and place orders. For admins, we'll create a secure admin dashboard accessible with a username and password. Admins will have the power to upload new books, manage and update existing book
information, and delete books as needed.
💻 Starter Files: github.com/mdalmamunit427/book-store-app-ui-assets.git
💻 Full Source code: github.com/mdalmamunit427/build-full-stack-book-store-mern-app.git
⭐️ Chapters ⭐️
0:00:00 Introduction
0:01:39 Project Overview
0:12:41 Setup Project
0:22:04 Install Tailwind CSS
0:28:46 Setup React Router DOM
0:43:36 Customize Your Project
0:54:57 Create a Responsive Navbar
1:30:35 Banner Section
1:39:33 Top Sellers Section
2:11:55 Recommend Books
2:15:15 News Section
2:29:01 Footer Section
2:35:21 Login and Register Page
3:03:42 Install Redux Toolkit & Add to Cart
3:31:41 Cart Page, Remove from Cart, Clear Cart
3:43:57 Create Checkout Page
3:54:45 Server Setup, Mongoose & MongoDB
4:19:22 Create Blog Schema & Model
4:24:09 Book Routes & Controllers
5:07:53 Create bookApi using RTK Query & Display Books
5:36:56 Firebase Setup, Implement Login & Register
6:26:39 Private Routes
6:33:13 Create Order Endpoint & Place Order
7:16:58 Create Admin & Verify Token
7:45:30 Admin Router & Dashboard Login
8:07:20 Admin Dashboard: Add, Edit & Delete Books
8:55:58 How to Deploy Your MERN Project
🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual
--
Learn to code for free and get a developer job: freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
![Open Source Superstar and Roadmap.sh Founder Kamran Ahmed [Podcast #145]](https://i.ytimg.com/vi/pi6cBAICoAI/hqdefault.jpg "Open Source Superstar and Roadmap.sh Founder Kamran Ahmed [Podcast #145]
On this weeks episode of the podcast, freeCodeCamp founder Quincy Larson interviews Kamran Ahmed. Hes a software engineer and founder of Roadmap.sh, which has skill tree roadmaps for lots of developer fields, such as DevOps. As a teacher, hes also a Google Developer Expert and a GitHub Star.
We talk about:
- Kamrans tips for finding the right open source projects to contribute to
- The story behind Roadmap.sh, his popular developer website
- Other specialized open source Kamran has built over the years
- How Kamran became a Google Developer Expert and GitHub Star
Can you guess what song Im playing during the intro?
Also, I want to thank the 10,922 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate
You can also listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. Be sure to follow the freeCodeCamp Podcast there so youll get new episodes each Friday.
Links we talk about during our conversation:
- Kamrans website, Roadmap.sh: https://roadmap.sh/
- Kamrans Design Patterns for Humans GitHub book: https://github.com/kamranahmedse/design-patterns-for-humans
- freeCodeCamps How to Contribute to Open Source guide Quincy mentions: https://www.freecodecamp.org/news/how-to-contribute-to-open-source-projects-beginners-guide/
- Kamran on Twitter: https://x.com/kamrify
Chapters
0:00:00 Introduction to Kamran Ahmed and Roadmap.sh
0:09:19 The Power of Open Source Projects
0:16:53 Navigating Career Progression in Software Engineering
0:22:42 Lessons Learned from Working in Different Companies
0:27:22 The Value of Putting Yourself Out There
0:38:47 From Small Company to Startup: Seizing Opportunities
0:51:03 Growth Through Trust and Leadership
0:54:09 Learning and Expanding Skills Through Diverse Projects
0:56:06 From Dubai to Germany: A Journey of Growth and Exploration
0:58:21 Launching a Platform and Learning from Mistakes
1:01:31 Balancing Individual Contribution and Management
1:10:02 Roadmap.sh: Growth and Success
1:13:41 Moving to the UK and Settling Down
1:18:58 Contributing to Open-Source and Establishing Projects
1:21:31 Finding Project Ideas by Looking at Other Languages and Solving Problems
1:26:10 Promoting Projects and Embracing Negative Feedback
1:38:28 Roadmap.sh: A Resource for Developers at All Levels")
![The reality of the developer job market with ex-Googler YK Sugi [Podcast #143]](https://i.ytimg.com/vi/qL7kc2eS57A/hqdefault.jpg "The reality of the developer job market with ex-Googler YK Sugi [Podcast #143]
On this weeks episode of the podcast, freeCodeCamp founder Quincy Larson interviews YK Sugi. Hes a software engineer and prolific YouTube Computer Science tutorial creator. Hes worked at Google and Microsoft. He runs the CS Dojo channel where he shares his insights on software development, AI, and developer career progressions.
We talk about:
- Emerging AI tools and how developers are adopting them
- The role of interest rates in developer hiring
- Japans developer work culture VS the US
- How not to burn out
Can you guess what song Im playing in the intro?
Also, I want to thank the 10,993 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate
Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. Be sure to follow the freeCodeCamp Podcast there so youll get new episodes each Friday.
Links we talk about during our conversation:
- YKs freeCodeCamp article on the resume he used to get a job at Google: https://www.freecodecamp.org/news/heres-the-resume-i-used-to-get-a-job-at-google-as-a-software-engineer-26516526f29a/
- YKs freeCodeCamp article about leaving his job at Google to focus on entrepreneurship: https://www.freecodecamp.org/news/why-i-left-my-100-000-job-at-google-60b5cf4ebefe/
- YKs popular CS Dojo YouTube channel: https://www.youtube.com/c/CSDojo
- YK on Twitter: https://x.com/ykdojo
Timestamps:
00:00: Introduction and YK Sugis background
01:38: AIs impact on developer jobs and current capabilities
07:14: How developers are using AI tools and future trends
12:28: AIs influence on developer productivity and code completion
17:00: The changing landscape of software development with AI
22:20: The future of the developer job market and AIs role
27:00: Interest rates, the tech sector, and the job market
31:29: Challenges and advice for aspiring developers
37:55: Skill acquisition and the evolving learning landscape
42:22: Addressing audience concerns about the job markets future
47:30: The future of software development and the importance of skills
53:27: AI in learning and education: Just-in-time knowledge
57:24: YK Sugis career path: From Google to YouTube to Sourcegraph
1:05:35: YK Sugis insights on developer advocacy and content creation
1:12:12: Advice for aspiring developer advocates and content creators
1:16:01: Stress management, work culture, and the importance of direction
1:22:53: Missed opportunities and the future of Japanese tech companies")
![Developer and inventor with 27 software patents [Angie Jones Interview #136]](https://i.ytimg.com/vi/rAbnVhhyIjE/hqdefault.jpg "Developer and inventor with 27 software patents [Angie Jones Interview #136]
On this weeks episode of the podcast, freeCodeCamp founder Quincy Larson interviews Angie Jones. Shes a developer and holder of 27 software patents. Shes worked at companies like IBM and Twitter, doing both test engineering and developer advocacy.
We talk about:
- How a bad performance review from her boss early in her career taught her to be less timid and more vocal about her ideas.
- How she invented lots of software testing processes and holds 27 software patents.
- Her work at IBM, Twitter, and other big tech companies.
- How feature development and test development are completely different disciplines, which each require dedicated practice and their own mindsets
- Her interest in the game Second Life and the possibility of virtual worlds
- How she uses AI for debugging and test engineering
Can you guess what song Im playing on my bass during the intro? Its a 1992 Acid Jazz song.
Also, I want to thank the 9,779 kind people who support our charity each month, and who make this podcast possible. You can join them and support our mission at: https://www.freecodecamp.org/donate
Links we talk about during our conversation:
- Test Automation University learning paths: https://testautomationu.applitools.com/learningpaths.html
- Angie on Twitter: https://twitter.com/techgirl1908")
![Learn Python - Full Course for Beginners [Tutorial]](https://i.ytimg.com/vi/rfscVS0vtbw/hqdefault.jpg "Learn Python - Full Course for Beginners [Tutorial]
Learn Python - Full Course for Beginners [Tutorial]")
