Building a Bookstore Application with the MERN Stack: A Comprehensive Guide

The tutorial introduces the MERN stack, which consists of MongoDB, Express.js, React.js, and Node.js, highlighting its effectiveness for building responsive web applications. Mohammed Taheri, a full stack developer, will guide the audience through creating a bookstore application using this stack.

Before starting the tutorial, viewers are advised to have a basic understanding of JavaScript and React. The tutorial aims to simplify the learning process, and all code will be available on Mohammed's GitHub, with a link provided in the video description.

To follow along, participants need to install Node.js on their computers, along with a code editor and a web browser. Mohammed uses Visual Studio Code and Chrome but notes that any tools can be used.

The project begins by creating a new folder named 'bookstore-mern-stack' and opening it in Visual Studio Code. Two separate folders for backend and frontend projects are created, along with a .gitignore file and a README.md file for the GitHub repository.

In the backend folder, the project is initialized using 'npm init -y', which generates a package.json file. Mohammed emphasizes adding a line to specify the module type for using ECMAScript syntax, and installs Express.js and Nodemon for server management.

An 'index.js' file is created as the entry point of the project, where Express.js is imported and a server is set up to listen on a specified port. Mohammed suggests creating a 'config.js' file to manage the port configuration, although he opts not to use an .env file for this tutorial.

The server is started using the command 'npm run dev', which utilizes Nodemon for automatic restarts. Mohammed checks the Node.js version to ensure the environment is set up correctly and confirms that the server is running successfully.

Upon opening the browser to test the server at localhost on port 5555, a 'Cannot GET /' message appears, indicating that no route has been defined yet. Mohammed uses the developer tools to inspect the network request, noting a 404 status code due to the absence of an HTTP route.

To resolve the 404 error, Mohammed explains the need to create an HTTP route in 'index.js' using Express. He plans to define a new route for the root path ('/') using 'app.get', which will allow the server to respond to requests at that endpoint.

The discussion begins with an overview of HTTP methods, particularly focusing on the 'GET' method, which is commonly used to retrieve resources from a server. The speaker mentions that there are other HTTP methods that will be explored later. The first parameter of the 'GET' method is an endpoint string, and the second is a callback function that handles the request and response. The speaker demonstrates how to send a response with a custom HTTP status code, specifically 234, and checks the browser to confirm the message and status code are displayed correctly.

The speaker transitions to integrating a MongoDB database into the project, suggesting the use of a free online database. They navigate to mongodb.com, where they sign in using Google authentication. The speaker selects the free tier for the database, names it 'Books store', and opts not to use a tag. They emphasize the importance of using a strong password for database authentication, demonstrating the setup process without adding any IP restrictions since it's a local project.

After creating the database, the speaker shows how to obtain the connection string by clicking the 'connect' button and selecting the Node.js driver. They copy the connection string and instruct to paste it into 'config.js', reminding to include the password and specify a collection name, which they set to 'books'. The speaker encourages viewers to create their own free database, noting that it will be deleted after the tutorial.

To work with the MongoDB database, the speaker introduces the Mongoose library, a popular object data modeling tool for MongoDB. They demonstrate how to install Mongoose using npm and import it into the project. The speaker explains how to connect to the database using Mongoose's 'connect' method, handling success and error cases with a promise structure. They emphasize that the Express server should only run if the database connection is successful, moving the 'app.listen' method inside the success block.

The speaker provides a brief overview of Mongoose by referencing mongoosejs.com, where a simple example of saving a 'cat' model to the database is shown. They explain the necessity of defining a model and schema, demonstrating how to create a 'book' model in their project. The speaker stresses the importance of maintaining a proper folder structure, suggesting the creation of a 'models' folder to store all project models.

In creating the 'book' model, the speaker modifies the cat model example by changing its name and using the export keyword for accessibility in other files. They introduce the concept of a schema, explaining how to define a 'book' schema using Mongoose's schema method. The schema includes fields such as 'title' and 'author', both required strings, and a 'publisher' field of type number. The speaker notes that an ID field is unnecessary for this model.

The discussion begins with the automatic handling of IDs by the database, which will also include additional fields for timestamps, such as 'time of creation' and 'time of last update'. A new object is created to incorporate these timestamps into the book schema, indicating that the book model is now ready for use.

