Next.js 15 & Firebase from Udemy

Take your web development skills to the next level. In this course we’ll build Fire Homes, a fully functional real estate application for a fictional real estate agency. By combining the power of Next.js 15 and Firebase, you’ll gain real-world experience building modern, scalable applications with cutting-edge tools.

This course covers everything you need to know to build a professional grade app, including authentication, cloud storage, and a Firestore powered database.

What You’ll Build:

A complete real estate app packed with the following features:

User Roles: Support for admin and non-admin users, with role-specific functionality.
Authentication: Log in or register using email/password or Google authentication.
Admin Dashboard: Manage property listings (add, delete, and update) through an intuitive interface.
Cloud Storage: Upload and manage property images with Firebase Cloud Storage.
Firestore Database: Store and retrieve property data.
Property Search: Help users find their perfect home with search functionality.
Favorites: Allow non-admin users to save and manage their favorite properties.

What You’ll Learn:

Next.js 15: Build modern web applications with the latest App Router.
TypeScript: Write clean, maintainable, and error-resistant code.
Zod for Validation: Ensure data integrity with powerful validation tools.
Next.js Server Actions: Simplify server-side functionality with cutting-edge features.
Firebase Integration:
- Firestore: Use Firestore to store and retrieve data.
- Authentication: Securely log in users using Firebase Auth.
- Cloud Storage: Handle image uploads and organization seamlessly.
Role-Based Access Control: Implement robust user management with tailored functionality for admins and regular users.
CRUD Operations: Create, read, update, and delete property listings in Firestore.
User-Focused Features: Add search and favorites for an engaging user experience.

Who Is This Course For?

Aspiring Developers: Learn to build your first full-stack app with Next.js and Firebase.
Intermediate Web Developers: Gain deeper knowledge of scalable app development.
Career Switchers: Build a portfolio project that demonstrates modern web development skills.

Why Enroll in This Course?

This course isn’t just about coding - it’s about understanding the thought process behind building scalable, efficient apps. By the end of the course, you’ll have a production-ready app and the confidence to tackle your own projects.

Tools You’ll Use:

Next.js 15 (App Router)
TypeScript
Zod
Firestore Database
Firebase Authentication & Cloud Storage

What's inside

Learning objectives

Increase your value and improve your knowledge as a web developer
Implement secure authentication with firebase auth
Build and manage databases with firebase firestore

Store and manage files with firebase cloud storage
Master the integration of typescript, shadcn/ui, tailwind css, zod, and react hook form to build robust, type-safe, and user-friendly applications
Protect specific routes to ensure that only authenticated users have access to certain parts of their application

Increase your value and improve your knowledge as a web developer
Implement secure authentication with firebase auth
Build and manage databases with firebase firestore
Store and manage files with firebase cloud storage
Master the integration of typescript, shadcn/ui, tailwind css, zod, and react hook form to build robust, type-safe, and user-friendly applications
Protect specific routes to ensure that only authenticated users have access to certain parts of their application

Syllabus

Introduction & Setup

Introduction

Important! Please read this before you start the course! (GitHub repo etc)

Udemy ratings and reviews

How this setup differs from traditional React + Firebase apps

Overview of stack + helpful tools for this course

Set up Next JS project

Set up Firebase project

Connect Next JS to Firebase

Build the Login with Google functionality

Add the navbar with auth links

Install shadcn ui and add login with Google

Create auth context and display logged in user

Add logout functionality

Improve navbar styling

Improve login page styling

Add the current user dropdown to the navbar

Build the admin functionality and dashboard

Add the admin role to a user and save auth tokens in cookies

Conditionally render user profile menu items

Add the admin dashboard page + route protection with Next JS middleware

Build the admin dashboard main page

Create the New Property page

Create the new property form schema

Create PropertyForm component and start building form UI

Finish rendering the PropertyForm fields

Create the saveNewProperty server action and save data to firestore

Improve the UI when submitting the new property form

Query for properties data

Render the properties list in a table

Calculate the total pages for a firestore query

Render the pagination buttons under the properties table

Create the edit property page

Create the edit property form

Create the updateProperty server action

Add route protection for all admin-dashboard routes and auth pages

Improve the styling of the properties table

