Slide 1 ----------- Part 1: Welcome to your exciting journey into the world of full-stack development! Whether you've dabbled in coding or are just curious about how websites work, you're in the right place. This course is designed to turn you from a complete beginner into a confident full-stack developer skilled in crafting modern web applications using NodeJS and React. Slide 2 ----------- Part 1: Let's quickly meet the person who developed this course, Associate Professor Tomas Trescak. Part 2: Tomas is a passionate developer who programs in over 20 different languages and contributes to the open source scene, mainly in Python and Javascript world. Part 3: He worked for 12 years in the industry in various roles in software development, most recently working as software architect for large ERP systems and their integration to B2B and B2C portals. Part 4: Later, Tomas joined academia, focusing on applying artificial intelligence research while maintaining his passion for developing groundbreaking systems. While in academia, Tomas developed learning systems such as ClaraWorld.net, Jobiq.com.au or the system you are working on right now ... skillpies.com. I believe that you are in good hands to start your full-stack development journey! Slide 3 ----------- Part 1: Hmmm, what is full-stack development? Part 2: Full-stack development involves creating all the parts of a web or mobile application and developing all processes and pipelines related to quality assurance and system delivery. Part 3: Being a full-stack developer can also feel like being in a one-man band ... a really awesome band, as you must know how to play many instruments to deliver your project. Slide 4 ----------- Part 1: So, what is a stack, and what role does it play in full-stack development? Part 2: The stack represents the selection of technologies to build, deploy, and maintain all the parts of a software system. Part 3: As a full-stack developer, your primary responsibility is to deliver your application's front-end and back-end. The front end is the application user interface, while the back end implements the business logic and data persistence. Part 4: Very often, you are also responsible for maintaining the quality of the software product, assuring that nothing breaks when new features are developed and integrated. Part 5: Once you finish a new feature, you will deploy your solution to the infrastructure, ensuring availability and scalability. Often, your application is spread across multiple servers, cloud providers and architectures. Part 6: Last but not least, you should be knowledgeable of project management methodologies and tools to support system development and have the capability to automate repetitive processes in the lower layers of this stack. Are you ready for the challenge? Let's now dissect individual parts of the stack. Slide 5 ----------- Part 1: The front-end is like the exterior and interior design—what users see and interact with. It is the visual part of your applications, such as the skillpies website. Part 2: There are many frameworks that facilitate front-end development, such as AngularJS from Google, .NET from Microsoft, or open-source frameworks such as VueJS, Svelte or ever-so-popular jQuery. Part 3: In this course, we will use React, which is a javascript-based framework developed at Facebook, quickly becoming one of the most popular front-end frameworks out there! Slide 6 ----------- Part 1: Behind the scenes, the back end is where all the power lies. It's where your business logic, financial transactions, confidential computations, and the magic that drives your application all come together. Part 2: Due to the limitations of programming language support in browsers, the front end is usually built with HTML, CSS, and Javascript. But, in the backend, you have more freedom to choose your programming language and architecture. Part 3: Python language is a popular choice, supported by fully-featured Django framework and FastAPI. Part 4: Beginners love PHP, and Laravel delivers probably the most complete tool-belt out of all existing frameworks. PHP still powers over 80% of websites around the world! Part 5: If you are looking for a corporate solution based on Windows OS servers, Microsoft's .NET has been a stronghold for full-stack applications. But, in recent years its popularity for new developments is slowly declining. Part 6: While there are other languages and frameworks, such as Ruby and Rails or Java's Spring Boot, this course will use NodeJS. We have very good reasons for choosing NodeJS, which we will discuss later. For now, all you need to know that it will make your life easier while learning one of the most popular back-end frameworks. Slide 7 ----------- Part 1: Let's briefly discuss why we chose the ReactJS framework for front-end development during this course. Part 2: Number 1 reason is that React is straightforward to learn and use, especially if you're already familiar with JavaScript. You can build dynamic and interactive UIs with React without steep learning hurdles. Slide 8 ----------- Part 1: React is one of the most in-demand skills in web development today, with ever growing community. Part 2: React developers are also among the highest paid front-end developers on the job-market! Slide 9 ----------- Part 1: React composes user interfaces from components. You can reuse components across many projects, saving you much time. You can also use ready-made components from open-source or commercial UI frameworks or package providers such as NPMJS Slide 10 ----------- Part 1: As mentioned in a previous slide, React ecosystem contains tons of libraries, tools, and resources supported by a bubbly and friendly community. Check out technology visionaries and thought leaders for your next Instagram or X follow. It's fun! Slide 11 ----------- Part 1: With React, you are in great company. The majority of Fortune 500 companies already use React. Companies like Netflix, X, and even Tesla have recently rebuilt their online services using React. This indicates the longevity of the adoption of this technology. Slide 12 ----------- Part 1: Alright, we chose an excellent front-end framework. Now, let's discuss why we chose NodeJS for our backend. Part 2: NodeJS is built on the V8 engine, making it incredibly fast and efficient in executing JavaScript. Part 3: Its non-blocking, event-driven architecture allows for handling multiple requests simultaneously, making it highly scalable for large applications. Part 4: NodeJS is designed for the online world. It is ideal for building real-time applications like chat apps, gaming servers, and collaborative tools. Slide 13 ----------- Part 1: NodeJS unifies development across the entire stack using a single programming language, JavaScript or TypeScript. Part 2: So, you'll be able to focus on developing features for your client or server, rather than learning new technologies or running different tools. Part 3: This unification speeds up development, reduces the learning curve, and simplifies code maintenance. Part 4: Sharing code between the client and server becomes effortless, enhancing overall productivity. Slide 14 ----------- Part 1: I hope you're motivated to complete the exciting journey and learn full-stack development with me. Part 2: For now, we will leave the rest of the stack alone and focus on front end, only simulating the back-end functions. Part 3: During this time, we will learn the fundamentals of one of the most popular front-end frameworks, ReactJS. Part 4: Hey, let's dive into the exciting stuff! In the first part, we'll kick off by creating our first application. This app will help you plan your day and stay on top of your tasks. So, let's Get things Done! Slide 15 ----------- Part 1: For the rest of the semester, we'll keep exploring the rest of the stack while building a CMS system to manage your blog or company website. We will explore the wonderful world of Next.JS, learn how to work with different databases, authenticate and authorise your users, build secure APIs and much more! Slide 16 ----------- Part 1: Let's discuss how you will be assessed in this course. Part 2: First, in Tutorials, you will extend the functionality of projects discussed during the lectures, such as the GTD and CMS apps. Four times during the semester, you must attend the tutorial and present your work to your tutor. The tutor will ask questions to ensure you reach that part's learning outcomes. The questions will relate to the functionality you just implemented. Part 3: The most important part of this course is the applied project that forms 50% of your grade. Also, this assessment has a 50% threshold; thus, failing this assessment means you fail the whole course. Part 4: The goal for the major assignment is to implement an e-commerce portal selling used vehicles. You are the sole full-stack developer in this project. Part 5: We will provide you with a list of user requirements and a suite of end-to-end tests, verifying the system functionality. Your grade will depend on the completeness, quality, stability and security of your final solution. Part 6: While you are the sole developer in the major assignment, your team will join two of your classmates representing product owners and project managers, who will review your code and keep track of the milestones. Part 7: The final exam will comprise the topics covered in the lectures, combining multiple choice questions, simple answer questions and case studies.