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.

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 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.

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.

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.

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.

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.

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.

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 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'.

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.