Full-Stack SaaS Bootcamp 2025: Develop Modern Web Apps

In this lecture, we'll explore the inner workings of a web application project, starting by examining its directory structure and the files contained within. We'll take a guided tour through the project's user interface, stepping through each page from homepage to resume template selection. Along the way, we'll explore the functionality of each section, including form submission, dynamic section addition and removal, and optional photo uploading. By the end of the lecture, students will have a comprehensive understanding of how user input drives the flow of the application, preparing the way for deeper exploration into the underlying source code.

In this lecture, we explore the foundational elements of a web project directory, focusing on the 'Resume (Frontend Only)' subdirectory. We analyze the structure of the HTML files and accompanying assets, including images and JavaScript files. Beginning with the 'index.html' file, we explore the document structure, examining the meta tags, script imports, and favicon declaration. Additionally, we delve into the body content, explain the implementation of Tailwind CSS classes for styling and the utilization of Flexbox for layout alignment. Finally, we inspect the HTML elements within the body, such as headings, hyperlinks, and paragraphs, along with their associated Tailwind CSS classes for styling and positioning. Through this comprehensive analysis, students gain insights into the practical application of HTML, CSS and JavaScript in web development projects.

In this lecture, we build the "Personal Details" form page for the resume builder using HTML and Tailwind CSS. We structure the layout with a responsive design, applying grid-based alignment and spacing to ensure a clean and user-friendly interface. The form includes fields for first name, last name, email, career goal, date of birth and phone number, each styled for consistency and readability. Additionally, we discuss the importance of input types, placeholder text, and height adjustments to maintain uniformity across form elements.

In this lecture, we complete the form section by structuring the gender selection, address input, and image-based submit button using Tailwind CSS for styling and alignment. We also implement a session timeout modal that appears after 5 minutes of user inactivity, ensuring session data consistency. The modal is styled with Tailwind classes and includes a button that triggers a JavaScript function to redirect users to the home page. In the next section, we will explore how session management works and integrate the session timeout functionality with JavaScript.

In this lecture, we explored the implementation of a session timeout modal popup using JavaScript. We covered variable declarations (var, let and const), targeting HTML elements using 'document.getElementById' and managing popup visibility through JavaScript functions. Additionally, we discussed event listeners to reset the session timer and redirect users upon inactivity. With this foundational understanding, we are now ready to analyze the 'education.html' webpage in the next lecture.

In this lecture, we examined the education.html webpage, which captures users' academic details through a structured form. We explored the form elements, including dropdowns, text inputs, and a hidden input field that dynamically tracks multiple education entries. The styling and layout remain consistent with the previous webpage, with only the content and labels changing. In the next lecture, we will continue analyzing the remaining elements and JavaScript functionalities that enhance user interaction.

In this lecture, we explored the interactive elements of the education.html form, including the 'Add More' and 'Remove' buttons that dynamically adjust the form fields using JavaScript. We also examined the form navigation buttons, which allow users to move between pages, ensuring a smooth user experience. Additionally, we reviewed the session timeout modal, which alerts users when their session expires. In the next lecture, we will dive into the JavaScript functionality that controls these dynamic interactions.

In this lecture, we explored the JavaScript implementation for dynamically adding and removing education form sections on the webpage. We covered how the addMore function generates new sections with unique IDs and how the 'removeLast' function deletes the last added section while updating the counter. Additionally, we implemented event listeners to display an extra input field when the 'Others' option is selected in the dropdown. Finally, we tested the functionality to ensure seamless interaction, successfully managing the form's dynamic behavior.

In this lecture, we replicated the design and functionality of the skills details webpage by modifying the education details webpage source code. We structured the page using Tailwind CSS, ensuring proper layout, spacing, and styling of form elements, including skill input fields and dropdowns. Additionally, we implemented the 'Add More' and 'Remove' button functionalities using JavaScript, allowing users to dynamically add or remove skill entries. Finally, we addressed navigation by updating the previous button link and identified the need for backend integration, which we will cover in the upcoming lectures.

In this lecture, we designed the 'Work Experience' webpage by modifying the previously created 'Skills Details' webpage to achieve a similar layout. We introduced a 'Skip' button for users with no work experience and implemented radio button functionality to disable the "End Date" and "Add More" buttons when the user selects "Currently Working Here." Using JavaScript event listeners, we dynamically controlled the enabling and disabling of form elements based on user selections. With this, we successfully completed another webpage and are now ready to move on to the 'Additional Details' form page.

