Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Introduce learners to the concept of an ‘elevator pitch’
Introduce best practice to learners when pitching themselves
Introduce learners to common interview questions
Introduce best practice when answering common interview questions
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.
During this module you should be working on: Execute Program Regular Expressions
We expect you to complete Modern Javascript Level 2 by the end of Week 12
You should be focusing on meeting these learning outcomes over the three-week period. You will be tested on your learning during weekly quizzes.
Your project is to build a dynamic web application that queries at least two APIs and presents useful and/or interesting information to the user. You will be using Node.js and Express, which will involve serving a static web page, creating JSON endpoints, and generating dynamic content through both server-side and client-side code.
Server-Side Setup:
Initialise a Node.js project using Express.
Serve a static web page that will be the front end of your application.
Static Web Page:
Create an index.html
file within a public directory.
This page should include placeholders where dynamic content will be displayed.
Creating JSON Endpoints:
Implement routes in your Express server that respond to GET requests.
These routes will fetch data from external APIs and return it in JSON format.
Dynamic Content:
Write client-side JavaScript that makes requests to your server-side endpoints.
Dynamically update the static web page with the data received from these requests.
Client-Server Interaction:
Ensure that the server acts as an intermediary for API requests, handling data fetching and processing.
The client-side script should handle the presentation of data, updating the user interface based on server responses.
API mash-up application structure example
Implement error handling in both server-side and client-side code to manage failed API requests or unavailable data.
Implement tests
Enhance the user interface with CSS and interactive elements for a better user experience.
Introduce additional client-side interactivity, such as user inputs to filter or customise the data displayed.
Ensure your application's design is responsive and accessible.
Document the user journey and your application's functionality in a README file.
Securely store any API keys or sensitive information required by your server.
Host your code in a Git repository with clear documentation.
Deploy your application to a cloud platform, ensuring it's publicly accessible.
Set up the basic structure of your web application and make a call to a single API.
After establishing the basic web app framework, you'll enhance the application by integrating more complex functionalities, including multiple API calls and/or incorporating OpenAI's API.
Open AI API - https://platform.openai.com/
JokeAPI - https://jokeapi.dev/
The Dog API - https://thedogapi.com/
The Cat API - https://thecatapi.com/
Unsplash it - https://unsplash.it/
Corporate Buzzword API - https://corporatebs-generator.sameerkumar.website/
REST Countries API - https://restcountries.com/
UK Police API - https://data.police.uk/docs/
Postcode Lookup - https://postcodes.io/
Twitter API - https://developer.twitter.com/en/docs/twitter-api
Google Maps API - https://developers.google.com/maps
Spotify API - https://developer.spotify.com/documentation/web-api/
Giphy API - https://developers.giphy.com/docs/api/
GitHub API - https://docs.github.com/en/rest
The Movie DB API - https://developers.themoviedb.org/3/getting-started/introduction
The Guardian API - https://open-platform.theguardian.com/documentation/
News API - https://newsapi.org/docs/endpoints
TfL API - https://api.tfl.gov.uk/
Random UK Postcode Explorer: Develop an application that jumps to a random UK postcode and collates various information about that location. Use the Postcodes.io API to generate a random postcode and then fetch data such as weather from the OpenWeatherMap API, local crime statistics from the UK Police API, and perhaps even demographic information if available. This app could serve as an interesting way to explore different parts of the UK, offering insights into the climate, safety, and other aspects of various locales.
Entertainment and Social Media Buzz Tracker: Use The Movie DB API and Twitter API to track social media buzz around movies. Develop a platform where users can see real-time tweets about movies, gauge popularity, and view movie details like ratings, casts, and synopses. This could serve as a guide for movie enthusiasts to discover trending movies.
AI-Assisted Weather and News App: Combine OpenWeatherMap API and NewsAPI. Optionally integrate OpenAI's API to summarize news articles or generate insights based on the current weather data, like suggesting indoor activities on rainy days or outdoor events when it's sunny.
AI-Powered Social Media and Movie Insights: Use the Twitter API and The Movie DB. Optionally enhance with OpenAI's API to analyze tweets for sentiment about movies, offering insights into which movies are most loved or creating thematic summaries of social media discussions.
Intelligent Mapping and Transport Planner: Merge Google Maps API with TfL API and optionally enhance with OpenAI's capabilities. The AI could predict traffic patterns, suggest optimal routes, or offer travel recommendations based on historical and real-time data.
AI-Enhanced Recipe and Shopping Assistant: Combine Recipe Puppy with a supermarket API. Optionally use OpenAI's API to suggest recipes based on user preferences or trends and generate optimized shopping lists considering dietary needs and ingredient availability.
Community Safety App with AI Analysis: Mashup the UK Police API with Postcodes.io, and optionally enhance with OpenAI's API for crime data analysis. The AI could identify safety trends, provide tailored alerts, or offer insights into community safety based on crime statistics and location data.
Reinforce your learning by building something fun.
Q&A
Express workshop review
Server-side API mash-up project
Live code session: Dev tooling
Writing cover letters and job applications
Project planning and development
Saturday 16th March
Q&A
Non technical mock interview preparation
Project updates
Live code session:
Project planning and development
Q&A
Project group code reviews
Project presentations
How would you effectively find out where (and why) an error is occurring in your JavaScript code?
What console
methods are there other than console.log
? Can these help us debug?
What does the debugger;
statement do?
How do we use the debugger in our browser?
How can we send and receive test network requests while working on an application?
How can we inspect any requests the browser is making on an HTML page?
How can we manually send test requests outside of our browser?
How can we find out why our page doesn't look right?
How can we see and edit what elements and styles are rendered to the page?
How can we easily test how responsive our page is?
How can we debug CSS grid and flexbox layouts?