All members are required to agree with the following code of conduct. All members of the community are expected to enforce this code at every community event, class, gathering or exchange (such as Founders and Coders classes or our evening meetups, workshops and short courses), on our online forums (Slack and GitHub), and everywhere we interact under the Founders and Coders banner.

We expect cooperation from all participants in the community to help ensure a safe environment for everybody.

Need Help?

Please reach out to us! Our contact details are on our website or you can find your Course Facilitator (if you're a student of ours) or our admins on Slack. Don't stay silent!

If you wish to make a complaint in London, please first review the complaints policy and submit a complaint with the complaints form.

Adapted from Community Code of Conduct, based on the Ada Initiative anti-harassment conference policy.

The Quick Version

Our community is dedicated to providing a harassment-free experience for everyone, regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices. We do not tolerate harassment of community members in any form. Sexual language, imagery or innuendo is not appropriate for any community event, including talks, workshops, parties, Slack, Twitter and other online media or channels. Participants violating these rules may be sanctioned or expelled from the event and any future events, as well as the from the community itself, at the discretion of the organisers, Founders and Coders.

The Long Version

Harassment includes offensive verbal or written comments related to gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion, technology choices, sexual images in public spaces, deliberate intimidation, stalking, following, harassing photography or recording, sustained disruption of talks or other events, inappropriate physical contact, and unwelcome sexual attention.

Participants asked to stop any harassing behaviour are expected to comply immediately.

All those who interact with the community are also subject to the anti-harassment policy. It is the responsibility of all to ensure that a sexualised environment is not created.

If a participant engages in harassing behaviour, the organisers may take any action they deem appropriate, including warning the offender or expulsion from the event or community without further warning.

If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact an organiser immediately.

Particularly in the case of physical events, organisers will be happy to help participants contact venue security or local law enforcement, provide escorts, or otherwise assist those experiencing harassment to feel safe for the duration of the event. We value your attendance and contributions to the community.

We expect participants to follow these rules in all community interactions, whether professional, social or a mix of both.

If someone has violated these rules, please review the Complaints Policy and make a complaint using our complaints form.

Learn how to use Docker to build applications in containers, then deploy them to AWS.

Installation

1. Install Docker

2. Install AWS CLI

Intro talk

A talk on the history of deploying web apps, and how Docker and AWS fit in.

Learn Docker

Work through Docker's introductory Node.js tutorial.

This covers Docker basics, integrating a database, configuring tests, running in GitHub Actions.

Deploy to AWS

Follow the AWS ECS deployment guide to deploy your example app.

Project

Create an app with 3 separate containers: a client (e.g. React), a backend API (e.g. Express), and a database (e.g. Postgres).

If you're feeling confident about Docker then feel free to pick interesting technologies. If you want to focus on the core learning then stick to stuff you already know (like React).

The client should send requests to the API (e.g. with fetch) and the API should send requests to the database.

Try to come up with something fun—there are no constraints on the app other than using the above 3 services.

Deploy this application to AWS ECS.

Help each other

You don't have mentors to ask for help, so try to help each other. Use your Discord channels to stay in touch and solve problems.

For each application project, there are specific requirements to meet. There are also a number of good practices to uphold while building each website. We've put together this guide, to review before starting each project and to follow when working through your projects.

Publishing your website

All your code should be hosted on GitHub and your website should be live, deployed with GitHub Pages.

Deploy your site early on, you don't need to have completed it before you can publish it. To deploy a site, all you need is an index.html file, with a little content inside of it. For each of your projects, create this, push it to GitHub and then deploy the website.

Include the link to your live site on the GitHub repo, in the description on the right hand side. When you're linking between different sites, it's much better to link to a live site than its codebase on GitHub. For example, in your Project Gallery you might include links to all of the projects you've made as part of your application.

Commiting your code

Once you have a repository set up and you've deployed the site, you can make further changes to your codebase and websites. You do this by changing files, staging them, and then commiting those changes. You can learn more about these steps in our introduction to Git.

Commit regularly while you build your site, and write meaningful commit messages. In VS Code and in your terminal you can customise your commit messages. Your commit message should summarise the work you've just completed, then your commit history will tell a story of how you built your website.

Writing code

Building the projects is going to be challenging, and a lot of this material might be new to you. It's okay to struggle, it's just part of being a developer.

Using tutorials and resources to help you is absolutely the right thing to do when learning to code. However, relying heavily on the code written in a tutorial, or copying and pasting code from external sources, will limit your learning. When following a tutorial, try first to code along with the video, and then build the sit again from memory with less reference to the tutorial you've looked at.

When you're building a website, it's important that you understand what the code you write is doing. Interact with it, and change things to see what effect that has. Break down problems into smaller steps and tackle each step one at a time.

We're looking for interesting and engaging websites that fit our project requirements. Put your own spin on the project, be creative, and don't be afraid to go beyond the requirements.

Knowledge

• K1: all stages of the software development lifecycle (what each stage contains, including the inputs and outputs)

• K2: roles and responsibilities within the software development lifecycle (who is responsible for what)

• K3: the roles and responsibilities of the project lifecycle within your organisation, and your role

• K4: how best to communicate using different communication methods and how to adapt appropriately to different audiences

• K5: the similarities and differences between different software development methodologies, such as agile and waterfall

• K6: how teams work effectively to produce software and how to contribute appropriately

• K7: software design approaches and patterns, to identify reusable off-the-shelf solutions to commonly occurring problems

• K8: organisational policies and procedures relating to the tasks being undertaken, and when to follow them (e.g., the storage and treatment of GDPR sensitive data)

• K9: principles of algorithms, logic and data structures relevant to software development (e.g., Arrays, Stacks, Queues, Linked Lists, Trees, Graphs, Hash Tables, Sorting Algorithms, Searching Algorithms, Critical sections and race conditions)

• K10: principles and uses of relational and non-relational databases

• K11: software designs and functional/technical specifications

• K12: software testing frameworks and methodologies

Skills

• S1: create logical and maintainable code

• S2: develop effective user interfaces

• S3: link code to data sets

• S4: test code and analyse results to correct errors found using unit testing

• S5: conduct a range of test types, such as Integration, System, User Acceptance, Non-Functional, Performance and Security testing

• S6: identify and create test scenarios

• S7: apply structured techniques to problem solving, can debug code and can understand the structure of programmes to identify and resolve issues

• S8: create simple software designs to effectively communicate understanding of the program

• S9: create analysis artefacts, such as use cases and/or user stories

• S10: build, manage and deploy code into the relevant environment

• S11: apply an appropriate software development approach according to the relevant paradigm (e.g., object-oriented, event-driven or procedural)

• S12: follow software designs and functional/technical specifications

• S13: follow testing frameworks and methodologies

• S14: follow company, team or client approaches to continuous integration, version and source control

• S15: communicate software solutions and ideas to technical and non-technical stakeholders

• S16: apply algorithms, logic and data structures

• S17: interpret and implement a given design whist remaining compliant with security and maintainability requirements

Behaviours

• B1: Works independently and takes responsibility (e.g., has a disciplined and responsible approach to risk, and stays motivated and committed when facing challenges)

• B2: Applies logical thinking (e.g., uses clear and valid reasoning when making decisions related to undertaking work instructions)

• B3: Maintains a productive, professional, and secure working environment

• B4: Works collaboratively with a wide range of people in different roles, internally and externally to the team, with a positive attitude to inclusion & diversity

• B5: Acts with integrity with respect to ethical, legal and regulatory ensuring the protection of personal data, safety and security

• B6: Shows initiative and takes responsibility for solving problems within their own remit, being resourceful when faced with a problem to solve

• B7: Communicates effectively in a variety of situations to both a technical and non-technical audience

• B8: Shows curiosity to the business context in which the solution will be used, displaying an inquisitive approach to solving the problem (includes the curiosity to explore new opportunities and techniques; the tenacity to improve methods and maximise performance of the solution; and creativity in their approach to solutions)

• B9: Committed to continued professional development

Handbook

Guidance for learners participating in our programmes.

Portfolio

Self-paced individual study through working on a portfolio of Web projects.

Software Foundation

Software development

Front- and back-end development with Git, JavaScript, and HTML/CSS

DevOps engineering

Using Amazon Web Services

AI Engineering

Using the Open AI API

Software Developer

Node.js, Express.js, SQL, authentication, React and Next.js.

.NET is a software development platform created by Microsoft that allows developers to create: desktop applications, web applications, mobile applications, and games. It provides a framework for building, deploying, and running applications on different platforms, including Windows, Linux, and macOS.

C# is the most widely used programming language for .NET development. C# is an object-oriented language that's designed for building robust and efficient applications. It's similar to other popular programming languages like Java and C++.

C#

C# is a high-level programming language designed to be simple, modern, and object-oriented, primarily used for building applications that run on the .NET platform.

.NET

.NET is a free, open-source, cross-platform framework that provides developers with a set of tools and libraries for building a wide range of applications, from Windows desktop applications to web applications, that can run on multiple operating systems and devices.

Umbraco

Umbraco is an open-source content management system (CMS) based on the .NET framework, designed to create and manage digital content for websites, mobile apps, and other digital media.

Project

Your project for the next three weeks is to get stuck in learning C#, .NET and Umbraco.

1. Learn C# and .NET through online tutorials

2. Install Umbraco

3. Learn Umbraco through exploring its features on the platform

4. Build a website using Umbraco CMS

The primary audience for this handbook is anyone enrolled on the Software Foundation. Here you can find all the key information you need to complete the programme successfully.

View the Software Foundation Handbook

Web browsers are very powerful nowadays. They support lots of cool features that let your code do interesting things. For example webcam filters, text-to-speech and geolocation.

You're going to spend the day experimenting with some of these features to build a fun mini project (in pairs). The idea is to get some experience figuring things out reading MDN docs, and have fun building something silly.

We'll come back together at 16:00 to present what we've made to the group. You'll have 10 minutes to show off your project and talk about anything interesting you learnt.

Wes Bos' JavaScript 30 video series is a great introduction to some of these topics. They're pretty fast-paced and concise, and give you enough info to go and start experimenting to build your own thing. If you want access to the starter code you have to sign up on the site (it's free), but if you just want to watch the videos they're all on YouTube here.

We'd recommend these as a starting point:

1. Drum Kit

2. Text-To-Speech

3. Canvas painting

4. Webcam filters

   Caveat: the API he uses here has changed slightly—read the comments for the correction

Learn how to use Svelte to build dynamic client-side applications.

Intro talk

Learn

covers all the basics. I'd recommend completing parts 1-7 before starting on the project. If you're interested in putting some fun animations into your app then you could also look at parts 9 and 10.

Project

Today's project is similar to React Week's—build an interactive-game-like-thing with lots of dynamic client-side state. You don't have to fetch data from an external API if you don't need to—the focus is on using Svelte.

Help each other

You don't have mentors to ask for help, so try to help each other. Use your Discord channels to stay in touch and solve problems.

The primary audience for this handbook is apprentices who are preparing to begin the Software Developer apprenticeship. The handbook provides guidance on the learning journey beginning with the apprentice interview process and ending with end-point assessment. It provides all the key information for you to complete the apprenticeship successfully.

View the Software Developer Handbook

Learn how TypeScript can help you make less buggy apps.

Intro talk

https://fac-slides.netlify.app/slides/typescript/

Learn

Start by reading the short TS for JS programmers intro.

Then complete as much of Execute Program's TS course as it will allow.

Finally move on to the TS Handbook. This is quite long so just skim "The Basics" and "Everyday Types" at first. It's generally better to look up specific things when you need them rather than trying to front-load all the knowledge.

Project

You have two choices (depending on how much time you have):

1. Create a React app from scratch using TS

2. Refactor one of your previous React apps using TS

Either way please document anywhere you have to amend your code because TS caught a type error. It will be interesting to hear about how you had to program differently based on TS' feedback.

You may find this React + TS cheatsheet helpful.

Project tooling

Both Create React App and Vite have built in support for TypeScript. Make sure you click through to their respective docs as there are some nuances/differences.

Note: neither require you to run the TS compiler yourself—you'll be using their normal start/dev/build commands.

Help each other

You don't have mentors to ask for help, so try to help each other. Use your Discord channels to stay in touch and solve problems.

Single-page app

Client rendering

• Make fetch requests to our own server for JSON data

• Render elements in the DOM based on the server data

• Submit data to our own server, then update the DOM based on the response

Error handling

• Respond with useful error information to the client

• Throw errors when our server hits a problem

• Catch errors and log them correctly

• Handle errors that occur in async code

• Show the user useful messages based on server errors

Design (UI/UX)

• Account for all possible states of a network request

• Design and create an accessible loading spinner

Testing

• Mock fetch calls in our tests to avoid hitting our real API

• Test dynamic client-side interactions to ensure they behave as we expect

• Test all of our error handling

The purpose of our precourse material is to make sure that everyone is familiar with the key concepts we will be using throughout your time here. A solid grounding in the fundamentals will help you immensely.

Please make sure you have finished the precourse material and installed the software on our Installation List before day 1 of your course.

We will be having an installation party shortly before you arrive. If you are using a Windows OS then attending this installation party is crucial. But if you are unable to attend, you can also do this by yourself. If you run into any difficulties, please get in touch.

Precourse Material

1. Command Line

2. Git & GitHub

3. Markdown

4. Semantic HTML

5. CSS

6. DOM Manipulation

7. SQL

8. Practical project

Please do not forget that we don't use frameworks at FAC – ignore Bootstrap and JQuery, and make sure you work in vanilla HTML, CSS and JavaScript.

If you have any problems with the following material, feel free to reach out to your peers and FAC Staff through your cohort's Slack channel!

Command Line

Learning outcome:

• Be familiar with navigating around your computer without using a Graphical User Interface (GUI).

Resources:

• Learn Python The Hard Way has a great Command Line Interface Crash Course.

Git & GitHub

Learning outcomes:

• Understand the purpose of using Git and GitHub

• Know basic git commands like git add, git commit and git push

Resources:

• Udacity's git & GitHub course is a brilliant set of videos. The course is quite long, so don't worry about completing the whole thing. We will go into more depth in week 1. For now, just complete lesson 1 (Navigating A Commit History section).

Markdown

Learning outcome:

• Know markdown syntax well enough to create readmes

Resources:

• No GitHub repo is complete without proper documentation. Follow this markdown tutorial to learn the syntax that you need to write a banging Readme!

Semantic HTML

Learning outcome:

• Be familiar with accessible HTML5 elements.

Resources:

• Here is a 6 minute youtube video to introduce you to the concept of the semantic web. You will be expected to write semantically during week 1, so brush up with the following:

• Read this article to stop using too many divs (divitis). Don't be fooled by the scroll bar - the article isn't particularly long, but there are many comments below.

• Head to this article for more specific examples of useful semantic tags.

CSS

Learning outcomes:

• Be able to apply positioning and layout techniques to solve common problems

• Understanding basic CSS rules

• Understand the differences between em and rem units and how to combine them effectively

Resources: This section includes condensed articles/videos that will be beneficial when tackling CSS throughout the course;

• Learn Layout is a helpful, lightweight, well-ordered guide that covers a lot of concepts in CSS to help you understand how to create a super basic layout. Additional links are provided in each section for more detailed explanations of concepts.

• Relative & Absolute Positioning this great 7 minute video will cover the position property, after watching you’ll be able to apply positioning techniques with layout techniques from the Learn Layout video to accomplish many important tasks like centering.

• CSS Specificity is an essential guide to understanding how CSS rules are applied and how CSS works in general.

• Rem/Em Units this is another essential guide to help you understand the differences between em and rem units and how to combine them effectively.

DOM Manipulation

Learning outcomes:

• Understand what the DOM is

• Create, access, and style a DOM element

Resources:

• Call Me Nick - DOM Manipulation Basics (archived version) will cover a lot of the basics.

• MDN article on "Manipulating Documents" - useful for some further reading, if you'd like

• Appspot's DOM Tutorials: Exercises 1,2 & 3 only will help put that into practice.

• Bonus videos:

  • The DOM: What is the Document Object Model? (includes some jQuery, but provides a useful overview and some vanilla JS examples)

  • Live coding intro to the DOM, with JS examples

SQL

Learning outcomes:

• Understand what a relational database is

• Select, Create and Manipulate data between tables

Resources:

• Code Academy's Introduction to SQL - At a minimum, tackle section 1, hopefully section 2 and if you're having fun then section 3 and 4!

• Playing around with creating tables and accessing the data on your local device will increase your confidence in week 6 - feel free to reach out if you'd like a practical project to work on with SQL!

Practical Project

Learning outcomes: Cement your knowledge of the concepts above through practical application.

Task:

• Build a calculator. This is one of the "Advanced Front End Development Projects" on Free Code Camp. Having a look at their guidelines might help you to get started.

Rather than using Codepen or JS Fiddle, you should do this directly with your text editor, terminal and browser. Start by creating your repo on GitHub and stick to the command line for adding, committing and pushing your changes as you go.

Make sure to host your project on GitHub pages.

If anyone has already made a calculator and feels that they need a different challenge, please message one of us. Have fun, and don't hesitate to use your Slack channel!

ES Modules

How can we modularise our client-side JavaScript?

Questions to consider

• What are the different ways we can import/export code? What does "dynamic import" do?

• Why might using hundreds of small modules in the browser cause performance problems?

Useful resources

• Modules | JavaScript for impatient programmers

• ES modules: A cartoon deep-dive

Browser rendering

What is the "critical rendering path" in browsers?

Questions to consider

• How does the browser render an HTML page containing links to CSS and JavaScript files?

• What does "render blocking" mean?

• What do the async and defer keywords do?

Useful resources

• Understanding the Critical Rendering Path

• Efficiently load JavaScript with defer and async

Browser caching

How can we avoid unnecessary network requests?

Questions to consider

• What is HTTP caching?

• How can our server tell browsers to cache our responses?

Useful resources

• HTTP Caching | Web Fundamentals

• The HTTP cache: your first line of defense

Image performance

How we can efficiently serve image assets?

Questions to consider

• How can we optimise image file size?

• How can we render different images at different viewport sizes?

Useful resources

• Image Optimization | Web Fundamentals

• Responsive Images: If you’re just changing resolutions, use srcset

• Native lazy-loading for the web

Your project this week is to build a frontend for one of the APIs from REST API week. It should be a single-page app rendered with client-side JavaScript.

If your team don't have a finished API, or don't want to use it, you can use the Dogs API from the workshops. The readme contains documentation of all the endpoints.

User stories

Core

• As a user, I want to: see all the resources

• As a user, I want to: sign up for an account

• As a user, I want to: log in to my account

• As a user, I want to: add my own resources

Stretch

• As a user, I want to: update my own resources

• As a user, I want to: delete my own resources

Since this project is open-ended you'll need to write your own more specific user stories once you know what you want to build.

Acceptance Criteria

• A single-page app (only one HTML file)

• Accessible signup/login forms

• Token-based authentication (storing token in localStorage)

• Form for adding new resources (only for logged in users)

• Works well across Chrome, Firefox and Safari/Edge browsers

Stretch criteria

• Buttons to delete existing resources (for logged in users)

• Form for updating existing resources (for logged in users)

There is no project during Introduction Week. See Week 1 for the project relating to the server topic.

See week 1 for the learnings relating to the server topic.

• Introduce the software developer labour market landscape

• Introduce the Employer Engagement function

• Introduce employability curriculum

• Explore multi-modal strategies for finding employment

These resources are helpful extra reading that may clarify or enhance concepts you're learning in the main curriculum.

• Learn nodejs.dev

  Official counterpart to the Node docs. Useful for getting realistic examples of features when the docs are overwhelming and confusing.

• Art of Node

  Popular (if slightly outdated) overview of what Node is and how it works.

• What is a web server?

  General background info on how servers work

• Introduction to the DOM

  An overview of the fundamental ways you can dynamically change a page with JS.

For OSX Users:

• Install Brew

• Optional: iTerm2

For Linux Users:

• Ubuntu and Linux Mint are probably the two most used desktop Linux distros out there. Mint is becoming increasingly popular and in a lot of ways, is more beginner-friendly than Ubuntu. It also uses up less memory resource (the most lightweight Mint edition is XFCE), and will be better suited to slower machines.

For Windows Users:

• For the course you'll need to install a Linux operating system on your machine and dual boot - students in the past who have tried to use Windows always encounter big setbacks with installation problems and general incompatibility issues.

• Be sure to back up your files before you start, in case anything goes wrong. You will still be able to use Windows alongside Linux and if everything goes right, you won't lose any data.

• It's not as scary as it sounds! There are a lot of articles online to help you. Due to a lot of different OS configurations you may be best off searching google for your specific OS + distro (eg: "dual boot windows 10 and Ubuntu"). However here are some links that may be useful:

• How to install Ubuntu 18.04 alongside Windows 10

• Dual boot Linux on other Windows OS's

• We shall have a couple of FAC students and alumni available at the installation party to guide you through installing linux. Please come along if you have Windows OS.

• Finally please do not hesistate to come to a meetup or contact us on slack if you are having trouble, we can help!

If you're having hardware or permissions issues when dual booting, you may be able to use Windows Subsystem for Linux. If you're going down this route, please make sure postgres is installed correctly too.

Chromebook Users:

• Chromebooks all now officially run Linux and setting it up on older machines is pretty simple, too.

For Everyone:

• Install and manage Node.js using nvm.

  Note: We will be covering Node.js during the course. If you are curious and would like some background reading, Art of Node is a great resource.

• Install PostgreSQL

• Install a text editor of your choice. We recommend:

  • VS Code - because of it's source control and liveShare features

• Install Chrome

• Setup SSH access to your Github account

• Install Postman

• Chrome extensions:

  • JSONView

• Make sure to explore your editors plugin ecosystem for useful plugins:

  • VSCode Marketplace - we recommend prettier and Rainbow Brackets

• Download the Slack Desktop Client - the interface is easier to manage the different workspaces you'll be part of

• ...but don't be overwhelmed, you don't need to install anything further

1. Command-line primer

   Digital Ocean's Command Line Primer is a great intro to using your terminal. It says it's for Linux but it's applicable for Macs, and Windows if you're using something like WSL or Git Bash.

   Try to practice using your Terminal to navigate your computer as you're working on other tasks.

2. Markdown

   GitHub's Markdown introduction introduces using the Markdown language to quickly write simple HTML. Practice your Markdown by writing README.md files for your GitHub repositories. Try to include some headings, lists, images, and maybe even a table.

3. Execute Program's JS Arrays course

   Execute Program is an interactive code learning platform. Their JS Arrays course is a great recap of things you might have already come across, and should also have some interesting new things.

   You should be able to get started with a free account—we can get you paid access later when this runs out.

4. CSS Layout workshop

5. Semantic HTML workshop

6. Accessibility workshop

7. HTML Forms workshop

8. (Stretch) Execute Program's Modern JS course

This is a guide to what you should be doing for homework each week. Please reach out to your CFs if you are unsure of what to prioritise between sessions.

• Complete the Git, CSS, Semantic HTML, Accessibility and HTML forms workshops ahead of Week 1

• Complete the Asynchronous JS, Promises & fetch, Real-world fetch and Promise practice workshops ahead of Week 2

• Complete your user manual

• Complete your Week01 progress log

• Complete github profiles

• Project work

• Create a presentation on HackMD

This week is focused on the fundamental building blocks of web pages—accessible, semantic HTML, and well-organised CSS.

Workshops

To be completed AHEAD of Week01

• CSS Layout workshop

• Semantic HTML workshop

• Accessibility workshop

• HTML Forms workshop

To be completed on Induction day

• Git workflow workshop. Repo name: Work01_Git_YourName

• GitHub Projects workshop. Repo name: Work02_GitHubProjects_YourName

To be completed on Week01

• Asynchronous JS workshop. Repo name: Work03_Async_YourName

• Promises & fetch workshop. Repo name: Work04_FetchAndPromises_YourName

• Real-world fetch workshop. Repo name: Work05_Fetch_YourName

• Promise practice workshop. Repo name: Work06_Promises_YourName

• Pokemon promises vs async/await. Repo name: Work07_PromisesVSAsync_YourName

Execute Program

• Execute Program Javascript Concurrency

Topics

• Safeguarding and Prevent

• Safeguarding Quiz

• Dev machine setup

• Project planning and development (GitHub Projects)

• User Manuals

• Progress Logs

• Introduction to GitHub profiles. GitHub Profile Generator https://rahuldkjain.github.io/gh-profile-readme-generator/

• Project introduction

• Live code session: project code review

• HackMD

• Project presentations

These questions are designed to give you an idea of what concepts you might need to revisit from the first few weeks of the course.

This isn't a test and you can't fail, so don't worry about getting some answers wrong. It's purely for your own benefit, so try to answer each question honestly without looking them up first!

Git

• Why do we use Git?

• What's the difference between Git and GitHub?

• What happens when you clone a repository?

• What happens when we do git pull origin main

• How do we create a new branch on our local machine?

• How do we control which changes will be included in the next commit?

• When might git add . be inappropriate?

• How do we make sure our local changes don't conflict with main?

• What does git push origin [branch-name] do?

• Why do we make pull requests instead of just changing main directly?

• Why should you review your teammates' pull requests?

HTML

• Why is accessibility important?

• How can you quickly find simple accessibility problems?

• What is semantic HTML?

• Why is it important to use the "correct" semantic element?

• What is the <form> element used for?

CSS

• How would you use CSS variables to make a reusable colour palette?

• How would you use flexbox to make elements sit on a single line?

• How would you use grid to make a layout that automatically adds columns as the screen gets wider?

• Why is it important to create a responsive design?

• How would you structure your CSS to make it "mobile-first"?

Javascript

• Why should we avoid using var to define variables?

• How might you make a long, complex chunk of code easier to read?

• What is a "callback"?

Array methods

• How would you use array.map() to create a new array with transformed values?

• How would you use array.filter() to create a new array with certain values removed?

• How would you use array.find() to get a single value from an array?

Promises & fetch

• What is a promise?

• How do promises help manage asynchronous code?

• What does a promise's .then method return?

• How could you chain promises together to avoid "callback hell"?

• How would you handle a fetch request that failed to get a response from the server?

• How would you handle a fetch request that received a 404 response from the server?

HTTP

• What is an HTTP request?

• What kind of request is sent when you click a link in your browser?

• What kind of request is sent when you submit a form in your browser?

• What is an HTTP response?

• What does the status code of an HTTP response tell us?

• What are some common status codes?

• What are HTTP methods for?

• What kind of request should have a GET method?

• What kind of request should have a POST method?

• What kind of request should have a PUT method?

• What kind of request should have a DELETE method?

• What is the "body" of an HTTP request for?

• What is the "body" of an HTTP response for?

DOM

• How would you get a reference to a DOM element in your JS?

• How would you get references to multiple DOM elements at once in your JS?

• How would you update properties of a DOM element?

• What's the difference between a "property" and an "attribute"?

• What are some different ways to add content inside a DOM element?

• When might the <template> element be useful?

• What are the different ways to add event handlers to elements?

• Why is addEventListener the safest way to add an event handler?

• How can you access submitted form values in your JS?

Testing

• Why are tests useful?

• What is the difference between unit and integration tests?

• What kind of code is easier to test?

• Why should your tests be isolated from each other?

• What is Test Driven Development (TDD)?

• When might TDD be a useful process to follow?

Debugging

• What process would you take to find out why your code isn't working?

• What tools do JS/dev tools have to help debug your code?

• At what point should you ask for someone else's help?

Your challenge is to build an agency website for your team.

Your website should give potential clients:

• An introduction to your agency

• Information about each member of your team

• A way to get in touch if they are interested in working with you

User Stories

A user story is a description of one or more features of a piece of software.

Core Stories

As a potential client, I want to:

• See information about each member of your team so that I can know who you are

• Browse your website on mobile, tablet, and desktop devices

• Click to navigate to different sections of your webpage

• Contact you to enquire about working with you

• Visit your website at a publicly accessible domain name

Additionally, as a visually impaired user, I want to:

• Navigate your website using keyboard controls

• Hear my screen reader describe the content on your website

Repository naming convention

Please name your repo following this template: PRO01_Name1_Name2_Name3_Name4

Acceptance Criteria

User stories come with acceptance criteria - a detailed scope of a user’s requirements.

• Navigation menu

• ‘About us’ section

• Contact form

• A user cannot submit a form without filling out all of the mandatory fields (name, company name, email address)

• Information from the form doesn’t get submitted until the user clicks a button

Stretch Goal

Use the automatic trigger functionality of your GitHub project board.

Finally, feel free to get creative with the content of your website! Good luck!

Accessibility

• Structure a site using semantic HTML to aid accessibility

• Ensure a web page is readable for screen readers

• Ensure our UI has sufficient colour contrast so that everyone can perceive it comfortably

• Use various tools to check that our website meets accessibility criteria

Design

• Use CSS media queries to ensure our content is always presented effectively on screens of different sizes

• Demonstrate a mobile-first approach to building a website

• Use CSS variables to apply repeated colours to HTML elements

• Use CSS Flexbox to style children in a single-direction layout (ie a row or a column)

• Use CSS Grid to style children in two-direction layout

Workflow

• Ensure our Git commit history tells a coherent story

HTML Forms

• Use the appropriate input types in HTML forms for gathering different types of information

• Ensure that forms are accessible and include appropriate labeling for screen readers

CSS architecture

How should you write CSS to ensure it's easy to read, maintain and scale as a website grows?

Questions to consider

1. Why are CSS naming conventions useful?

2. When might specificity become a problem?

3. How can composition help us build UIs?

CSS layout

How does CSS decide where to put elements on the page?

Questions to consider

1. What is the box model?

2. How does the display property affect layout?

3. How does the position property affect layout?

Responsive design

How do you design and build a webpage that looks good on any device?

Questions to consider

1. What CSS units should we use for dimensions? What are absolute and relative units?

2. When should you use a media query? Are they only for screen size?

3. How can mobile-first CSS make responsive styling easier?

Github projects

Questions to consider

1. How can we leverage Github projects to help us plan and track work?

Accessibility

How do you write markup so that your page is accessible to as many users as possible?

Questions to consider

1. Who does semantic HTML benefit?

2. How does ARIA relate to HTML?

3. What's the difference between accessible and inclusive?

Project

• Quickstart for Projects

Async

• Async JavaScript Youtube tutorial

• JavaScript Promises Youtube tutorial

• Async Await vs Promises Youtube tutorial

• Introducing asynchronous JS

• Codecademy JavaScript Async Course (Free. 3 hours)

CSS

• Units - Every Layout

• The lengths of CSS

• How To Write Mobile-first CSS

• Flex children examples An explanation of how flex-grow, flex-shrink and flex-basis work for elements inside a flexbox container.

• CSS Guidelines

• BEM Methodology

• Composition - Every Layout

• Boxes - Every Layout

• CSS Layout - MDN

Accessibility

• What a Year of Learning and Teaching Accessibility Taught Me

• Why, How, and When to Use Semantic HTML and ARIA

GIT

• Intearctive tool to learn Git branching

Building an online presence

• Introduce the importance of building an online presence and ‘learning in public’

• Discuss the benefits of maintaining an up-to-date LinkedIn profile

Introduction to CVs and the Elevator pitch

• Understand the importance of building and maintaining an up-to-date CV

• Understand the the concept of an ‘elevator pitch’

• Learn best practices when pitching yourself

This is a guide to what you should be doing for homework each week. Please reach out to your CFs if you are unsure of what to prioritise between sessions.

• Complete LinkedIn profile

• Complete the Express and Dev Tooling workshops

JavaScript

• Write code that executes asynchronously

• Use callbacks to access values that aren't available synchronously

• Use promises to access values that aren't available synchronously

• Use the fetch method to make HTTP requests and receive responses

• Configure the options argument of the fetch method to make GET and POST requests

• Use the map array method to create a new array containing new values

• Use the filter array method to create a new array with certain values removed

Node.js

• Set up a Node.js environment for web development

• Use environment variables for managing secrets and sensitive keys in Node.js

• Use npm to manage project dependencies and scripts in a Node.js environment.

• Understand server-side development using Node.js.

• Modularise code by creating reusable modules in Node.js, improving code organization and maintainability.

APIs

• Integrate external APIs into a web application.

• Learn to make server-side requests to APIs and handle responses effectively.

• Understand the principles of client-server interaction and how to manage data exchange between them.

Testing

• Check that passing a given input into our tests returns the expected output

• Write tests to mimic the behaviour of a user performing different actions

• Design functions for common testing patterns, like checking for matches, equality or inequality

• Organise tests using descriptive names and groupings to clarify their purpose and outcomes

• Implement custom messages in test assertions to provide specific feedback for pass/fail outcomes

• Write modular, single-responsibility functions that are easy to test in isolation

Day 1

Day 2

Day 3

Day 4

Day 5

Learn how to manage asynchronous tasks and send HTTP requests using JavaScript.

Workshops

To be completed on Monday

• . Repo name: Work08_Node_YourName

• . Repo name: Work09_NodeAndExpress_YourName

To be completed on Friday

• . Repo name: Work10_IntroTesting_YourName

• . Repo name: Work11_TestLibrary_YourName

• . Repo name: Work12_UnitTesting_YourName

• . Repo name: Work13_IntegrationTesting_YourName

• . Repo name: Work14_TDD_YourName

Execute Program

Topics

• Introduction to commonJS modules

• Introduction to testing

• Introduction to Express

• Intro to testing, Build a testing library, Unit testing, Integration testing and TDD workshops

• Elevator pitch workshop

• General background info on how servers work

• Kevin Powell's video (Just ignore Astro recomendation at the very end)

• A comic explaining what happens when you type a URL into your browser.

• Describes the HTTP protocol in a lot more detail. May be useful if you like learning exactly how stuff works under-the-hood, but may also be overwhelming.

• How functions and callbacks work in JavaScript. Based on a workshop from this week's curriculum.

• Good testing practices so you can be confident your tests are working.

• A comparison of creating DOM elements manually versus using the <template> element. Useful technique if you're dynamically rendering lots of stuff with JS.

1. You are going to create a chatbot that you will deploy in a Discord channel

Core user stories:

1. Project Setup with Libraries: As a back-end developer, I want to set up a new Node.js project in VS Code with the discord.js and openai libraries using require('discord.js') and require('openai') after installing them with npm, so I can start building my bot with all necessary functionalities.

2. Secure Configuration: As a back-end developer, I want to configure my bot securely by using require('dotenv/config') to load my API keys from a .env file, ensuring they are not hard-coded into my project, using a .gitignore file.

3. Bot Initialisation: As a back-end developer, I want to initialise my Discord bot and log in to Discord using the new Discord.Client() constructor and client.login method with my Discord token, to start listening for messages.

4. Message Handling: As a back-end developer, I want to handle incoming messages by setting up a message event listener using client.on('messageCreate', callback) to process messages received in Discord and respond to them with a “hello” message.

5. Optimisation: As a developer, I want the bot to optimise its performance by efficiently handling events, so that it does not consume excessive resources. This may involve writing efficient callback functions for client.on and client.once, ensuring they execute tasks quickly and without unnecessary resource consumption.

6. OpenAI Chat Integration and Response Generation: As a back-end developer, I want to integrate OpenAI into my bot and send chat prompts to the API to generate responses. This would involve using the openai.chat.completions.create() method with my OpenAI API key. I aim to pass conversation history and other necessary parameters to this method to receive context-aware chat completions. This will enable the bot to generate dynamic, intelligent responses based on ongoing conversations, enhancing user interaction and experience.

7. Response Management: As a back-end developer, I want to manage the OpenAI response returned by openai.chat.completions.create() using either fetch or async/await and sending the response back to the Discord channel.

8. Command Processing: As a back-end developer, I want to process commands directed at my bot by using string matching or a command prefix to distinguish between general messages and commands meant for the bot.

9. Error Handling: As a back-end developer, I want to implement error handling in my bot interactions using either .catch or try...catch within my fetch or **** async functions to manage exceptions and provide error messages if something goes wrong.

Stretch user stories:

1. Messaging Users Directly:

   Hint: Utilise the user.send() method in Discord.js to send direct messages to users. Retrieve the user object through events or commands that the bot receives.

2. Dialogue Boxes and Interactive Responses:

   Hint: Implement Discord's message components like buttons and select menus using MessageActionRow and MessageButton or MessageSelectMenu classes from Discord.js. Handle interactions with client.on(Events.InteractionCreate, callback).

3. Creating Private Chats (Channels):

   Hint: Use guild.channels.create() to create new private channels and manage access using permission overwrites in Discord.js.

4. Automated Moderation Features:

   Hint: Monitor messages for specific keywords or patterns using client.on(Events.MessageCreate, callback). Implement moderation actions like message.delete() for removing inappropriate content and guildMember.timeout() for muting users.

5. Multimedia Responses (Images, GIFs, Audio Clips):

   Hint: Send multimedia content using message.channel.send() with the files option. For audio, explore Discord.js voice modules for handling voice channels and streaming.

2. You are going to integrate testing into your Discord chatBot project.

The following user stories are designed to guide you as you integrate testing into your Discord chatBot project. If there are some which are not appropriate to your project, you do not have to integrate these. You can create your own tests that are relevant to your project.

Possible user stories:

As a back-end developer, I want to...

• verify Discord.js integration by creating a test function that creates a new Discord client

• ensure that the OpenAI library is correctly integrated by creating a test function that attempts to use the OpenAI API to create a simple chat completion or query

• test that my bot securely loads API keys from the .env file, confirming that no sensitive information is hard-coded

• ensure that my bot initialises and logs into Discord successfully

• simulate receiving a message and verify that my bot responds with a "hello" message, testing the message event listener's functionality

• simulate commands directed at my bot to check if it accurately processes these commands from general messages

• introduce faults or exceptions in bot interactions to verify that my bot's error handling mechanisms effectively manage and log errors

• mock the process of sending responses back to the Discord channel, verifying that my bot formats and dispatches messages correctly

• ensure my bot can send direct messages to users, testing the user.send() method's functionality

• test my bot's ability to send multimedia responses under specified conditions, ensuring it can handle images, GIFs, and audio clips effectively

Repository naming convention

Please name your repo following this template: PRO02_Name1_Name2_Name3_Name4

TypeScript and Express

• Develop a server using Express and TypeScript for backend applications (K9, S1, S11, S12)

• Identify the server's role within a full stack application (K1, K2, K3)

• Understand the benefits of using TypeScript over JavaScript, such as improved code quality, enhanced developer productivity, and better tooling support (K7, S1)

• Learn the basic syntax and features of TypeScript (S1, S16)

RESTFUL Api's

• Grasp the concept and purpose of RESTful APIs (K11, S12)

• Construct and implement RESTful APIs effectively (S1, S11, S12, S16)

• Determine appropriate scenarios for applying RESTful APIs (K7, S9, B2)

• Design endpoint structures for data creation, modification, and deletion (K11, S8, S12)

• Utilize Postman to test RESTful APIs independently of frontend components, ensuring proper functionality, error handling, and adherence to API specifications (S5, S6, S7)

• Gain experience in documenting the application's architecture, API endpoints, and user guides for future reference and maintenance (S15, B4, B7, B8)

• Practice creating JSON endpoints and using these endpoints to fetch and display data dynamically.

• Dynamically update web page content without needing to reload the page.

Additional

• Utilize node:fs for filesystem operations (S1, S16)

• Gain experience in using developer tooling, including IDEs, linters, and formatters, to enhance productivity (B3, B9)

Typescript

• Official TS handbook

Devtools

• How to get the most out of the JavaScript console

• Get Started with Debugging JavaScript in Chrome DevTools

• Viewing And Changing The DOM in Chrome DevTools

• Firefox Page Inspector

• Simulate Mobile Devices with Device Mode in Chrome DevTools

• A Guide To New And Experimental CSS DevTools In Firefox

Express and RESTFUL APIs

• Setting up Typescript and Express

  A guide on setting up the tools for this weeks project. Good explanation on generating and modifying a TS config file

• Node fs and Express

  Good node tutorial demonstrating using json object as a mock database

• How to parse data with Express

  A brief guide to the different ways you can deal with data in your server

• Testing your server

  Documentation on using Postman to make a collection of tests for api endpoints

Learn how to create a Discord chatbot using Node.js, integrate it with OpenAI's API, and implement testing for your bot.

Workshops

• Developer tooling. Repo name: Work15_DeveloperTooling_YourName Check resources

• Building client-side apps with React. Repo name: Work16_React_YourName

Execute Program

• Execute Program Everyday TypeScript.

Stretch

• Execute Program Advanced TypeScript

Topics

• Express server using Node

• RESTful API development

• External API integration and management

• JSON data handling and mock database operations

• Server-side logic for quiz generation and processing

• Error handling and validation in API development

• CRUD operations implementation

• API documentation techniques

• Asynchronous programming in JavaScript

• Introduce learners to the concept of an ‘elevator pitch’

• Project presentations

Asynchronous JavaScript

How does JS handle asynchronous code?

Questions to consider

1. What's the difference between "synchronous" and "asynchronous" code? Why might synchronous code be called "blocking"?

2. What are the event loop and the call stack?

3. How do callbacks and promises help us?

Testing methodologies

How do different testing methodologies try to improve the way we write tests?

Questions to consider

1. What is Test-Driven Development (TDD)? Can it help us write better code?

2. What is Behavior-Driven Development (BDD)? How do we translate user requirements into automated tests?

3. What is test coverage? Can this tell us about the quality of our tests?

React

• Learn how to integrate TypeScript with a React (S1, S11, S16)

• Understand the concepts of components, props, and state in React (K7, S8, S12)

• Implement routing in a single-page application using React Router (S1, S11, S16)

• Manage global state and side-effects in React applications (S1, S11, S16)

• Create reusable UI components and manage their lifecycle (S1, S2, S8)

• Handle asynchronous operations and manage data fetching in React (S1, S11, S16)

• Follow best practices in React development (S1, B3, B9)

Node

• Set environment variables and understand their use case (S10, K11, B3)

Software Architecture

• Draw a diagram representing the flow of our application (S8, K11, B7)

• Follow a consistent pattern for naming our folders, files and variables (S1, K11, B3)

Project Overview

Your project is to build the backend for a dynamic web application that combines a quiz generator with data from multiple external APIs. This backend will serve as the foundation for a future full-stack application, showcasing your skills in server-side development, API integration, and data manipulation.

Core Requirements

1. TypeScript Implementation::

   • The entire backend project must be written in TypeScript.

   • Utilize TypeScript's static typing for all modules, functions, and API interfaces.

   • Configure the TypeScript compiler (tsconfig.json) for the project's specific needs.

2. Server-Side Setup:

   • Initialize a Node.js project using Express.

   • Implement a RESTful API for quiz-related operations and external API interactions.

3. JSON Endpoints:

   • Create endpoints that fetch data from at least two external APIs and return it in JSON format.

   • Implement endpoints for quiz-related operations (e.g., get questions, submit answers, retrieve results).

4. Quiz Functionality:

   • Develop server-side logic to:

     • Generate quizzes with randomly selected questions based on a chosen subject area.

     • Process quiz answers and calculate results, including areas of strength and weakness.

5. Data Management:

   • Use a JSON object in a separate file as a mock database to store quiz questions.

   • Implement CRUD operations for managing quiz questions in this mock database.

6. External API Integration:

   • Integrate at least two external APIs to enhance the quiz experience or provide additional information related to quiz topics.

   • Implement proper error handling for failed API requests or unavailable data.

Stretch Goals

• Implement more complex quiz generation algorithms (e.g., adaptive difficulty).

• Add a favourite count feature for questions and allow filtering by this criterion.

• Develop more sophisticated results analysis.

• Implement caching mechanisms for external API calls to improve performance.

• Create comprehensive API documentation using tools like Swagger.

Project Phases

Initial Spike Stage

• Set up the basic structure of your Express server.

• Implement a single endpoint that interacts with one external API.

Core Project Development

• Develop the full set of RESTful endpoints for quiz operations.

• Integrate multiple external APIs.

• Implement the quiz generation and results calculation logic.

API Suggestions

Easier APIs

1. Open AI API - https://platform.openai.com/

2. JokeAPI - https://jokeapi.dev/

3. The Dog API - https://thedogapi.com/

4. The Cat API - https://thecatapi.com/

5. Unsplash it - https://unsplash.it/

6. REST Countries API - https://restcountries.com/

7. UK Police API - https://data.police.uk/docs/

8. Postcode Lookup - https://postcodes.io/

More Challenging APIs

1. Twitter API - https://developer.twitter.com/en/docs/twitter-api

2. Google Maps API - https://developers.google.com/maps

3. Spotify API - https://developer.spotify.com/documentation/web-api/

4. Giphy API - https://developers.giphy.com/docs/api/

5. GitHub API - https://docs.github.com/en/rest

6. The Movie DB API - https://developers.themoviedb.org/3/getting-started/introduction

7. The Guardian API - https://open-platform.theguardian.com/documentation/

8. News API - https://newsapi.org/docs/endpoints

9. TfL API - https://api.tfl.gov.uk/

Submission Guidelines

• Host your code in a Git repository with clear documentation.

• Deploy your project on GitHub Pages. Feel free to deploy it elsewhere as well if you prefer and have the time.

• Include a comprehensive README.md file detailing:

  • Project setup instructions

  • API endpoints and their usage

  • External APIs used and their purpose in the project

  • Any stretch goals implemented

• Ensure your server is deployable, even though a full deployment isn't required at this stage.

Additional Considerations

• Design your API with future frontend integration in mind. The frontend part of this project will be added next week.

• Implement proper error handling and validation for incoming requests and external API responses.

• Securely store any API keys or sensitive information required by your server.

• Document your API structure and endpoints thoroughly for future development.

By completing this project, you will demonstrate your ability to create a robust backend application that combines original functionality with external data sources, showcasing your skills in API development, integration, and server-side logic implementation.

Repository naming convention

Please name your repo following this template: PRO03_BACK_Name1_Name2_Name3_Name4

Testing

• Learn how to write and run unit tests for backend functionality using the Node testing suite and Postman (S4, S13, S6, S13)

• Gain experience in using the Cypress testing library with React (S4, S13, B9)

• Understand how and when to use component and end to end tests (K12, S5, S6, S13)

• Understand how to write maintainable and readable test cases (S1, S4, B3)

Deployment

• Gain experience in deploying a full-stack web application to a cloud platform (S10, S14, B3)

• Understand the differences between development, staging, and production environments (K1, K3, K8)

• Configure the necessary environment variables and settings for deployment (S10, S14, B3)

• Understand the process of building and optimizing the application for production (S10, S14, B3)

• Learn how to set up and configure a production environment on a cloud platform (S10, S14, B3)

• Gain experience in using a continuous integration and deployment (CI/CD) pipeline (S10, S14, B3)

Your project this week is to build the front end to consume the RESTful API you designed and built last week. You should think and plan what features and look you want to your quiz app to have. You might considered making some wire frames or a prototype using a tool like Figma.

User Stories

As a quizzer, I want to:

• Begin a quiz session with randomly generated questions.

• Filter quiz questions by subject and difficulty.

• Select a chosen number of questions.

• See a summary of my results after completing a quiz.

• Add, edit, and delete quiz questions and answers.

Stretch user stories

• Like particular questions and filter by this category.

Acceptance Criteria

• Provide an engaging, intuitive user interface.

• Allow users to take quizzes based on category, difficulty and count.

• Allow users to add and delete questions from the 'database'.

• Follow React principles and best practices.

• Follow good accessibility practices.

• Hidden environment variables (i.e. not on GitHub).

Stretch criteria

• User local storage to allow for records to persist after browser refresh.

• Make custom hooks to encapsulate repetitive logic i.e. fetch data or adding to local storage.

Repository naming convention

Please name your repo following this template: PRO03_FRONT_Name1_Name2_Name3_Name4

Your task this week is to deploy and test the quiz app you have completed in the previous two weeks.

Description

Before you start you need to create a testing and deployment plan. We would like you plan a testing strategy that will have broad coverage of your project. The tools we would like you to use to achieve this can include Cypress, Postman and the Node built in testing library.

We would like you to deploy both the backend and frontend of your project. Before choosing a deployment platform, consider whether your application is static or dynamic, as this will influence your choice. Here are some options to consider:

• AWS EC2 Instance

• AWS Lambda (for serverless applications)

• Heroku (easy deployment for various application types)

• GitHub Pages

• AWS S3 Bucket (suitable for static websites)

• Vercel

• Netlify

• Firebase Hosting (suitable for static and dynamic sites)

• ...

Research these options and choose the ones that best fit your project's needs, considering factors like scalability, ease of use, and cost. Remember, the goal is to understand the deployment process and the considerations involved in choosing a hosting solution.

Questions to consider

• What parts of the application logic are the most critical to cover with unit tests?

• How will you mock external dependencies (like databases or APIs) during unit testing?

• What are the key user journeys and flows within the application that must be covered by end-to-end tests?

• How will you manage test data and state for end-to-end testing?

• How will encrypted communication (HTTPS) be set up, and will you use a reverse proxy?

• How will you manage configuration variables for different environments (development, staging, production)?

• How will CORS policies be configured between the frontend on GitHub Pages and the backend on EC2?

Acceptance Criteria

• Comprehensive Test coverage including unit, integration and end-to-end tests covering critical application logic and user flows.

• Successful deployment of backend and frontend.

• Documentation clearly outlines setup, deployment, and usage instructions, including API endpoints and environmental requirements.

Stretch criteria

• GitHub Actions CI setup to run your tests when you push.

• Configure HTTPS for secure communication between the frontend and backend, using a tool like Let's Encrypt to obtain and manage SSL/TLS certificates.

React

• React Mindset

• Youtube React Course (Net Ninja)

• Creating a React app with Vite

  A framework agnostic tool that allows for quick setup of a React app with TS

• React Docs

  Official React docs on typescript with interactive examples

• React/Typescript Cheat-sheet

  A quick reference guide to basic React patterns

• Free Code Camp React/TS guide

  A more guided resource of this material

• useContext Hook A powerful hook for passing state values in your application without prop drilling

Figma

• Figma

  Basic exercises for beginners

• Figma Youtube tutorial. 0:16

• Figma Youtube tutorial. 0:24

• Figma Youtube tutorial. 1:13

This week concentrates on testing and deploying the full-stack quiz application developed over the past two weeks. The focus is on implementing comprehensive testing strategies and successfully deploying both the frontend and backend components of the application.

Workshops

• Persisting data with SQLite and Node

Execute Program

• Finalize incomplete courses

• SQL

Topics

• Unit testing backend functionality with Node's built-in testing suite

• API testing with Postman

• End-to-end testing with Cypress for React applications

• Component testing in React

• Writing maintainable and readable test cases

• Configuring environment variables for different deployment stages

• Setting up and configuring cloud platforms (AWS EC2)

• Managing CORS policies in deployed applications

Stretches

• Implementing Continuous Integration and Deployment (CI/CD) pipelines

• Securing applications with HTTPS

Project

• Develop a comprehensive testing strategy covering unit, integration, and end-to-end tests

• Implement tests using Cypress, Postman, and Node's testing library

• Deploy both the backend and frontend

• Configure environment variables for different deployment stages

• Document the setup, deployment process, and usage instructions

Additional Skills

• Managing test data and state

• Implementing reverse proxies

• Configuring CORS policies

• Using GitHub Actions for CI/CD

This week focuses on building a front-end application using React and TypeScript to consume the RESTful API developed in the previous week. The emphasis is on creating an intuitive user interface for the quiz application while applying React best practices and TypeScript integration.

Workshops

• Cypress courses (x4). Repo name: Work17_Cypress

Execute Program

• Finalize incomplete courses

• SQL

Topics

• React fundamentals (components, props, state)

• TypeScript integration with React

• React Hooks (useState, useEffect, custom hooks)

• React Router for single-page application navigation

• Asynchronous operations and data fetching in React

• State management in React applications

• Creating reusable UI components

• Accessibility practices in React

• Environment variable management

• Software architecture and application flow

• Best practices in React development

• User interface design and prototyping (e.g., using Figma)

• Local storage for data persistence

• Custom hooks for repetitive logic

Project

• Build a front-end interface for the quiz application

• Implement user stories for quiz functionality

• Integrate with the backend API developed in the previous week

• Focus on user experience and interface design

• Apply React and TypeScript best practices

• Ensure accessibility compliance

• Implement proper error handling and data validation

Your project this week is TBC

Intro

Learners will develop an end-to-end dynamic e-commerce web application where users can browse and purchase products online.

The frontend of this project will be built using React. For the backend, it will use Node.js and Express to handle server-side functionality. User accounts and product data will be stored in a SQLite database.

Project

Your project for the next week will be to develop a Express backend connected to a SQLite database and linked to a React frontend. Your UI should provide methods so that users can search for and display information about items and add them to a shopping cart. It is up to you to determine the process and order you take to achieve this, but should plan this carefully and attempt to anticipate any hurdles you approach will encounter.

Spike

Before you start writing features you need to design the schema for your data. Think about what different things your app needs to store, how they relate to each other, and how you can avoid duplicating information. Record your schema in your README.md using Markdown tables. Consider embedding a diagram to help visualise the relationships.

Questions to consider

1. What kinds of data relationships are there?

2. What’s a foreign key? How can they help us design schemas with relational data?

User stories

As a shopper, I want to:

• See a homepage with content when I log in

• Be able to navigate between different pages of the app

• View a list of products when I visit the products page

• Click on a product to view more details in a new page

• Search for products by name or description and view product listings with images, descriptions and reviews

• Add products to a shopping cart

Stretch user stories

• View and edit items in my shopping cart

• Complete the checkout process to "purchase" products in my cart

• See confirmation when an order is placed successfully

• View previous orders and order history

• Complete checkout and payments to simulate purchasing products

Repository naming convention

Please name your repo following this template: PRO04_Name1_Name2_Name3_Name4

Acceptance criteria

• Store product data in a database

• Follow React principles and best practices

• Alow users to search/filter products

• Allow users to add products to a cart

Stretch

• Track item stock and remove items that sell out

Databases

• Learn how to design and structure a database schema for the application (K10, S8)

• Implement CRUD (Create, Read, Update, Delete) operations for products and orders (S1, S3, S16)

• Acquire skills in using SQLite to manage and query relational data efficiently (K10, S3)

• Be comfortable with SQL syntax and how to use SELECT and INSERT queries (K10. S3)

React

• Gain proficiency in using React to create dynamic and responsive user interfaces (K7, S2)

• Understand the use of state management in React to handle the shopping cart functionality (K11, S10)

Authetication

• Learn how to handle user registration, login, and logout functionality securely (K8, S17, B5)

• Understand the principles of authentication and authorisation in web applications (K8, S17)

• Develop strategies to mitigate security threats such as Cross-site Request Forgery (CSRF) attacks (K8, S5, S13, B3, B5)

React

• Implement navigation between different pages using React Router (S1, S11, S12)

• Understand using the context API and how it can help with complicated state management in React (K7, S1, S16)

• Have working knowledge of the useReducer hook and how it can aid in using useContext for state management (K7, K9, S1, S7)

• W3Schools have lots of clear simple example for different types of SQL queries

• Amazing summary of the history of databases, what they are, how they work and the different types

• Summary of one of the most common ways web apps get hacked

• An example of how you might structure a project using Express & SQlite

This week focuses on building a dynamic e-commerce web application, integrating React for the frontend with a Node.js/Express backend and SQLite database. The emphasis is on creating a full-stack application with database integration and state management in React.

Workshops

Monday

Friday

Execute Program

• Finalise previous courses

Topics

• Database schema design and normalization

• SQLite database management and querying

• SQL syntax, focusing on SELECT and INSERT queries

• Implementing CRUD operations in a web application

• React component design and state management

• Building responsive and dynamic user interfaces with React

• Integrating backend APIs with React frontend

• Managing relational data in web applications

• Security considerations in database design and querying (e.g., SQL injection prevention)

Project

• Develop an e-commerce web application with the following features:

• Design and implement a SQLite database schema for products, orders, and users

• Create a React frontend that communicates with an Express backend

• Implement CRUD operations for products and orders

• Ensure proper state management for the shopping cart functionality

Additional Skills

• Database relationship modeling (one-to-many, many-to-many)

• Using foreign keys in relational databases

• Optimizing database queries for performance

• Implementing search functionality in both frontend and backend

• Error handling and data validation in full-stack applications

This week focuses on enhancing the e-commerce web application developed in the previous week by adding authentication, user-specific interactions, and improving overall security. The emphasis is on implementing secure user authentication and authorization while expanding React state management techniques.

Workshops

Get Started with AWS CDK

Execute Program

• Finish previous courses

Topics

• User authentication and authorization in web applications

• Secure handling of user registration, login, and logout

• Session management (stateless vs stateful approaches)

• Security threats and mitigation strategies (e.g., CSRF attacks)

• React Router for multi-page navigation

• Advanced React state management using Context API and useReducer

• Linking user accounts with shopping carts and order history

• Database security and user data protection

Project

Continue developing the e-commerce application with the following new features:

• Implement user authentication (registration, login, logout)

• Create user-specific shopping carts and order history

• Implement session persistence

• Secure the application against common web vulnerabilities

• Enhance React state management using Context API and useReducer

• Implement multi-page navigation using React Router

Additional Skills

• Implementing role-based access control (for admin functionalities)

Cypress

• Guide to Component Testing in Cypress

  A good start in understanding component testing

• Cypress Functions Cheat Sheet

  Your one stop shop for example with cypress React

• Commonly Used Cypress Commands

  More generic cheat sheet for Cypress

Testing

• Testing with Cypress

  Official Cypress docs. You'll find some great tutorials to get start there

• Testing with Postman

  A short video on how to make collections and writing test in Postman

DevOps

• Deploy to an EC2 instance

  A step by step guide to deploying an express server using the AWS console and SSH

• Create a security certificate for HTTPS

  Steps to setup HTTPS connections in your Express server

• National Cyber Security Center

  The 8 Principles of Secure Development & Deployment set out by the National Cyber Security Center

Project

Your project this week is continue work on the e-commerce shop you started last week and to add authentication and user specific interactions.

Spike

Before you start writing features you need to create a security plan. There should be a section in your README.md that describes how you will secure your app and mitigate different potential attacks.

Questions to consider

• Will you store session info in a token (stateless) or in your database (stateful)?

• How will you check a user’s identity (authentication)?

• How will you control what actions a user can take (authorization)?

• How will you mitigate Cross-site Request Forgery (CSRF) attacks?

Useful resources

• Session-base vs token-based authentication

User stories

As a shopper, I want to:

• Log into my account using my email and password

• Have my user session persist, so I don't have to log in every time

• Log out of my session

These User Stories from last week should be updated to be linked to a shoppers account

• Add products to a shopping cart

• View and edit items in my shopping cart

• Complete the checkout process to "purchase" products in my cart

• See confirmation when an order is placed successfully

• View previous orders and order history

• Complete checkout and payments to simulate purchasing products

Stretch user stories

As an admin, I want to:

• Log into an admin section of the site

• Add, edit and delete products

• View and export reports on site analytics

• Manage user accounts

Acceptance Criteria

• Users must log in to use site

• Each user has their own session with unique carts and order history

• Information stored about users in database is visible on site

• Using the site updates information about users on database

Stretch

• Site has admin functions

Testing

• Learn how to write unit tests, integration tests, and end-to-end tests using testing frameworks like Cypress (K12, S4, S5, S13)

• Understand the importance of code organisation, modularity, and reusability (K7, S1, S11)

• Solidify typescript skills (K7, S1, S11, S12)

• Understand the differences between development, staging, and production environments (K1, K3, K8)

Deployment

• Understand the concept of infrastructure as code (K1, K5, K7)

• Configure the necessary environment variables and settings for deployment (S10, S14)

• Understand the basic syntax of provisioning resources with AWS CDK (S10, S14, S16)

• Have good working understanding of the permissions involved when deploying on AWS, (i.e security groups) (K8, B5)

• Gain experience in deploying a full-stack web application to a cloud platform (S10, S14, B3)

• Configure the necessary environment variables and settings for deployment (S10, S14, B3)

• Understand the process of building and optimising the application for production (S10, S14, B3)

• Gain experience in using a continuous integration and deployment (CI/CD) pipeline (S10, S14, B3)

Project

Your task this week is to deploy and test the e-commerce app you have completed in the previous two weeks.

Spike

Before you start you need to create a testing and deployment plan. We would like you plan a testing strategy that will have broad coverage of your project. The tools we would like you to use to achieve this can include Cypress, Postman and the Node built in testing library.

We would also like you to deploy this project using an EC2 instance for you server and a S3 bucket to serve your static files.

Questions to consider

• What parts of the application logic are the most critical to cover with unit tests?

• How will you mock external dependencies (like databases or APIs) during unit testing?

• What are the key user journeys and flows within the application that must be covered by end-to-end tests?

• Where will the code that represents your infrastructure live and how will it be organised?

• How will you manage configuration variables for different environments (development, staging, production)?

• What are the different AWS products you will need to configure to make your deployment successful.

Acceptance Criteria

• Comprehensive Test coverage including unit, integration and end-to-end tests covering critical application logic and user flows.

• Successful deployment on an AWS.

• Documentation clearly outlines setup, deployment, and usage instructions, including API endpoints and environmental requirements.

Stretch

• GitHub Actions CI setup to automatically re-deploy when you push to main.

Testing

• Learn how to write unit tests, integration tests, and end-to-end tests using testing frameworks like Cypress (K12, S4, S5, S13)

• Understand the importance of code organisation, modularity, and reusability (K7, S1, S11)

• Solidify typescript skills (K7, S1, S11, S12)

• Understand the differences between development, staging, and production environments (K1, K3, K8)

Deployment

• Understand the concept of infrastructure as code (K1, K5, K7)

• Configure the necessary environment variables and settings for deployment (S10, S14)

• Understand the basic syntax of provisioning resources with AWS CDK (S10, S14, S16)

• Have good working understanding of the permissions involved when deploying on AWS, (i.e security groups) (K8, B5)

• Gain experience in deploying a full-stack web application to a cloud platform (S10, S14, B3)

• Configure the necessary environment variables and settings for deployment (S10, S14, B3)

• Understand the process of building and optimising the application for production (S10, S14, B3)

• Gain experience in using a continuous integration and deployment (CI/CD) pipeline (S10, S14, B3)

This week focuses on testing, deployment, and optimization of the e-commerce web application developed over the past two weeks. The emphasis is on implementing comprehensive testing strategies, deploying the full-stack application to AWS, and setting up continuous integration and deployment pipelines.

Workshops

Execute Program

• Finish previous courses

Topics

• Writing and organizing unit tests, integration tests, and end-to-end tests

• Mocking external dependencies in tests

• Understanding and configuring different deployment environments (development, staging, production)

• Infrastructure as Code concepts and implementation with AWS CDK

• AWS resource provisioning and configuration (EC2, S3, security groups)

• Environment variable management across different deployment stages

• Continuous Integration and Continuous Deployment (CI/CD) pipelines

• Optimizing applications for production deployment

• AWS permissions and security best practices

Project

• Develop a comprehensive testing strategy for the e-commerce application

• Implement tests using Cypress, Postman, and Node's testing library

• Create a deployment plan for AWS infrastructure

• Deploy the backend to an AWS EC2 instance

• Host static frontend files on an AWS S3 bucket

• Set up and configure necessary AWS resources (e.g., security groups, IAM roles)

• Implement Infrastructure as Code using AWS CDK

• Configure environment variables for different deployment stages

• Document the setup, deployment process, and usage instructions

Stretch Goals

• Set up a GitHub Actions CI/CD pipeline for automatic deployment on push to main

• Implement staging environments in addition to development and production

• Optimize application performance for production environment

Additional Skills

• Code organization and modularization for testability

• Advanced TypeScript usage in testing and deployment scripts

• Understanding of cloud architecture and best practices

• Debugging deployment issues in cloud environments

• Writing clear and comprehensive technical documentation

This week brings together all aspects of the software development lifecycle, from testing to deployment, providing a holistic view of bringing a web application to production. It emphasizes the importance of thorough testing, secure and scalable deployment practices, and the use of modern DevOps tools and techniques.

These resources are helpful extra reading that may clarify or enhance concepts you’re learning in the main curriculum.

• Despite the title this talk actually covers most aspects of web authentication in a very accessible way

• A short guide to useReducer and useContext

• How to work with cookies while you are developing

• Node based examples of the what and how of CSRF protection

• The 8 Principles of Secure Development & Deployment set out by the National Cyber Security Center

• An example of the process of setting up a CDK project

.NET

• Learn how to create and run a project in .NET (K1, K3, K5, K7, S8, S17)

• Learn C# basics (K1, K3, K5, K7, S8, S17)

• Learn to test an ASP.NET project with Swagger (K12, S5, S13)

• Learn to link .NET project with database and react (K10, S3, S17)

Working with senior devs

• Gain confidence asking external .NET mentors for help and guidance (K4, B1, B4, B6, B7, B9)

• Write PR's and clear commits for review by outside mentors. This documentation should clearly show your thought process (K4, S14, S15, B1, B4, B7, B8)

READING WEEK

.NET

.NET Tutorial - Hello World in 5 minutes

ASP.NET Core fundamentals overview

Entity Framework Core

Use React with ASP.NET Core

Object-Oriented vs. Functional Programming With C# and F#

PHP

W3Schools PHP Tutorial

Week of November 4th

.NET

Route 01. Csharp Certification

This option focuses entirely on mastering C# before diving into broader .NET concepts. The goal is for you to gain a strong command of the language and become comfortable with its infrastructure. By Week 10, you'll be able to apply what you’ve learned to a hands-on project.

To start, please register on both FreeCodeCamp and Microsoft Learn. You’ll access the learning modules via FreeCodeCamp links, which will track your progress and give you the opportunity to sit for a Microsoft Certification exam upon completion.

CSharp certification - 6 modules

The next course is not part of the certification, but it is a great short example of minimal API.

Create web apps and services with ASP.NET Core, minimal API, and .NET - 1hr 35min

Route 02. Blended C# and Infrastructure Approach

In this route, you'll combine learning C# with workshops focused on infrastructure essentials. This approach balances language fundamentals with practical infrastructure skills to give you a well-rounded foundation.

You can complete the first three C# lessons independently or through FreeCodeCamp. If you choose the FreeCodeCamp route, you’ll have the option to continue with the remaining lessons later and eventually take the Microsoft Certification exam.

Option 2.1

Write your first code using C# (Get started with C#, Part 1)

Create and run simple C# console applications (Get started with C#, Part 2)

Add logic to C# console applications (Get started with C#, Part 3)

Option 2.2

CSharp certification - 3 first modules on FreeCodeCamp

Common

Build .NET applications with C# - 3hr 14min

Create a web API with ASP.NET Core controllers - 41min

Develop an ASP.NET Core web app that consumes an API - 2hr 18min

Create web apps and services with ASP.NET Core, minimal API, and .NET - 1hr 35min

PHP. 5-Day PHP Learning Plan

Setup Required

1. Install XAMPP: https://www.apachefriends.org/download.html

2. VSCode PHP Extension: PHP Intelephense

Day 1: PHP Basics

Main Resource: Laracasts - PHP for Beginners 2023

• Episodes 1-7

  • Variables and Basic PHP Syntax

  • PHP Configuration

  • Arrays and Functions

  • Page Links

Reference: W3Schools PHP

Practice Project: Build a Temperature Converter Tutorial: https://www.w3schools.com/php/php_form_complete.asp

• Convert Celsius to Fahrenheit and vice versa

• Form handling

• Basic calculations

• Simple styling

Day 2: Database & PDO

Main Resource: Laracasts Episodes 8-14

• Database Connections

• PDO Basics

• SQL Injection Prevention

• Basic Forms