React & Django Full Stack: web app, backend API, mobile apps

Explore Django, a mature, full-stack web framework designed for perfectionists with deadlines. Learn to use it for backend and frontend, why it's popular, and how to install Django with Python.

Install and verify Python on macOS and Windows, distinguish Python 2.7 from Python 3.x, locate installations, and set PATH to run Python 3 in your full stack workflow.

Create and activate a Python virtual environment to isolate your project’s dependencies. Install Django inside the virtual environment to avoid global installations and manage project-specific packages.

Create a new Django project inside a fresh virtual environment, install Django, start the project with django-admin startproject, and run the server with manage.py runserver at 127.0.0.1:8000.

Install and configure the PyCharm IDE (community or professional) to manage a Django project, initialize a virtual environment, and run the server with manage.py by editing configurations.

Create a Django app inside a project to give each app a single responsibility and learn how manage.py start up or Django admin sets up URLs, settings, and sqlite3.

Create migrations from model changes and apply them with migrate; register your app in installed apps, and evolve the database schema on SQLite.

Learn to explore the database using Django admin: create a super user, log in, and register models like book (with a title field) to view, add, edit, or delete records.

Explore field options in Django models, including max length, null, blank, unique, default, and choices, with practical examples for a book title field and the migration workflow.

Explore Django model field types, including char, text, numeric, date, file, image, and boolean fields, with options like max_length and auto_now, and observe migrations and the admin interface.

Learn how Django urls route a project by creating a main urls file, including app urls, and return an http response from views across demo and admin paths.

Explore class-based views in Django by converting a function to a class with a get method, wiring it in urls, and using as_view to serve responses.

Explore how Django model objects work: fetch all books, filter by published status, and get a single book by id using the admin and views.

Learn to create and render a Django template by configuring a templates directory, adding first_temp.html, mapping a url to the template, and using render to display a full page.

Learn to pass dynamic data to Django templates via a render object, display books from the database with a for loop, and conditionally render published items with if statements.

Explore extending Django's built-in admin to tailor how books appear, register models with decorators, and customize fields, list displays, filters, and search to manage data efficiently.

Integrate Django rest framework to serve backend data as JSON for front-end apps, install the package, add rest_framework to installed apps, and apply migrations before using serializers.

Learn how to build a Django REST framework API by creating a model serializer for books, wiring a viewset with a router, and exposing endpoints with the automatic UI.

Learn to use Postman for API development, fetch all or individual books via get, post, put, and delete, and view JSON outputs from a serializer-driven viewset.

Learn how Django rest framework generates a random token to authenticate users and secure API access, including enabling token authentication and obtaining tokens via username and password.

Secure a Django REST framework app by configuring default and per-view permissions, enabling token authentication, and guarding endpoints with is_authenticated.

Explore one-to-one relationships in databases by extending a book model with a related book number, including isbn fields, migrations, admin registration, and nested serializers.

Learn to implement a one-to-many relationship in Django by modeling books and characters with a foreign key, using related_name, migrations, and serializers to expose multiple characters per book.

Master many-to-many relationships in Django for full stack apps by linking authors and books with migrations and related fields. Build APIs with serializers and viewsets, and test with Postman.

Launch a Django backend API for the movie rater app by creating a project and app, wiring Django REST framework, and applying migrations and running the server.

Set up Django routing and URLs, add API path with include, register apps, migrate, and create a superuser as you prepare to build models, serializers, and views in next videos.

Create models, movie and rating, linking ratings to movies and users with on delete cascade. Enforce 1–5 star validation and unique together for user and movie, migrations and admin.

Create serializers for movie and rating models using Django REST framework, define model view sets, register routes with a router, and test the API using Postman.

Demonstrates testing a rest api by creating, retrieving, updating, and deleting movie records with form data; validates ratings with stars 1-5 and enforces unique user–movie constraints.