Build the image uploads functionality

Create the image uploader component

Store selected images in the form state

Render the images list

Implement reorder and delete images

Implement upload images to firebase storage for new properties

Load existing uploaded images into the edit property form

Implement upload + delete images when updating a property

Build the property preview pages

Create the property page and render the description as markdown

Render the property details

Render the property images carousel and back button

Build the property search page and functionality

Create the property search page and search filters

Hook up the search filters to the URL and create firestore indexes

Render the filtered property list

Add the pagination buttons for property search

Build the login and register with email + password functionality

Create the register form schema

Render the register form UI

Create the register user server action

Build the login with email and password form

Improve validation and errors for login and register

Update the middleware to cater for expiring auth tokens

Build the favourites functionality

Add the my-favourites page and toggle favourite button

Implement the add to favourites functionality

Implement the remove from favourites functionality

Implement parallel and intercepting routes for login modal

Render the login form in the login modal

Query for the list of favourites

Render the list of favourites in the my-favourites page

Implement the favourites table pagination and remove favourite

Build the my account section

Add the account page and render user details

Implement change password form

Implement delete account functionality

Delete user favourites on account deletion

Implement forgot password functionality

Extras

Enable caching for property pages

Add loading states to app

Deploy to vercel

BONUS!

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Covers Next.js 15, TypeScript, and Firebase, which are highly sought-after technologies in modern web development, making it relevant for developers looking to upskill

Teaches role-based access control, which is essential for building secure and scalable web applications with different user permissions and functionalities

Employs Zod for validation and React Hook Form, which are useful for ensuring data integrity and building user-friendly forms in React applications

Requires learners to use Firebase for authentication, database management, and cloud storage, which may require a separate account and incur costs depending on usage

Focuses on Next.js 15 and its App Router, so learners should be aware that this is a relatively new technology and may require additional learning resources

Uses shadcn/ui and Tailwind CSS, which may require learners to familiarize themselves with these specific UI libraries and CSS frameworks if they haven't already

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js 15 & Firebase with these activities:

Review React Fundamentals

Show steps

Solidify your understanding of React fundamentals, as Next.js builds upon React. Refreshing your knowledge of React components, state management, and JSX will make learning Next.js easier.

Browse courses on React

Show steps

Review React documentation on components and props.
Practice building simple React applications.
Review React Hooks like useState and useEffect.

Brush Up on TypeScript

Show steps

Strengthen your TypeScript skills before diving into the course. This course uses TypeScript extensively, so a solid understanding of types, interfaces, and generics will be beneficial.

Browse courses on TypeScript

Show steps

Review TypeScript's basic types and syntax.
Practice defining interfaces and types.
Explore advanced TypeScript features like generics.

Read "Effective TypeScript"

Show steps

Deepen your understanding of TypeScript best practices. This book will help you write more maintainable and error-resistant code, which is essential for building robust Next.js applications.

View Effective Typescript on Amazon

Show steps

Read the book cover to cover.
Implement the techniques in your own projects.
Refer back to the book as needed.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Build a Simple CRUD App with Next.js and Firebase

Show steps

Apply what you're learning in the course by building a small CRUD application. This will give you hands-on experience with Next.js, Firebase, and the technologies covered in the course.

Browse courses on Next.js

Show steps

Set up a new Next.js project with Firebase integration.
Design a simple data model and create Firestore collections.
Implement CRUD operations using Next.js server actions and Firebase.
Deploy your application to Vercel.

Write a Blog Post on a Next.js 15 Feature

Show steps

Solidify your understanding of a specific Next.js 15 feature by writing a blog post about it. This will force you to research the feature in depth and explain it clearly to others.

Show steps

Choose a Next.js 15 feature that interests you.
Research the feature thoroughly and understand its use cases.
Write a clear and concise blog post explaining the feature.
Include code examples and screenshots to illustrate your points.

Contribute to a Next.js or Firebase Open Source Project

Show steps

Deepen your understanding of Next.js and Firebase by contributing to an open-source project. This will expose you to real-world codebases and collaboration workflows.

Browse courses on Next.js

Show steps

Find a Next.js or Firebase open-source project on GitHub.
Identify a bug or feature that you can contribute to.
Submit a pull request with your changes.
Respond to feedback from the project maintainers.

