Django with React | An Ecommerce Website

Build the front end with React via Create React App, create components, run npm start on port 3000, and plan to connect to a Django back end via API.

Create header and footer components styled with React Bootstrap and a luxe theme, and implement a responsive navigation bar for the Django with React ecommerce site.

Loop through a dummy products array to render the home screen product listing. Display each item with image, name, price, rating, and reviews with ID-based links to the product page.

Wrap the app in a browser router and configure home and product routes with a dynamic id. Use LinkContainer wrappers to enable client-side navigation without reloading.

Build a product details screen for an ecommerce site by routing to a product id, showing image, name, rating, price, stock, and an add-to-cart button.

Build a real backend and database to power the React front end, with API endpoints for products and data serialized between port 8000 and port 3000.

Set up the backend alongside the front end by creating a django project, configuring a virtual environment, and building a dummy data api with the rest framework for products.

Build and migrate a Django ecommerce database by defining models and applying migrations, use sqlite for testing, and explore the admin panel to manage users, products, and orders.

Learn how to model a product and related data in a Django backend, including user relations, fields, admin integration, and migrations, plus planning for reviews, orders, and shipping addresses.

Configure a Django product image field with Pillow, run migrations, and test uploads, noting images upload to the project root and planning to route them to a static folder.

Configure Django to store uploaded images in static/images by defining staticfiles_dirs, media_root, and media_url in settings.py, and wire up urls.py with static() to serve media from the media route.

Fetch real product data from the database in a Django REST framework API by creating a product serializer, serializing querysets, and returning JSON to the React frontend.

Explore how Redux manages global state across components, covering reducers, actions, and action creators, and show how to fetch data with React Redux.

Configure a redux store with thunk middleware and dev tools, connect it to the app using react-redux, and integrate a provider to view and manage state in the browser.

Dispatch the list products action to fetch data and update the Redux store, then use useSelector to pull products. Show loading and error states while the API call runs.

Replace inline loading text with loader and message components built with react bootstrap, using a spinner for loading and an alert for errors in a Django with React ecommerce site.

Create and register product details redux flow—constants, reducers, and actions—use dispatch and the product id from the URL to fetch data, with loader and error messaging.

Create a stock-based quantity dropdown on the product page using React state, render options dynamically, and add to cart with product id and quantity.

Implement add to cart with redux: create cart constants, reducers, and actions; manage item quantity; fetch product data via API; and persist cart items to local storage.

Learn to implement add to cart by wiring dispatch and selectors, reading product id and qty from the URL, and updating and rendering the cart screen.

Build a two-column cart page in React showing cart items with images, names, prices, and quantity controls, plus an empty cart message, a remove option, and a checkout button.

build remove from cart functionality by updating cart reducers with a cart remove item case, dispatching an action with the product id, and updating the cart in local storage.

Learn how Json web tokens enable authentication and authorization on a website by storing tokens in local storage, sending them in headers, and restricting access for customers vs admins.

Set up Postman, create a pro shop collection, and configure API routes for products and product pages; test with port 8000, headers, and Json web tokens.

Install and configure django rest framework simple jwt to enable token authentication, update settings for default authentication, and set the token lifespan to 30 days.

Customize Django JWTs by encoding extra user data into tokens and returning username and email in the auth response, enabling front end state loading without extra calls.

Create a dedicated user serializer and profile endpoint in a Django rest api, leverage token-based authentication to return concise user data including id, name, email, and admin status.

Explains how to implement protected routes in a Django with React ecommerce app by using permission classes to restrict views to authenticated and admin users via bearer tokens.

Build a register user endpoint in Django REST framework, create users via post requests, hash passwords, return a token, and implement a custom error handler for duplicate emails.

Configure Django to log in with email by syncing email with username, and use pre_save and post_save signals to keep them in sync.

Clean up and modularize Django project by splitting views and urls into separate product, user, and order files, updating base urls, and testing with Postman.

Implement the user login reducer and action to enable login, logout, and registration, and display logged-in user profile by integrating axios requests, error handling, and local storage persistence.

Create a login form with email and password, dispatch a login action, manage loading and errors with Redux, and redirect authenticated users while storing tokens in local storage.

Develop a back-end update profile endpoint using a put request, returning a new access token; update name, email, and optionally the password, with URL and view changes.

Build a user profile page in Django with React by defining constants, reducers, and actions, registering them in the store, and fetching user details via a protected API call.

Implement update_profile actions and a reducer in a Django with React ecommerce app, wire the form submit to the profile update endpoint, and refresh local storage.

Fix the user details bug by resetting the user details state on logout, dispatching a reset action, and ensuring the correct user loads after login.

Create the shipping screen for checkout with a form for address, city, postal code, and country, saving data via Redux and local storage to proceed to payment.

Build a checkout steps component with a top progress bar showing login, shipping, payment, and place order, integrated into the shipping screen to guide the checkout flow.

Build and integrate a payment screen to select a payment method (default PayPal), handle form submission, dispatch save payment method, and redirect to place order while validating shipping info.

build the place order screen with an order summary, shipping and payment details, and an itemized cart totals, preparing for a Django backend integration.

create a Django order API by building views and routes to process checkout data, create orders, shipping addresses, and order items, update stock, and return serialized nested data.

Create the front-end order flow using actions, reducers, and constants to submit order data (items, shipping, payment) and manage loading. Also reset order state and clear cart after success.

Create the order details reducer and get order details action to fetch an order by id, manage loading, and populate order items and shipping address from the API orders endpoint.

Learn to build the order screen by fetching order details using the order id, rendering shipping info, user data, and order items with prices, and displaying payment and delivery status.

Update the order status to paid by creating a Django view and url, authenticating the user, handling a post with the order id, and returning 'order was paid'.

Create an order pay reducer and action, wiring a put request to update an order's payment with payment results, and manage loading, success, and reset states in redux.

Build an admin user list page in a Django with React ecommerce app, implementing admin-only access, Redux actions and reducers, and a protected route redirecting non-admins to login.

Develop django back-end routes to get a user by id and, as an admin, update a user using a primary-key lookup, with serialization of the user data.

Create a user edit screen that loads user details by id into a form, enables admin status changes, and submits updates to the backend to refresh data.