Create a custom rate_movie method in the movie view set, decorate it with @action(detail=True, methods=['post']), and return a 200 response with a message. Call it at movies/{id}/rate_movie.

Learn to implement a rate movie endpoint by validating stars in the request data, returning a bad request when missing, and fetching the movie by its primary key.

Create a rating endpoint that updates or creates a rating using movie, user, and stars, with token authentication considerations. Learn to validate input and return serialized results with status messages.

Create backend functions to count and average ratings per movie and expose them in the serializer, enabling an optimized single query for frontend display.

Enable token authentication in a Django REST framework backend, generate and use tokens for login, and restrict rating endpoints to authenticated users by attaching the token to requests.

Learn to register users in a Django backend by building a user view set and serializer, hashing passwords, and exposing a post method for new user creation via the API.

Create and manage user tokens automatically with Django rest framework, enable token-based authentication, and apply per-endpoint permissions to restrict access to movies and ratings.

Explore the Django v5 update, including setting the default auto field and adopting models index for user and movie, while noting server warnings are not errors.

Learn to build the front end with React for a Django full-stack web app, install NodeJS and npm, and explore optional yarn.

Learn to create a new React app via npx create-react-app, run a local development server with npm start, and build for production with npm run build.

Explore the React app file structure, including node_modules, package.json and package-lock.json, and learn to manage dependencies, scripts, and dev dependencies for live reloading with npm start.

Learn how React treats every piece of code as a component, create functional and class-based components, and reuse, import, and export them to build a modular user interface.

Learn how to use props to pass data from a parent to child in React, with examples for functional and class-based components, including strings, numbers, and fragments.

Explore how React events work, including onClick and onChange, and learn to pass event handlers between parent and child via props for two-way communication.

Learn how state differs from props in React and how to manage component data with class-based state and setState. Explore event handling and bindings to keep state in sync.

Explore how to hook into class-based component lifecycles, use componentDidMount to set state after mounting, and manage props, state, and unmount with lifecycle methods.

Explore conditional display in React by toggling views with if statements, props, and state; use inline ternaries and fragments to show or hide content based on conditions.

Learn how to render lists in React with map by looping through an array of animals, returning elements and assigning unique keys so React can distinguish each item.

Learn how to implement routing in React using react-router-dom to render components based on the URL, including exact path matching and wrapper layout with header and footer.

Explore how context replaces prop drilling by using a provider and consumer to share data across components as a global state.

Explore styling a React app with traditional CSS, inline styles, and styled components; import CSS in App.js, use className, apply inline style objects with camelCase properties, and reuse styled components.

Explore hooks in React for state in functional components using useState, initialize with numbers one, two, three, and update state with the update function to render changes.

Explore how functional components use use state and use effect to replicate class component lifecycle, control updates with dependency arrays, and trigger effects on numbers and letters changes.

Create a React app with npx create react app, and name it Movie Creator. Run it in Visual Studio Code, then prune files and update the title and favicon.

Learn to build a two-column layout for a React app using Tailwind CSS, with a left movie list and right movie details, using grid and Tailwind classes.

Create a reusable movie list component in React, manage movies with useState, render each movie with a map, and prepare to fetch data from an API in the next video.

Learn how to fetch a movie list from an API using React's useEffect, perform a GET request with fetch, handle headers and a token, and manage loading and error states.

Diagnose and fix CORS errors when a React frontend on localhost:3000 fetches from a Django API. Configure Django course headers and origins for local development.

Learn to build an interactive movie list in React by managing state with useState, wiring callbacks through props, and handling click events to pass the selected movie to the parent.

Create a new movie details component and import it into the app. Pass the selected movie as a prop and render its title and description with null checks.

install and use the react-icons library to display rating icons by importing star variants from font awesome, hero icons, material, and google icons in one unified package.

Display a five-star rating with tailwind styling, driven by each movie's average rating through a conditional class and a ternary operator, plus show the rating count.