In this lecture, we designed the 'Additional Details' webpage with sections for adding languages and hobbies, utilizing dynamic input fields for users to add multiple entries. We implemented JavaScript functions for the "Add More" and "Remove" buttons to handle adding and removing form sections based on user interaction. Additionally, we covered the 'Photo Upload' webpage, which uses a file input element to allow users to upload their pictures. By the end of this lecture, we've successfully explained the functionality and layout of both webpages and wrapped up the frontend code explanations.

In this lecture, we explored the dynamic functionality of the "Choose Template" webpage, where available templates change based on whether the user has uploaded a photo. We introduced custom CSS to style template preview images, including hover effects and overlays for interactive elements. The templates are displayed in a responsive grid layout, with smooth transitions for image scaling and overlay visibility. By the end of the lecture, we successfully implemented the frontend logic and styling for the template selection process.

In this lecture, you will be provided with the full source code for the frontend, showcasing all the necessary HTML, CSS, and JavaScript implementations.

In this lecture, we will explore the final version of our frontend design, examining its structure, styling, and functionality to ensure a seamless user experience.

In this lecture, we delved into the concept of web sessions, explaining their role in enhancing user experience through personalized and secure interactions. We covered how sessions work, including the use of session cookies and session storage, to maintain continuity and authentication during a user's visit. Additionally, we compared sessions with cookies, highlighting their key differences in storage, function, and duration. By understanding sessions, we gained insight into how modern websites manage user data and improve our browsing experience.

In this lecture, we covered the essential steps to set up our project environment for backend development. We began by installing Python, creating a virtual environment, and activating it to keep project dependencies isolated. After installing Flask, we configured Visual Studio Code to use the correct Python interpreter linked to our virtual environment. With the setup complete, we’re now ready to dive into the backend code in the app.py file and explore its implementation.

In this lecture, we will outline the essential libraries required for the project.

In this lecture, we learned about the essential libraries and configurations needed to build a Flask web app, including Flask itself, session handling, file uploads, and secure functions. We discussed how each library contributes to routing, handling requests, managing user sessions, and storing uploaded files. With this understanding, we are equipped to start developing our Flask application securely and efficiently.

In this lecture, we explored how to manage user sessions in a Flask web app by handling session expiration and storing user data. We demonstrated how to set up dynamic routes that check session data and pass it to templates, ensuring a personalized experience for the user. By using Flask's session handling capabilities, we created functions that load and display user-specific information while maintaining the ability to reset or clear the session when needed.

In this lecture, we learned how to handle both GET and POST requests for the education route in Flask, allowing users to submit and retrieve their education details. We explored how session data can be used to store and retrieve user inputs across different requests, ensuring a smooth user experience when filling out forms. By implementing conditional checks, we ensured that users with expired or missing session data are redirected, while those with valid session data can modify their information.

In this lecture, we explored how to manage the skills route using Flask, handling both GET and POST requests for form submissions. We demonstrated how to capture form data related to educational details, store it in the session, and redirect users if necessary based on session availability. By structuring the education data and storing it in session, we ensured a seamless user experience where users can fill out and update their information dynamically.

In this lecture, we focused on handling the experience route to collect and display work experience details using Flask. We covered how to process form submissions, store the entered data in the session, and ensure the data persists for later access. The lecture also highlighted the use of the enumerate function to iterate over work experience data, providing both index and value for easier rendering in the template.

In this lecture, we explored the view function that allows users to select a template for their resume after completing the previous forms. We discussed how the application handles both GET and POST requests, with a focus on checking if a photo was uploaded and storing it in the session. Based on whether a photo was provided, we demonstrated how different sets of templates are rendered, either with or without photo support, ensuring a dynamic user experience.

In this lecture, we explored the view function responsible for generating the resume after a user selects a template. The function checks if the session is valid, retrieves the selected template, and dynamically renders the corresponding template, either with or without a photo. We also discussed the handling of file uploads and the integration of backend logic with frontend templates, ensuring a personalized and dynamic resume generation experience for the user.

