Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Make A Pizza Website with Next.js Frontend & Django Backend
Rating: 4.5 out of 5(28 ratings)
166 students

Make A Pizza Website with Next.js Frontend & Django Backend

Learn to work with React frontend framework Next.js, while combining it with the Python framework Django via a REST API.
Created byShane Keenan
Last updated 3/2021
English

What you'll learn

  • Learn how to use Nextjs (React framework)
  • Working with getStaticPaths & getStaticProps
  • Understanding pages and file structures within Nextjs
  • Getting API data
  • Users will also learn Python's Django framework
  • Creating an API with the Django REST Framework
  • Both frontend and backend will be deployed with Heroku and Vercel
  • PostgreSQL will also be taught as this is the database we will use

Course content

1 section • 15 lectures • 2h 57m total length

  • Overview3:47

    This is an overview showing what we will be making with both Next.js for the frontend and Django for the backend and detailing what will be learned throughout the series.

  • Part 1 / Pages & Navbar12:11

    Part 1 we work on starting the navbar along with a quick explanation of how to create new pages in Next.js.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 2 / Flaticon, Google Fonts & Navbar Finished14:00

    Part 2 sees us finishing the navbar, as well as integrating Google Fonts and using an image for our brand and favicon from Flaticon.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 3 / About & Layout10:59

    Part 3 completes the about section with its CSS along with demonstrating how the Layout component can be used.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 4 / Home Page & Unsplash16:13

    Part 4 is where we create placeholder data which we will eventually replace with our API data. We also work on the home page and bring the data out onto the page, working with the CSS.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 5 / Search Box & Home Finished14:10

    Part 5 continues and finalizes the home page, wrapping up the CSS as well as making the search box functional, including a ternary operation.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 6 / Details Page, getStaticPath & getStaticProps15:06

    Part 6 has us get the details page up and running, work with getStaticPaths for the dynamic page routing along with getStaticProps to pass on our data.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 7 / Details CSS9:52

    Part 7 has us finishing off the details page with some CSS.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 8 / Deploying With Vercel7:09

    Part 8 is a quick one, showing us how we can get our website deployed conveniently with Vercel and GitHub.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 9 / Getting Django Up & Running8:16

    Part 9 has us making a virtual environment, creating some dependencies and getting Django up and running with starting both project and app.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 10 / PostgreSQL & Models16:37

    Part 10 we get our database up and running with PostgreSQL, set up our models and then migrate our changes into our now working database.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 11 / Django REST Framework & Fetch Data18:27

    Part 11 has us create an API with the Django REST framework. We then replace all of our old hard-coded data with fetch requests from this new API.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 12 / Deploying Django to Heroku15:23

    Part 12 we deploy our Django API onto the platform Heroku, stepping through the process in order to get it up and running for our Next.js to fetch from.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Part 13 / Moving Localhost Data to Heroku Database13:14

    Part 13 shows us how to move our pizza data from our localhost into our Heroku PostgreSQL database, and that concludes our project! See you in the conclusion.

    GitHub: https://github.com/SWKeenan/my_pizza_website

    GitHub: https://github.com/SWKeenan/my_pizza_website_back

  • Conclusion1:52

    Conclusion - Congratulations guys you made the project, proud of you! In this we quickly go over everything that we covered in the project, with a quick chat from me about what else you can find from me and what you can expect in the future.

    My Book:

    USA - https://www.amazon.com/gp/product/B08ZBMR868

    UK - https://www.amazon.co.uk/gp/product/B08ZBMR868

    My Next.js Covid19 Tutorial:

    https://www.udemy.com/course/rank-map-chart-covid19-countries-with-nextjs/learn/

Requirements

  • No requirements. Ideally it will help a little if you know some vanilla React or some Django however.

Description

Students will learn how to use Nextjs (React framework), including working with getStaticPaths, getStaticProps, pages, the layout component as well as using the app file for propagating data to different pages, file structures, deploy our website to Vercel and getting API data.

Users will also gain knowledge on Python's Django framework, learning how to make an API with the Django REST Framework, work with serializers, viewsets, models and deploy this created API to Heroku, which will then be received in Nextjs.

We will also understand how to use PostgreSQL which will include creating new servers in both Heroku and on the localhost, creating data locally but also pushing this data from the localhost to the deployed Heroku website.

We will also utilize some CSS in order to style and layout the page in a nice, clean and presentable manner.

While this tutorial is for a pizza website, I would strongly advise that people who are following along try to change it into something they prefer, like shoes, toys, anime, cars - anything - as it will help cement their learning, and fundamentally this is to get a better understanding of working with Nextjs, Django & PostgreSQL and the data itself is inconsequential.

If you have any further questions, or need any assistance during the course, please don't hesitate to contact me or drop me an email and I will get back to you at the earliest convenience.

Who this course is for:

  • Beginner and pre-intermediate Python and React developers. Perhaps you know vanilla React but you are not familiar with Nextjs or you know React but you need to brush up on Django.

Report abuse