Implement a client-side user rating feature by rendering five dynamically mapped star icons, managing the highlight with React state, and handling mouse enter and leave events.

Style the app with tailwind by adjusting text sizes, borders, padding, and margins, mix tailwind with existing CSS, and mark the movie list as clickable with a cursor pointer.

Make the star rating clickable and post the selected rating (index plus one) to write movie/{movieId} using json.stringify for the body and authorization headers, then display success or error messages.

Learn to update a movie by fetching the latest version from the API after rating, then refresh the UI through a parent state update.

Implement the edit component by adding edit and delete icons, building a movie form, and managing state to edit a selected movie in a React and Django full stack app.

Toggle between movie details and the movie form using a single function and a boolean flag, and implement a responsive tailwind grid layout for a cleaner layout.

Create a movie update form with title and description fields, bind inputs to component state using onChange, and render default values from the edited movie.

Create a class-based API service to handle movie updates, using a static updateMovie method that sends a put request with title and description.

Learn to push UI changes to the backend, handle the JSON response, and update the frontend movie list by replacing the updated item with useEffect, avoiding full refetch.

Add create movie functionality by reusing the movie form for new entries, wiring a create movie action with POST, and ensuring UI re-renders when data changes.

fetch the updated movie list from the database after creating a new movie, pass it through props to the movie list, and manage updates in state to reflect changes.

Learn to delete records in a React and Django full-stack app by wiring a trash icon to a delete API call, updating state with filtering, and handling backend responses.

Learn to refactor a React Django full stack app by moving movie data operations into a dedicated API service, creating fetch and get movie methods, and cleaning components.

Introduce login-based authentication to secure the API and protect existing records, and implement a route-based rendering flow using react-router-dom v6 with createBrowserRouter and RouterProvider.

Enable user login by building a username and password form, posting credentials to the authentication API endpoint, and capturing the returned token for session management.

Learn how to manage a token across a React and Django full-stack app using context providers and useContext, creating a token context, provider, and shared state for secure, centralized access.

Store the user token in cookies using react-cookie and a cookie provider, then read and navigate to the movies page based on that token to stay logged in.

Apply a dynamic token stored in cookies to gate access to movies, redirect unauthenticated users, and pass the token to api methods across components.

Add user registration to a React and Django app by reusing the login form, toggling between login and register, posting to api/users, and storing the token for login and redirect.

Learn practical styling techniques for a React and Django full stack app, including global wrappers, reusable components, CSS and Tailwind approaches, responsive grids, and disabled button states.

Add a sign-out icon as a logout button, attach an onclick handler to delete the auth token cookie, and navigate back to the login screen after logging out.

Build a reusable React hook use fetch to centralize API calls with token handling via cookies, returning data, loading, and error states.

Develop and refine a custom use fetch hook to load movie data, manage loading and error states with use effect, and handle try-catch-finally logic for robust data fetching.

Explore how React Native enables cross-platform mobile apps with one JavaScript codebase that compiles to native Android and iOS, backed by Facebook and a production-ready, active community.

Explore how to start a React Native app with Expo, test in Snack, and compare Expo quick setup with ejecting to a full native workflow.

Run your React Native app on iOS and Android using emulators and simulators, set up Xcode on macOS, Android Studio, and virtual devices, and preview via QR code.

Explore the project files for the React Native app, switch builds (Android), view logs, and review key files like package.json, App.js, assets, and React Native components.

Learn how to reuse React logic in React Native by building components and views, passing props, and managing state with hooks like useState.

Create a shared React Native style sheet with StyleSheet.create, define style objects like home, apply via style={styles.home}, and use camelCase properties, numeric pixel values, and quotes for non-numeric values.

Explore how flex layouts organize content in React Native, mirroring CSS flexbox. Learn to set flex values, control direction (row or column), and align or justify content for responsive layouts.