In this lecture, we learned how to integrate the backend logic into the frontend using Jinja template syntax to make the static homepage dynamic. We explored how to use Jinja to dynamically link resources like images and CSS, set dynamic titles for each page, and streamline repetitive HTML code by creating a common base layout. By incorporating Jinja’s features such as variable substitution and block content inheritance, we simplified our form pages and ensured consistency across the application while maintaining flexibility for dynamic content.

In this lecture, we focused on integrating the backend with the frontend for the personal details webpage using Jinja template syntax. We updated image paths, form actions, and input values to dynamically reference backend data, ensuring the correct display of images and user-entered information. Additionally, we applied Jinja's conditional statements and filters to handle form elements, such as pre-filling values and selecting options based on session data, completing the backend integration for this page.

In this lecture, we focused on integrating backend functionality with the frontend in the 'education.html' webpage using Jinja template syntax. We dynamically populated the form with previously entered data, utilized loops for generating course sections, and applied conditional logic to handle form elements such as dropdowns and radio buttons based on user input. Additionally, we incorporated backend-driven JavaScript variables to handle dynamic content and ensure proper form validation, creating a seamless user experience for filling out the education section.

In this lecture, we walk through the final stages of backend integration into the frontend code, covering multiple webpages such as 'additional.html', 'photo.html' and 'choose-template.html'. We apply Jinja template if statements and JavaScript variables to handle dynamic data like languages, hobbies and photo uploads. Additionally, we ensure file upload functionality by adding the 'enctype' attribute to the form tag and properly integrate dynamic content based on user input.

In this lecture, we dive into the detailed explanation of the template code for one of the resume templates provided in the project. We explore how the HTML file integrates external static files such as icons, Bootstrap, Font Awesome, and custom CSS, while highlighting the responsive design features using media queries. Additionally, we discuss how the container classes and padding adjustments enhance the layout's flexibility, ensuring a smooth user experience across various screen sizes.

In this lecture, we explore the styling of the '.profile-box' class, focusing on its width, margin, and layered box shadow properties to create a visually appealing depth effect. We also cover the use of Bootstrap’s grid system to structure content, particularly the row and col classes, and the inclusion of a background image using Jinja template syntax. Additionally, we discuss the use of custom classes like 'detail-px' and 'no-padding' to adjust padding and layout for a more refined and responsive design.

In this lecture, we focus on the styling and layout of elements inside the '.profile-box' class, particularly the 'detail-px' class, which applies padding and adjusts its properties for different screen sizes using media queries. We also cover the Jinja template syntax for displaying user data, such as the "About" and "Education Details" sections, with conditional statements to check for the existence of data before rendering. Additionally, we explain the use of flexbox to present education data items in a horizontal layout, along with specific styling for individual elements like the session information.

In this lecture, we focus on styling the education details section using Jinja template syntax to dynamically display the user's course, university, institute, and marks obtained. We also explore how to style other sections such as certifications, work experience, and skills, applying layout techniques like floating list items and padding. Additionally, we cover how to display and style the user's photo in the profile section, with conditional rendering based on the existence of the 'photo_path' key in the session object, including custom CSS for the image appearance.

In this lecture, we discuss dynamic profile image rendering using Jinja, where default images are displayed based on the user's gender if no photo is uploaded. We also explore the styling of personal details such as the user's name and contacts, ensuring consistency across different screen sizes using responsive CSS. Finally, we demonstrate how to add a "Download as PDF" button with custom styling and functionality to allow users to download the webpage content as a PDF.

In this lecture, you will receive the complete backend source code, demonstrating all the essential frontend integrations and implementations.

In this lecture, we walk through running the project on a local server and filling out the form webpages using sample Resumé data, ensuring that session functionality preserves previously entered information. We demonstrate the process of uploading a photo, selecting a Resumé template, and downloading the generated resume as a PDF. Additionally, we cover how to generate a normal resume when no photo is uploaded and adjust the layout for a professional appearance before downloading.

In this lecture, we dive into transforming our standalone web application into a SaaS product by integrating user authentication with a pre-built SaaS template. We explore how to customize the homepage, sign-up and sign-in pages, as well as the dynamic behavior of the navigation menu based on authentication status. Additionally, we walk through modifying key sections such as the features, pricing, and support areas to fit the needs of our resume builder project.

