Building Interactive Websites With Next Js, React, Leaflet

Build real estate marketplace and customer feedback analytics websites using Javascript, Next JS, React, and Leaflet JS

What you'll learn

Learn the basic fundamentals of Next JS, such as getting to know its use cases, technical limitations, and main features

Learn how to build real estate marketplace website using Next JS, React, and Leaflet JS

Learn how to build customer feedback analytics website using Next JS and React

Learn how to create state management and property data structure

Learn how to create tab navigation and layout structure

Learn how to create and integrate interactive map using Leaflet

Learn how to create mortgage calculator

Learn how to build property search filter

Learn how to create property listing form

Learn how to create customer feedback analytics page layout

Learn how to create text input form

Learn how to create function for performing sentiment analysis

Learn how to create functions for uploading data and parsing CSV file

Learn how to visualise sentiment analysis data using pie chart

Learn how to conduct functional and performance testing

Requirements

No previous experience in Next JS is required

Basic knowledge in Javascript and web development

Description

Welcome to Building Interactive Websites with Next JS, React, Leaflet course. This is a comprehensive project based course where you will learn how to build real estate marketplace and customer feedback analytics websites using Javascript, HTML, and CSS. This course is a perfect combination between web development and web design, making it an ideal opportunity to practice your programming skills while improving your technical knowledge in Javascript. In the introduction session, you will learn the basic fundamentals of Next JS, such as getting to know its use cases, technical limitations, and main features. Then, in the next section, we will start the first project. We are going to build a real estate marketplace website using Next JS and Leaflet JS, This website will have three main features. The first feature is an interactive map that displays property listings using Leaflet JS, where each property is represented by a clickable marker showing detailed information such as price, address, number of bedrooms and bathrooms, property type, and contact details, all rendered dynamically with React. The second feature is a built in mortgage calculator developed with plain JavaScript that allows users to input their income and loan terms to estimate the maximum property price they can afford, along with a clear breakdown of monthly payments including mortgage principal, taxes, and insurance. The third feature is a user friendly property listing form created using React and HTML, where users will be able to submit new property listings by entering details like location, price, property type, and contact information, then it will be instantly added to the map without reloading the page. Afterward, in the second project, we are going to build a customer feedback analytics website using Next JS. This website will also have three main features. The first feature allows users to manually type in a customer feedback through a simple text input form, once submitted, the system will process the text and instantly determine whether the sentiment is positive, negative, or neutral, using a sentiment analysis function facilitated by Javascript library. The second feature enables users to upload a CSV file containing multiple customer feedbacks, where the system will automatically analyze each feedback, assign sentiment labels, and display the results in a well structured format with clear summaries and visual highlights. The third feature presents a dynamic pie chart, built using a charting library, that visualizes the proportion of positive, negative, and neutral feedback, helping users quickly interpret the overall sentiment trends across all analyzed customer data. Lastly at the end of the course, we will conduct testing to make sure the websites are fully functioning and all logics have been implemented correctly, we will be focusing on two testing objectives, performance testing and functional testing.Firstly, before getting into the course, we need to ask these questions to ourselves, why should we build websites using Next JS and React? Well, here is my answer. Next JS and React provide strong foundations for building fast, interactive, and modern web applications with clean code structure and strong developer support. By using these technologies, you can take advantage of features like automatic routing, reusable components, and seamless client side interactions, which make development more efficient. Most importantly, they allow you to deliver a smoother user experience, which is essential when building websites that involve real time interaction and dynamic content like maps and data visualization.Below are things that you can expect to learn from this course:Learn the basic fundamentals of Next JS, such as getting to know its use cases, technical limitations, and main featuresLearn how to build real estate marketplace website using Next JS, React, and Leaflet JSLearn how to build customer feedback analytics website using Next JS and ReactLearn how to create state management and property data structureLearn how to create tab navigation and layout structureLearn how to create and integrate interactive map using LeafletLearn how to create mortgage calculatorLearn how to build property search filterLearn how to create property listing formLearn how to create customer feedback analytics page layoutLearn how to create text input formLearn how to create function for performing sentiment analysisLearn how to create functions for uploading data and parsing CSV fileLearn how to visualise sentiment analysis data using pie chartLearn how to conduct functional and performance testing

Overview

Section 1: Introduction to the Course

Lecture 1 Introduction

Lecture 2 Table of Contents

Lecture 3 Whom This Course is Intended for?

Section 2: Tools & Resources

Lecture 4 Tools & Resources

Section 3: Introduction to Next JS

Lecture 5 Introduction to Next JS

Section 4: Creating Project Folder & Installing Next JS, React, and Leaflet

Lecture 6 Creating Project Folder & Installing Next JS, React, and Leaflet

Section 5: Creating State Management & Property Data Struture

Lecture 7 Creating State Management & Property Data Struture

Section 6: Creating Tab Navigation & Layout Structure

Lecture 8 Creating Tab Navigation & Layout Structure

Section 7: Creating & Integrating Interactive Map with Leaflet

Lecture 9 Creating & Integrating Interactive Map with Leaflet

Section 8: Creating Mortgage Calculator

Lecture 10 Creating Mortgage Calculator

Section 9: Building Property Search Filter

Lecture 11 Building Property Search Filter

Section 10: Creating Property Listing Form

Lecture 12 Creating Property Listing Form

Section 11: Testing Real Estate Marketplace Website

Lecture 13 Testing Real Estate Marketplace Website

Section 12: Creating Project Folder & Installing Papaparse, Sentiment, and Recharts

Lecture 14 Creating Project Folder & Installing Papaparse, Sentiment, and Recharts

Section 13: Creating Customer Feedback Analytics Page Layout

Lecture 15 Creating Customer Feedback Analytics Page Layout

Section 14: Creating Text Input Form & Sentiment Analysis Feature

Lecture 16 Creating Text Input Form & Sentiment Analysis Feature

Section 15: Creating Function for Performing Sentiment Analysis

Lecture 17 Creating Function for Performing Sentiment Analysis

Section 16: Creating Functions for Uploading Data & Parsing CSV File

Lecture 18 Creating Functions for Uploading Data & Parsing CSV File

Section 17: Displaying Sentiment Analysis Results & Visualizing Data with Pie Chart

Lecture 19 Displaying Sentiment Analysis Results & Visualizing Data with Pie Chart

Section 18: Testing Customer Feedback Analytics Website

Lecture 20 Testing Customer Feedback Analytics Website

Section 19: Conclusion & Summary

Lecture 21 Conclusion & Summary

Web developers who are interested in building interactive websites using Next JS and React,Web designers who are interested in designing visually appealing and user friendly web interface