Learn to handle user input in React Native with a text input bound to state, updating on change, and a button that shows an alert with the entered name.

Learn to display lists using scroll view and flat list with a data array, keys, and renderItem; note when to use section list for headings.

Learn how to display images in a React Native app by importing assets, using the Image component with require, styling size and layout, and using background image or internet images.

Learn to implement platform-specific code in React Native using OS checks, render content for iOS and Android, and load platform-specific components like home.android.js and home.ios.js.

Replace the app icon and splash image in assets and update app.json for splash settings. Learn how expo handles icons and splash across devices and production builds.

Learn to implement multi-screen navigation in React Native by installing react-navigation, react-navigation-stack, and react-native-gesture-handler, configuring a stack navigator with home and detail screens, and using navigation options for titles.

Set up Google and Apple developer accounts to publish your app, including signing certificates and production ready packaging. Use Expo build to generate the Android APK.

Eject an expo project to a bare React Native setup, creating iOS and Android folders and gaining native control; choose bare or expo kit and lose expo features.

Initialize a new Expo React Native project, set up a movie list component, and fetch movie data from a server to render a dynamic list.

Fetch movie data from a Django backend using useEffect and useState in a React Native functional component, supplying an authorization token and rendering results in a flat list.

Improve the React Native list by adding a keyExtractor for unique keys and styling items in a readable, padded view with a dark background and logo.

Enable navigation in the app, make the movie list clickable, and route to a detail screen by configuring a stack navigator, app container, and passing props to the detail view.

Learn to enable item clicks in a react native list by wrapping items in touchable opacity, navigate to a details screen, and pass movie data as params to render title.

Display movie details in a React Native app by using Font Awesome stars for ratings, color coded by average rating, and showing the rating count from the API.

Style the details view by configuring a container, padding, and a themed top bar using navigation options. Adjust the header color, title, and font to reflect the current movie.

Add a top bar edit button and create an edit component to modify movies, passing the selected movie through navigation props and rendering an edit form.

Create an edit form for movie title and description in a React Native app, using text inputs, useState for state, placeholders, and a save button that returns to the screen.

Use the put method to update a movie by sending a json payload to api/movies/{id} with content type application/json, then navigate back to the details view with the updated data.

Fetch data from localhost and diagnose network issues by running the server on a local IP and port, then update allowed hosts to enable mobile devices to access the API.

Rate UI lets users rate a movie by tapping five stars, updating a highlight state, and submitting the rating via an API request.

Select a star rating from 1 to 5, post to movies/{movie_id}/rate with the token and stars, and display the response in an alert. Handle errors with an alert.

Reuse the edit screen to create a new movie by adding a button, passing title and description, posting when there is no ID, then return to the movie list.

Learn to implement a delete movie feature: add a delete button, pass the movie via screen props, and call a delete API with fetch using the movie id.

Create a login UI by adding an authentication component with username and password fields, retrieve a dynamic token on login, and navigate to the movie list after success.

Demonstrates authenticating a login via api, saving the token with async storage, and navigating to the movie list in a react and django full stack app.

Retrieve a token from async storage, use it to fetch data with a get movies function, and pass the token through navigation props to update the movies list and details.

Add a register flow to the existing login, using username and password, with a toggle switch via clickable text and an api/users endpoint for registration, then return to login.

Deploy your API on PythonAnywhere after Heroku's pricing changes. Create a beginner account, move your code, and configure a web app with a virtual environment and Django stack.

Configure the virtual environment and wsgi for the django app, run migrations to set up the mysql database, collect static files, and deploy on pythonanywhere.

deploy your front-end for free using firebase hosting on the spark plan, then create a firebase project and deploy via the firebase cli.

Build a production-ready React app with npm run build to produce a build folder and index.html, then deploy on Firebase hosting with single-page app rewrites.

Learn the basics of React and Django and understand how they power a real life full stack web app, preparing you to start your own application.