In this lecture, we will explore the backend integration of the sign-up and sign-in pages, focusing on the key functionality of form submission and error handling. You'll learn how the POST method securely sends form data to the server and how JavaScript and Jinja syntax manage success and error messages. By the end of this lecture, you will have a solid understanding of how the frontend forms interact with the backend for user authentication.

In this lecture, we’ll dive into the backend code that handles user registration and login processes, covering key components like database management, password hashing, and JWT authentication. We’ll explore how Flask, SQLAlchemy, bcrypt, and JWT work together to securely manage user credentials and sessions. By the end of this lecture, you will understand how these modules integrate to power the user authentication system of our SaaS application.

In this lecture, we will explore the key backend functions responsible for user authentication, including JWT creation, verification, and session management. We’ll cover how to securely generate and verify authentication tokens, as well as how middleware is used to enforce authentication across protected routes. By the end of this lecture, you will understand how to manage secure user sessions and ensure that only authenticated users can access specific resources in the application.

In this lecture, we’ll explore the backend functionality that powers the sign-in process and the home page of the web application. We will walk through how user authentication is handled, including verifying JWT tokens, managing cookies and ensuring secure redirection for logged-in users. By the end of the lecture, you will understand how to securely authenticate users, manage session tokens and maintain a smooth, secure user experience across the application.

In this lecture, we’ll cover the implementation of user registration, sign-in and sign-out functionality within a Flask web application. We’ll walk through the process of handling form submissions, validating input, checking for existing users, and securely storing user data in the database. By the end of the lecture, you’ll understand how to enable users to create accounts, log in and log out securely, as well as how to integrate authentication checks into templates using Flask context processors.

In this lecture, we will integrate a contact form into our website using Web3Forms to handle form submissions without the need for a custom backend. You will learn how to set up Web3Forms, configure the form to send data to their API, and override the default form submission behavior using JavaScript to prevent page redirection. By the end of this session, you will understand how to send form data securely to an external service, provide real-time feedback to users and maintain a smooth user experience without navigating away from your site.

In this lecture, we will explore how the "Sign Out" button is integrated into the application, positioned at the top-right corner of the page using Tailwind CSS for styling. You'll learn how we dynamically generate the sign-out URL using Flask's url_for function and how we use JavaScript to hide both the "Download as PDF" and "Sign Out" buttons during the PDF generation process. By the end of the session, you'll understand the importance of user interaction in maintaining a smooth UI experience and learn the techniques for enhancing it in a web application.

In this lecture, we will cover how to install the necessary libraries in your virtual environment to resolve any missing dependencies. You'll learn how to activate the virtual environment and use the pip command to install libraries like bcrypt, pyjwt and flask-sqlalchemy. By the end, you'll understand how to check your installed libraries and ensure that your environment is properly set up for the project.

In this lecture, we will outline the essential libraries required for the project.

In this lecture, we will present the updated source code, which includes the integration of the database and the user authentication system.

In this lecture, we will demonstrate the execution of our authentication-based project on a local server. We will walk through the login and registration process to ensure secure user access. This will help validate the functionality before deploying it online.

In this lecture, we will explore the process of hosting our Python-based project online to make it globally accessible. We will discuss the concept of hosting, the importance of selecting a Python-compatible hosting provider and why PythonAnywhere is a great choice for our project. You'll learn about the features that make PythonAnywhere a suitable platform, such as its free tier, pre-configured environment and seamless deployment for Python-based web applications.

In this lecture, we will guide you through the process of deploying your Python project to PythonAnywhere and making it accessible online. You'll learn how to create a free account, set up a web app, upload your project, and configure the necessary settings for deployment. By the end of the lecture, you'll have successfully hosted your web application and made it live on the internet.

In this lecture, we will walk you through the process of executing and deploying the final project on an online server, ensuring seamless functionality in a live environment.

In this lecture, we will share the complete source code which we have deployed on the online server.

In this final lecture, we will review everything we’ve learned throughout the course, from understanding SaaS and frontend development to backend integration and security. We will also cover how to make our project live on a server, ensuring it’s accessible online and highlight key concepts and tools used during the development process. By the end of this session, you’ll have a clear understanding of how all the components come together in building a fully functional SaaS web application.