Read "Fullstack React with TypeScript"

Show steps

Expand your knowledge of full-stack development with React and TypeScript. This book will provide you with a deeper understanding of how to build complete applications from front to back.

View Putting Knowledge to Work on Amazon

Show steps

Read the book cover to cover.
Implement the techniques in your own projects.
Refer back to the book as needed.

Career center

Learners who complete Next.js 15 & Firebase will develop knowledge and skills that may be useful to these careers:

Full-Stack Developer

A Full Stack Developer handles both the frontend and backend of web applications, and this course is well aligned with that role. By learning Next.js 15, Firebase, and TypeScript, you'll have crucial skills for both client-side and server-side development. The course specifically teaches database management with Firestore, user authentication, and cloud storage using Firebase, all essential for building a full stack web application. A Full Stack Developer will also benefit from learning how to implement role-based access control; the course's project provides a practical example of building a large, scalable application.

See salaries and explore the career path for Full-Stack Developer

Web Developer

A Web Developer builds websites and web applications, and the skills taught in this course directly apply to this career field. Through building a real estate application using Next.js 15 and Firebase, this course provides practical expertise in modern web development. A Web Developer will learn how to handle user authentication, database management, and cloud storage using these cutting-edge tools. The course also covers important topics such as server actions, role-based access control, and user-focused features like search and favorites. The practical experience gained in this course will allow a Web Developer to thrive in the field.

See salaries and explore the career path for Web Developer

Web Application Developer

A Web Application Developer creates interactive, functional applications for the web, and this course provides the perfect foundation. This course uses Next.js 15 and Firebase, two technologies at the forefront of modern web development, and gives instruction on building a complete real estate application. A Web Application Developer will learn how to handle user authentication with Firebase Auth, how to manage databases with Firestore, and how to use cloud storage effectively. The course also demonstrates how to implement features like search functionality and user favorites, which are common in many web applications, so a Web Application Developer will be well-prepared for the field.

See salaries and explore the career path for Web Application Developer

Frontend Developer

A Frontend Developer builds the user-facing parts of websites and applications, focusing on user interface and user experience. This course, with its focus on Next.js 15, TypeScript, and user interface components using shadcn/ui, helps a Frontend Developer build modern web applications, which is a critical skill in the field. The course's coverage of building a real estate application, including features like property search, user authentication, and favorites, provides practical experience directly relevant to the work of a Frontend Developer. Furthermore, mastering the use of form validation with Zod further allows the Frontend Developer to build robust applications.

See salaries and explore the career path for Frontend Developer

Application Developer

An Application Developer builds software applications, and this course allows the Application Developer to extend their abilities by adding web application development skills. The course’s emphasis on building a fully functional real estate application using Next.js 15 and Firebase provides practical experience. An Application Developer can learn how to manage authentication, data storage, and cloud services; they will also learn how to implement features such as role-based access control. Furthermore, an understanding of user interface development and data validation, as this course provides, will allow them to build robust and user-friendly applications.

See salaries and explore the career path for Application Developer

Cloud Application Developer

A Cloud Application Developer builds and deploys applications on cloud platforms. This course helps the Cloud Application Developer learn to leverage the power of Firebase. The course provides instruction on using Firebase's Firestore database, cloud storage, and authentication services, all essential for cloud-based applications. A Cloud Application Developer will benefit from hands-on experience with building a complete real estate application, which demonstrates how to integrate these services for a robust and scalable solution. In particular, expertise in setting up server actions for saving data, as this course teaches, is crucial when designing a backend for cloud-based applications.

See salaries and explore the career path for Cloud Application Developer

UI Engineer

A UI Engineer focuses on the user interface and user experience of applications, and this course aligns with that role. The course teaches how to build a feature-rich real estate app, covering topics including user interface design. By working with Next.js 15 and React libraries like shadcn/ui, a UI Engineer will be well-versed in the latest tools and techniques for modern web development. The incorporation of TypeScript and Zod for validation will also help build applications that are easy to maintain. The course's focus on creating engaging user experiences, such as implementing search functionality and favorites, is directly relevant to the work of a UI Engineer.

