MEAN Stack E-Commerce App: Angular, NX, PrimeNG [2023]

Understand the front end and back end separation of concerns, where the server stores data and delivers it to the client using Java, SQL, and NodeJS.

Explore how a restful api enables client-server data exchange through http methods for create, read, update, and delete, with versioned endpoints and json or xml responses.

Create a backend server with Express in a mean stack app, set up npm, nodemon, and an API route that responds with hello API on port 3000.

Define and read environment variables in a Node.js app with dotenv to set a global api url prefix and versioned routes.

Learn how to exchange json data between front end and back end by building a products API with get and post methods. Enable express.json middleware to parse request bodies.

Install and configure the Morgan middleware to log http requests from the frontend, including posts, gets, puts, and deletes, using the tiny format and app.use.

Install mongoose to connect your Node.js app to MongoDB Atlas in the cloud, using a connection string and environment variable, with a created user, database, and IP whitelist.

Learn to use MongoDB Atlas or MongoDB Compass to browse and connect to databases, and import or export data using a ready dataset for deployment.

Seed the database with the provided export files and json seeds by importing categories, products, orders, order items, and users, along with the included product images.

Post data to a MongoDB collection via a Mongoose model and schema, create and save a product via a NodeJS API, then fetch the product list with async/await.

Analyze the e-shop database to shape backend routes and schemas in mongodb. Define products, categories, users, orders, and order items with key fields and references for future growth.

Organize a Node.js backend by separating schemas into models and APIs into routers, then export modules and wire product routes with Express and app.use.

Enable cors in a nodejs backend to resolve cross-origin resource sharing between front-end and back-end. Use the cors package and app.use(cors()) to permit all origins.

Learn to build backend product and category schemas, expose product data via a json rest api, and perform CRUD, connect products to categories, with featured filtering for health.

Build a product model schema with Mongoose, defining fields like name, description, rich description, image, images, brand, price, category reference, count in stock, rating, reviews, featured, and date created.

Create a category schema with name (string, required), icon name, and color hex string fields, then build the category API for frontend display.

Learn to add and delete categories in a mean stack app using a Mongoose category model, async/await, and routing, including request.body data and id-based deletion.

Fetches the categories list and a single category by id using get requests and find by id, with response handling and Postman testing.

Update a category by put request with the category id in params and the updated data in the body (name, icon, color), returning the new data.

Post a new product via rest api by validating the category, creating a product model, and saving to the database with async/await; returns 400 on invalid category.

Fetch a list of products with get requests and find, then use select to return only name and image for a more efficient API.

Use Mongoose populate to replace category ids with full category details in product responses. Populate works with single and list get requests, pulling category data via object id references.

Update a product by id using a put request, validate the category, and return the updated product, handling errors for invalid category or missing product during the update.

Learn to validate product ids in delete operations using mongoose is valid object id, return invalid product id errors, and prevent backend hangs in api requests.

Create an api endpoint using mongoose to count products and return a json count for admin statistics, enabling the admin panel to show total products.

Build a featured products rest api for the mean stack e-commerce app by filtering with is_featured and applying a numeric count limit, converting string inputs to numbers.

Learn to expose a frontend friendly id by creating a virtual id in mongoose, mapping from _id, and enabling virtuals so the API returns the plain id.

Learn to build authentication and a users API, secure the backend with hash passwords and json web tokens, and differentiate admins from users while protecting admin-only actions.

Define the user schema with name, email, password hash, and required fields, including address, phone, and admin flag, plus a front-end friendly virtual id for seamless registration.

Register a new user by posting a json body to the api/users route, defining essential user fields, and verify creation in the database.

Hash user passwords securely with bcrypt.js in a Node.js back end. Install the library, use bcrypt.hashSync with a salt, and compare hashes during login.

Learn how to fetch the list of users and a single user in a MEAN stack app, and exclude the password hash by selecting fields like name, phone, and email.

Enable user login via email and password, verify credentials with bcrypt, and issue a JWT token using a secret, then use the token to access secured APIs with expiration.

Protect the API by implementing an Express jwt middleware and a secret from environment variables. Enforce bearer authorization in headers to allow access only for authenticated users.

Learn to centralize API error handling in Node.js by creating a reusable error handler, classifying errors by name (unauthorized, validation) and returning appropriate statuses (401, 500) for clearer front-end feedback.

Exclude public routes from jwt authentication in an express api for a mean stack e-commerce app, using path patterns and regex to permit login, register, and product listings.

Pass secret data in the token, such as is admin, to restrict admin panel access and validate the token on the backend with a secret, not in the front end.

Enforce admin versus customer roles using the token payload, guard admin routes with express jwt and its isRevoked check, and obtain a fresh token by logging in after role changes.

Build and test a user count API in the mean stack by reusing the product count pattern, validating with postman and enabling delete operations.

update user data with a put request, keeping the existing password when not provided, by checking the database for the user, hashing a new password if given, and saving changes.

Learn to link products to orders, enable cart checkout with address and payment options, auto-fill user data, and manage order states from the back end using Postman.

Implement order and order item schemas in mongoose, linking orders to multiple items and items to products, with shipping details, total price calculation, default pending status, and a user reference.

Explore how the front end sends an order as an array of order items, each with a product ID and quantity, linked to the order and user ID.

Learn to post orders by first creating order items, collecting their IDs, and attaching them to the new order, with async handling and Postman testing.

Retrieve orders with an authenticated get request, populate user details by name, add new orders, and show products in order items with category via nested populate.

Learn to update an order status with a put request using an order id, updating only the status from pending to processed to shipped to delivered, verified via Postman.

Back-end computes the total price by resolving order items from the database using Mongoose, populating product price, multiplying by quantity, and reducing to a single total with Promise.all.

Create a get total sales endpoint using Mongoose aggregate to sum the total_price across orders, and display the total in the admin dashboard.

Explore fetching a specific user's order history via a get user orders API, with user id, populating order items with products, ordered newest to oldest.

Master image uploads for products with multer in a mean stack app, configuring destination and file names, validating png/jpeg files, testing via postman, and handling single and gallery image URLs.

Configure your backend file uploads using Multer, set disk storage, rename files, store in public/uploads, and construct full image URLs for frontend display.

Test image upload with Postman using multipart form data and an authorization token and a file field. Update the backend to name files with date.now while preserving the extension.

Define a file type map of allowed image mime types (png, jpeg, jpg) and validate uploads by deriving extensions from mime types, rejecting non-image files such as pdf.

Update a product image via a put request by optionally uploading a new image; if none, keep the existing image and update the image path in the database.

Learn to implement a product gallery update API that accepts an array of images, builds image paths with a base URL, and updates only the gallery.

Add the uploads folder to the publicly accessible paths in the JWT configuration and define a static public/uploads directory in Express, enabling image URLs to load without authentication.

Examine the e-shop page structure in an Angular, NX project, detailing the front-end and admin panel layouts with home, product lists, details, cart, login, and shared components.

Install angular CLI globally with npm, resolve mac permission issues with sudo, verify via ng help, and create a desktop workspace for angular applications and libraries.

Build a practical Angular app by using modules that contain components and services. Components fetch data through services from the backend to display product lists and product details.

Discover NX, a TypeScript based monorepo tool built on Angular dev kit that provides a workspace CLI, cloud caching, shared libraries, and fast, change-focused testing for Angular, React, and NodeJS.

Install nx globally using npm to set up the nx command line interface, verify the installation, and prepare to generate applications, run web servers, and view the dependency graphs.

Explore a real-world NX monorepo with eShop, blog, and admin apps, using shared libraries, services, and a state store for login, cart, and orders.

Create a company workspace with nx, choosing an Angular preset and naming the first app ng shop inside a shared repo; configure ESLint, Prettier, and the apps libs structure.

Create the admin panel app in the NX monorepo alongside the eshop, using angular with sass styling and optional routing, then serve both apps on separate ports.

Create application-level components in an nx angular project, building a home page with header and footer, and organize components with pages for product lists using nx g component.

define application-level routes for a home page and a product list, using router module and a routes array, and render components via the router outlet.

Create a master page by adding shared header and footer components in the app component, so product list and home page render within this layout via an outlet.

Rename components to shop-specific selectors (header, footer) and update the app-specific eslint to the ng shop prefix. Enforce kebab-case or camelCase and run eslint to fix linting before build.

Enable live linting in vscode with eslint to validate code as you type. Learn to enable rules, adjust for empty constructors and ng shop prefixes, and manage errors.

Learn how the nx vscode extension speeds angular development by generating components via a GUI with dry-run previews, options for path, module, style (scss), and selector.

Create shared libraries with nx generate, exposing UI components and services, configure library tsconfig, eslint, and angular.json, and prepare exports for reuse across applications.

Use the NX extension in Visual Studio Code to generate and configure shared libraries, including products, users, and orders, with scss styling, Ivy, Jest tests, and lazy loading.

Export library components and services via a central index and import them using tsconfig paths. Unify workspace paths so UI modules in products reuse shared libraries without path issues.

Learn how to move from component-scoped styles to a shared styles approach by creating a public styles folder, importing external CSS, and using shared variables across the app and libraries.