With the book model established, the speaker proceeds to create the first book. This involves importing the book model and setting up a new HTTP route using the POST method, which is typically employed to create new resources. The route is defined as '/books', and an asynchronous callback function is implemented to handle requests and responses.

The speaker emphasizes the importance of error handling in the asynchronous process with a try-catch block. In the catch block, any errors are logged to the server console, and a response with a status of 500 is returned, including an error message for the client. Input validation is also performed to ensure all required fields are present in the request body, returning a 400 status if any are missing.

A variable for the new book is created using the request body to extract the title, author, and publisher. The book is then saved to the database using 'book.create', and upon successful creation, a status of 201 is returned along with the created book details, which include an underline ID and timestamps.

To test the POST method, the speaker uses Postman, a tool for working with web APIs. The process involves selecting the POST method, entering the URL (e.g., 'http://localhost:yourPort/books'), and sending the request body in JSON format. After encountering an error due to the server not recognizing the body, the speaker adds middleware for parsing JSON requests using 'express.json'.

After correcting the middleware issue, the speaker successfully creates a book, receiving a status of 201 and the details of the created book in the response. This confirms that the book has been saved in the database.

The next step involves creating a new route to retrieve all books from the database using the GET method. The route is again '/books', but this time it is designed to fetch data rather than create it. An asynchronous callback function is set up to handle the request, with error handling similar to the previous route.

In the try block, 'book.find' is called with an empty object to retrieve all books, and the results are stored in a variable. The speaker then enhances the response structure by wrapping the list of books in an object that includes a count of the books and the data itself, improving the clarity of the output.

The speaker discusses the need for an additional route to retrieve details of a single book. This would allow clients to request specific product details by sending the product ID to the server, demonstrating the flexibility of the API in handling various requests.

The speaker explains a method for retrieving a book from the database using its ID. The route is defined as 'books/:id', where ':id' is a parameter that needs to be extracted from the request. The method 'book.findById' is utilized to search for the book in the database, and the retrieved book is returned to the client. The process is demonstrated using Postman, where a GET request is made with a specific book ID copied from the books list, confirming that the retrieval works successfully.

Updating a book is described as a more complex process requiring both request parameters and the request body. The speaker outlines the need for a new route 'books/:id' using the PUT method. An asynchronous callback function is implemented with try-catch blocks to handle errors. Validation checks for title, author, and publisher are performed, returning a 400 status if any are missing. The 'book.findByIdAndUpdate' method is used to update the book, and the result is checked to return either a 404 status for a non-existent book or a 200 status for a successful update. This process is also tested in Postman with a PUT request.

The speaker discusses the deletion of a book, which only requires the book's ID and not a request body. A new route 'books/:id' is created for the DELETE method. Similar to the update process, an asynchronous callback function with try-catch blocks is used to manage errors. The 'book.findByIdAndDelete' method is employed to delete the book, and the result is checked to return a 404 status if the book is not found or a 200 status for a successful deletion. This functionality is tested in Postman with a DELETE request.

The speaker emphasizes the importance of refactoring the HTTP routes for better application structure, especially when dealing with multiple models. The current setup, which could require creating numerous routes for each model, is deemed inefficient. The speaker suggests using Express Router to organize the routes more effectively, promoting code reusability and a cleaner folder structure. This approach is particularly beneficial when scaling the application to handle multiple models.

The process begins with creating a new folder named 'routes' and a file for each model, specifically focusing on the 'books' route. The speaker emphasizes the need to import Express and define a variable named 'router' to utilize Express Router instead of the app instance. The router is then exported as the default export, and the 'book' model is imported for use in this file.

Next, the speaker transitions to integrating the books route into 'index.js' as middleware. This involves importing the books route and applying it to the '/books' path, allowing the server to handle requests prefixed with '/books' through this middleware. The speaker notes the need to remove redundant '/books' prefixes from the routes to ensure proper middleware functionality.

After refactoring the server, the speaker tests the HTTP routes using Postman, confirming that the requests for the books list are functioning correctly. The speaker expresses satisfaction with the server's performance, indicating that the refactoring was successful.

The discussion shifts to the critical topic of CORS (Cross-Origin Resource Sharing) policy in web development. The speaker illustrates this with a real-world example using Postman and a React project. They demonstrate sending a request to the server and receiving a response without issues, but then encounter a CORS error when attempting the same in a React application. The error message indicates that access from 'localhost:3000' is blocked due to the absence of the 'Access-Control-Allow-Origin' header.

The speaker elaborates on CORS as a security mechanism that restricts web pages from making requests to different domains. They explain that when a request is made, the server checks if the request is permitted based on origins, methods, and headers, which is the cause of the error encountered in the React example.

To resolve the CORS error, the speaker suggests installing the 'cors' package in Node.js. They demonstrate this by running 'npm install cors' in the terminal, followed by importing 'cors' in 'index.js' and using it as middleware. The speaker presents two options for configuring CORS: the first option allows all origins by using 'cors()' with default settings, which is tested successfully in the browser.

The second option for CORS configuration is to allow specific origins, which provides better control. The speaker outlines how to set this up using an object in the CORS middleware, specifying 'http://localhost:3000' as the allowed origin, along with permitted methods (GET, POST, PUT, DELETE) and headers (Content-Type). After implementing this configuration, the speaker confirms that access to the server is granted without any CORS errors.

With the server successfully configured, the speaker transitions to creating the front-end project using React. They mention various methods for setting up a new React project, noting that while many tutorials recommend Create React App (CRA), they prefer using Vite, a build tool that offers improved performance. The speaker plans to delete the existing front-end folder to start fresh with the new project setup.

To set up a new React project, ensure you are in the Main folder and execute 'npm create vite@latest'. If you don't have the latest version of Vite, it will prompt you to install it. After naming your project (e.g., 'floor10'), select React and JavaScript. Once the project is created, navigate to the project directory using 'cd front-end' and install the necessary npm packages with 'npm install'.

To incorporate Tailwind CSS into the project, visit the Tailwind CSS website, navigate to the 'Get Started' section, and select the framework guide for Vite. After completing the first step, copy the command to install Tailwind CSS and run 'npm install -D tailwindcss@latest postcss@latest autoprefixer@latest'. Next, initialize Tailwind CSS configuration by executing 'npx tailwindcss init -p', which creates 'tailwind.config.js' and 'postcss.config.js'. Update 'tailwind.config.js' with the necessary content and replace the contents of 'index.css' with the specified Tailwind directives, removing 'app.css' as it is no longer needed.

In 'app.js', clear the existing content and create a new component using the 'rafc' snippet provided by the ES7+ extension. Apply Tailwind CSS classes such as 'p-4' and 'text-white' to style the component. Run the project with 'npm run dev' to verify that everything is functioning correctly, confirming that the React project is now set up with Tailwind CSS.

To enable single-page application (SPA) functionality, install React Router by executing 'npm install react-router-dom'. In 'main.js', import 'BrowserRouter' from 'react-router-dom' and wrap the 'App' component with it. This setup allows the application to handle routing without refreshing the page.

In 'app.js', import 'Routes' and 'Route' from 'react-router-dom'. Define five routes for different pages: Home, Create Book, Show Book, Edit Book, and Delete Book. Create a new folder named 'pages' in the 'src' directory and add the corresponding components: 'CreateBook.jsx', 'DeleteBook.jsx', 'EditBook.jsx', 'Home.jsx', and 'ShowBook.jsx'. Set up the routes in 'app.js' to link the paths to their respective components, ensuring that each route is correctly configured.

To enhance the application, install two additional npm packages: 'react-icons' for icon usage and 'axios' for making HTTP requests. Run 'npm install react-icons axios' in the terminal. Afterward, start the backend server by navigating to the backend directory and executing 'npm run dev', while also running the frontend server in a new terminal window.

To improve user experience during data loading, create a loading spinner component. Create a new folder named 'components' and add 'Spinner.jsx' with a div styled to represent a loading spinner. In the home page component, import necessary hooks from React, axios for data fetching, and the Spinner component. This spinner will visually indicate to users that data is being loaded.

The discussion begins with the creation of state variables for managing books in a React application. An empty array is initialized for books, and a loading state is set to false. The speaker emphasizes the use of the useEffect hook to call the backend API for fetching the books list, assuming familiarity with basic React concepts.

The speaker details the process of making an API call using axios to retrieve the books list from the backend. Upon receiving the response, the books state is updated with the data from response.data.data, and the loading state is set to false. Error handling is also mentioned, where any errors encountered during the API call are logged to the console.

The UI structure is outlined, starting with a main division that includes padding and a header (H1) displaying 'Books List'. A link to create a new book is also included, featuring an icon. The speaker explains the conditional rendering of a spinner component while loading, or a table displaying the books if loading is complete.

The table layout is described in detail, including the use of classes for styling. The table consists of a header (t-head) with five columns: 'ID', 'Title', 'Author', 'Publisher', and 'Operations'. The speaker notes that certain columns are hidden on mobile and tablet sizes to enhance the user experience.

The speaker explains how to map over the books array to generate table rows (tr) for each book. Each row includes cells (td) for the book's index, title, author, publisher, and operational links. The operational links include options to view details, edit, and delete a book, with appropriate icons and color coding for actions.

After implementing the table, the speaker tests the functionality of viewing book details, editing, and deleting books, confirming that all features are working correctly. This testing phase ensures that the application behaves as expected.

The speaker introduces the creation of a reusable 'Back Button' component to navigate back to the books list. This component is designed to receive a destination prop, defaulting to the root path if none is provided. The button is styled using specific class names to ensure a consistent look and feel.

The speaker begins by setting up the Showbook component, closing the Explorer for more space. They import necessary modules from React, including useEffect and useState, as well as axios for HTTP requests. The speaker also imports the BackButton and Spinner components, and establishes a state for handling book data. They utilize the useParams hook to retrieve the book ID, setting the loading state to true initially.

Using axios, the speaker makes a GET request to fetch the book data based on the retrieved ID. Upon receiving the response, they update the book state with the response data and set the loading state to false. In case of an error, they log the error and set the loading state to false as well.

In the return section of the component, the speaker applies padding to the main div and includes the BackButton. They create an H1 element with the text 'Show Book' and check the loading state. If loading is true, they display the Spinner component; otherwise, they render a div containing the book's details, including ID, title, author, publication date, creation time, and last update time, using appropriate class names for styling.

The speaker transitions to the CreateBook component, where they import useState, BackButton, Spinner, axios, and useNavigate from React Router. They establish three states for managing the title, author, and publisher of the new book, along with a loading state. The useNavigate hook is set up to redirect to the main route after successfully creating a new book.

The speaker defines the handleSaveBook function to manage the book creation process. They create a new data object containing the title, author, and publisher, set the loading state to true, and use axios to send a POST request to '/books' with the new data. Upon success, they set loading to false and navigate to the main route. In the catch block, they handle errors by logging them and displaying an alert.

In the CreateBook component's return section, the speaker adds a main div with padding and includes the BackButton. They create an H1 element with the text 'Create Book' and check the loading state to display either the Spinner or an empty string. They then structure the form with labels and inputs for title, author, and publisher, ensuring to set the appropriate state on input changes. Finally, they add a button to trigger the handleSaveBook function when clicked.

The speaker concludes by testing the application, entering information for a new book, and pressing the save button to initiate the book creation process.

Upon successful completion of the operation, users will be automatically redirected to the home page, where they can view the new book that has been created.

The process of editing a book begins by copying the structure from 'createbook.js' and pasting it into 'editbook.js'. The component is renamed to 'EditBook', and the export statement is updated accordingly.

In the 'EditBook' component, the first step is to fetch the book data using its ID from the backend. This involves importing 'useEffect' and 'useParams', restructuring the ID from 'useParams', and making an Axios GET request to retrieve the book details.

The function for saving the edited book is renamed to 'handleEditBook'. This function utilizes the PUT HTTP method and includes the book ID in the request URL. The button's onClick event is updated to call this new function.

After clicking the edit button for a selected book, the application enters a loading state. Once the data is edited and saved, the user is redirected to the home page, where the updated book data should be visible.

The next step involves implementing the delete functionality in 'book.js'. This requires importing necessary hooks and libraries, setting up a loading state, and creating a 'handleDeleteBook' function that uses Axios to delete the book based on its ID.

In the return section of the delete component, a confirmation message is displayed, asking the user if they are sure they want to delete the book. A button is provided to invoke the 'handleDeleteBook' function, confirming the deletion.

Users can test the delete functionality by clicking the delete button for any book. Upon successful deletion, they are redirected to the home page, confirming that the book has been removed from the list.

The application is now complete, but there are plans to enhance its visual appeal by providing two different options for displaying the book list: in a table format and as cards. The first step involves creating a new folder for components and setting up 'bookscard.jsx'.

The speaker discusses the process of refactoring a table component for a books list. They mention copying the table tag from a specific page and pasting it into the return section, indicating the need to receive the books list from props. The speaker emphasizes the use of links and icons, which are copied from the homepage, to complete the component.

To manage the display type of the books list, the speaker introduces a state variable named 'showType' with a default value set to 'table'. They describe creating a new division with specific class names for styling and functionality, including buttons that allow users to toggle between table and card views.

The speaker explains the implementation of conditional rendering based on the 'showType' state. If 'showType' equals 'table', the component returns a box table; otherwise, it returns a books card. This functionality is tested to ensure that the application correctly displays either the table or card view after loading.

The speaker notes the need to import various components from React, including 'Link' and several icons such as 'PiBookOpen', 'TextSlide', and 'UserCircle'. They also mention receiving the books as props for individual book components.

The speaker discusses the implementation of responsive design for the book cards by using grid classes that adjust the number of columns based on screen size. They specify using 'SM:grid-cols-2', 'LG:grid-cols-3', and 'XL:grid-cols-4' to ensure the layout adapts to different devices.

The speaker details the structure of the book card component, which includes various HTML elements styled with specific class names. They describe using an H2 tag for the publisher's name, an H4 tag for the book's title, and additional divisions for icons and buttons, ensuring a visually appealing layout.

The speaker outlines the creation of action links within the book card component. They specify three links: one for viewing book details, another for editing the book, and a third for deleting the book. Each link is associated with an icon and styled appropriately, enhancing user interaction.

After implementing the changes, the speaker tests the application to verify that both the table and card views of the books are functioning correctly. They confirm that users can switch between the two views seamlessly, ensuring a smooth user experience.

The speaker discusses the need to refactor the existing code by creating a reusable component for the book card. They suggest moving the division inside the map to a new component named 'BookSingleCard.js', which will receive a book object as a prop. This change aims to enhance maintainability and facilitate easier updates in the future.

The speaker introduces a new feature to the project: a modal to display information for each book. They outline the steps to create a new file named 'BookModal.jsx', where they will import necessary icons and define props for the modal. The modal will have a fixed position with specific styling to ensure it overlays other content, and it will close when the user clicks outside of it or on a close button.

The speaker completes the modal setup by copying elements from the single book card to display relevant information. They explain how to manage the modal's open and close states using React's useState hook. The modal will be triggered by a button that, when clicked, sets the state to true, allowing the modal to appear. The speaker demonstrates that clicking inside the modal keeps it open, while clicking the close button or outside the modal will close it.

The speaker concludes that the bookstore project now has full modal functionality, allowing users to view detailed information about books. They emphasize the importance of user interaction in the modal, highlighting that it can be closed through various actions, thus enhancing the user experience.

The discussion begins with the need to improve user feedback during database operations such as create, update, or delete. Currently, users are redirected to the home page without any feedback on the operation's success, which negatively impacts user experience. A proposed solution is to implement a visually appealing alert system using the 'notistack' npm package, which enhances the aesthetic of alerts compared to the default browser alerts.

To implement the 'notistack' package, the speaker outlines the steps: first, install the package in the front-end directory using 'npm install notistack'. Next, in 'main.js', import 'SnackbarProvider' from 'notistack' to make it accessible throughout the project. The speaker then demonstrates how to use the snackbar in 'createbook.js' by importing 'useSnackbar', creating a snackbar instance, and displaying success or error messages based on the operation's outcome.

The speaker continues by applying the same snackbar implementation in 'editbook.js' and 'deletebook.js'. For editing a book, a success message 'book edited successfully' is displayed, while an error message is shown in case of failure. Similarly, for deleting a book, a success message 'book deleted successfully' is presented, ensuring that users receive immediate feedback on their actions.

After implementing the feedback system, the speaker tests the application. Upon creating a new book, a green alert confirms the successful creation. Editing a book also results in a similar success alert, and deleting a book provides the same positive feedback. The speaker concludes that these enhancements significantly improve the user experience of the application.

The session wraps up with the speaker reflecting on the final lesson of the book history project, expressing hope that the information was useful and inviting feedback from the audience. The speaker wishes the audience a good time and bids farewell.