See salaries and explore the career path for UI Engineer

Software Engineer

A Software Engineer designs and develops software systems. This course can help a Software Engineer by providing modern web development skills. The course's use of Next.js 15 and TypeScript builds a foundation for understanding the architecture of real-world applications. Learning how to implement features like user authentication, database handling, and cloud storage, as the course teaches, can allow the Software Engineer to design and implement robust software systems. The course's comprehensive approach, including routing, role-based access control, and user interface design, directly translates to the daily work of a Software Engineer.

See salaries and explore the career path for Software Engineer

Software Developer

A Software Developer creates software solutions and this course may be useful to a Software Developer. Learning modern web development tools like Next.js 15, TypeScript, and Firebase can enable a Software Developer to build complex, scalable applications. The course provides practical experience in building a real-world application, specifically a real estate app with user authentication, database management, and cloud storage. The Software Developer will also gain skills in server actions, data validation with Zod, and creating a user interface. All of these aspects help a Software Developer to understand modern web development.

See salaries and explore the career path for Software Developer

Solutions Architect

A Solutions Architect designs and implements technical solutions for complex business problems, and this course may be helpful to that career. Although this course goes into the code itself, it provides deep insight into the technologies used to create modern, scalable web applications. A Solutions Architect can use the course's lessons in Next.js 15, Firebase, and TypeScript to understand the technical underpinnings of such applications. Understanding the capabilities of these technologies, specifically how they are used in real-world scenarios such as authentication, cloud storage, and database management, allows a Solutions Architect to make more informed decisions when designing technical solutions. The real estate app provides concrete experience with a complex application system.

See salaries and explore the career path for Solutions Architect

Technology Consultant

A Technology Consultant advises clients on how to use technology to meet their business goals, and this course may be helpful to that career path. While this course is technical, the depth of its exploration into Next.js 15 and Firebase, among other cutting-edge web development tools, will allow a Technology Consultant to better advise clients. The hands-on experience creating a real estate application, which covers authentication, database management, and cloud storage, will provide valuable insight into how these systems work. A Technology Consultant will find that the course's syllabus will give them a solid understanding of the practical side of web development.

See salaries and explore the career path for Technology Consultant

Database Administrator

A Database Administrator manages and maintains databases, and this course may be useful to that role. This course specifically teaches Firebase Firestore, a popular database solution. A Database Administrator can use this course to gain practical experience with modern database management, including how to store, retrieve, and structure data. While the course also covers aspects outside of database administration, understanding how database functionality works in the context of a real application can allow a Database Administrator to gain useful insights. In particular, lessons in data validation with Zod can be helpful in understanding best practices in data management.

See salaries and explore the career path for Database Administrator

IT Project Manager

An IT Project Manager oversees the planning, implementation, and tracking of IT projects, and this course may be of use to this career. The detailed course on building a fully functional real estate app with Next.js 15, Firebase, and other technologies allows the IT Project Manager to gain a better understanding of what's involved when managing a web application development project. While the IT Project Manager may not be involved in the coding itself, they can apply concepts of user interface design, database management, and authentication, among others, to better track milestones and deliverables for their projects. The course's comprehensive approach, from project setup to deployment, mirrors the lifecycle of an IT project.

See salaries and explore the career path for IT Project Manager

Technical Trainer

A Technical Trainer teaches technical skills to others, and this course may be useful. The course’s in-depth practical approach using modern technologies like Next.js 15, TypeScript, and Firebase provides a strong foundation for someone who wants to teach others about web development. This course also teaches how to build a real estate application, which gives a very good example of web application development. A Technical Trainer’s ability to understand the process can help them in their training delivery, as well as preparing training materials for others to also learn the same skills.

See salaries and explore the career path for Technical Trainer

UX Designer

A UX Designer focuses on user experience and user interface design, and this course may provide some benefit. While this course focuses primarily on developing a fully functioning app, it also touches on crucial aspects of user experience. The real estate application provides experience in developing user interfaces that are engaging for users. When building the search functionality or the login process, a UX Designer will learn about user flows. While the course is not solely focused on UX, this may provide some useful background knowledge for a UX Designer.

See salaries and explore the career path for UX Designer

Next.js 15 & Firebase

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses