LogoLogo
  • FAC Curriculum
  • archive
    • Node & npm introduction
    • developer
      • Programming Paradigms
    • handbook
      • Asking for help
      • Coaching groups
      • Code review
      • Course rules
      • Debugging
      • Employment schedule and material delivered in FAC20
      • GitHub Workflow
      • Glossary or terms
      • Presentation Guidance
      • Equality, Diversity and Inclusion
      • Installation guide
      • Learning circles
      • Mentoring guidance
      • What to expect from your mentors
      • One-day projects
      • Pair programming
      • Portfolio
      • Questions for problem solving
      • Progress Logs
      • Final project report
      • Managing software projects
      • Project Presentations
      • Project roles
      • Projects
      • Retrospectives
      • Role Circles
      • Safeguarding policy
      • Technical Spikes
      • System requirements
      • Tech for Better
      • User Manuals
      • Wellbeing Support
      • project-docs
        • What makes a mentor?
        • Product Handover
        • Sprint Planning
        • Tech for Better Presentations
        • User Research & Usability Testing
    • foundation
      • full-stack
        • Learning Outcomes
        • project
      • testing
        • project
        • spikes
  • docs
    • Contributing to the curriculum
    • Curriculum intent
    • Curriculum process
  • src
    • About our curriculum
    • course
      • Code of Conduct
      • Docker
      • .NET and Umbraco
      • Getting started
      • Founders and Coders coursebook
      • KSB's
      • Mini projects
      • Revision checklist
      • Svelte
      • TypeScript
      • handbook
        • Software Developer Handbook
        • Software Foundation Handbook
      • precourse
        • Before you start the course
        • Installation List
      • syllabus
        • developer
          • app
            • learning-outcomes
            • project
            • schedule
            • spikes
          • introduction
            • learning-outcomes
            • project
            • resources
            • schedule
          • week00-pre-course
            • We'd like you to spend some time before starting the course working on useful fundamentals.
            • spikes
          • week01-project01-basics
            • Employability introduction
            • Homework
            • learning-outcomes
            • Week of September 9th
            • project
            • resources
            • schedule
            • spikes
          • week02-project02-chatbot
            • employability
            • Homework
            • learning-outcomes
            • Week of September 16th
            • project
            • resources
            • schedule
            • spikes
          • week03-project03-server
            • Learning Outcomes
            • Week of September 23th
            • The Amazin' Quizzer API Backend
            • resources
            • schedule
          • week04-project03-frontend
            • learning-outcomes
            • Week of September 30th
            • UI for Quizzer App
            • resources
            • schedule
          • week05-project03-test-deploy
            • Testing and deployment
            • Week of October 7th
            • project
            • resources
            • schedule
          • week06-project04-databases
            • learning-outcomes
            • Week of October 14th
            • project
            • Databases
            • schedule
          • week07-project04-authentication
            • Learning Outcomes
            • Week of October 21st
            • project
            • resources
            • schedule
          • week08-project04-test-deploy
            • Learning Outcomes
            • Week of October 28th
            • project
            • resources
            • schedule
          • week09-reading-week
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
          • week10-project05-DOTNET-intro
            • Learning Outcomes
            • overview
            • project
            • Resources
            • schedule
          • week11-project05-DOTNET-testing
            • Testing and deployment
            • Week of November 18th
            • project
            • Resources
            • schedule
          • week12-project05-DOTNET-deploy
            • Learning Outcomes
            • Week of November 25th
            • project
            • Resources
            • schedule
            • Spikes
          • week13-TFB-design
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
            • Design Week Spikes
          • week14-TFB-build
            • Learning Outcomes
            • overview
            • Project
            • DevOps Resources
            • schedule
            • Spikes
          • week15-TFB-build
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
            • Spikes
          • projects
            • in-house-design
              • Learning Outcomes
              • Project
              • Resources
              • schedule
              • Design Week Spikes
        • foundation
          • Obsolete-full-stack
            • project
          • post-course
            • Homework
            • schedule
        • portfolio
          • fruit-shop
            • learning-outcomes
            • project
            • resources
          • game
            • learning-outcomes
            • project
            • resources
          • hobby-page
            • learning-outcomes
            • project
            • resources
          • movie-data
            • learning-outcomes
            • project
            • resources
          • project-gallery
            • learning-outcomes
            • project
            • resources
          • website
            • learning-outcomes
            • project
            • JavaScript
        • tfb
          • week 1
            • Introduction (45 minutes)
            • Further reading
          • week 10
            • content
            • resources
          • week 11
            • What will we be doing this week?
            • resources
          • week 12
            • What will we be doing this week?
            • Further reading
          • week 2
            • Discover (90 minutes)
            • resources
          • week 3
            • content
            • resources
          • week 4
            • Mapping the user journey (90 minutes)
            • resources
          • week 5
            • Figma Workshop 1 (90 minutes)
            • Further reading
          • week 6
            • Figma Workshop 2 (90 minutes)
            • resources
          • week 7
            • Product pitches & Selection (90 minutes)
            • resources
          • week 8
            • content
            • resources
          • week 9
            • content
            • resources
    • learn
      • DOTNET
        • Introduction to .NET
      • auth
        • Authenticating web apps
      • database
        • Persisting data with SQLite and Node
      • dotnet-two
        • Dependency injections and interfaces in .NET
      • form-validation
        • Form validation
      • react
        • Building client-side apps with React
      • server
        • HTTP servers with Node & Express
      • typescript
        • TypeScript
    • mentoring
      • design-week
        • Analysis Workshop
        • Code planning
        • Definition Workshop
        • Discovery Workshop
        • Figma introduction
        • Usability testing
        • User Research
    • resources
      • http
        • introduction
    • workshops
      • cookie-auth
        • index
      • creating-promises
        • index
      • css-layout
        • index
      • cypress-testing
        • index
      • database-testing
        • index
      • dev-tooling
        • Developer tooling
      • dom-challenge
        • index
      • dom-rendering
        • index
      • es-modules
        • index
      • express-middleware
        • Express middleware
      • first-class-functions
        • index
      • form-validation
        • index
      • functions-callbacks-async
        • Functions, callbacks, & async JavaScript
      • git-intro
        • Introduction to Git
      • git-terminal
        • Using Git in the terminal
      • git-workflow
        • Git workflow
      • github-projects
        • GitHub Projects Workflow Workshop
      • heroku-sql-challenge
        • index
      • html-forms
        • index
      • learn-a11y
        • index
        • starter-files
          • solution
            • Accessibility solution explanation
      • learn-fetch
        • index
      • learn-integration-testing
        • index
      • learn-testing
        • Learn testing in JavaScript
      • learn-unit-testing
        • index
      • node-error-handling
        • Node error-handling
      • node-express-server
        • Node and Express HTTP server
      • node-npm-intro
        • Node & npm introduction
      • node-postgres
        • Learn Postgres with Node
      • node-scripting-challenge
        • index
      • password-security
        • index
      • promise-practice
        • index
      • react-components
        • React components
      • react-fetch
        • index
      • react-forms
        • React forms
      • react-refactor-classes
        • index
      • react-state-effects
        • React state & effects
      • real-world-fetch
        • index
      • scope-challenge
        • Scope debugging challenge
      • semantic-html
        • index
      • server-side-forms
        • Server-side forms
      • session-auth
        • Session authentication
      • sql-intro
        • index
      • tdd-array-methods
        • index
Powered by GitBook
On this page
  • Project Requirements
  • Project Phases
Export as PDF
  1. src
  2. course
  3. syllabus
  4. foundation
  5. Obsolete-full-stack

project

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.

Project Requirements

Core Requirements

  1. Server-Side Setup:

    • Initialise a Node.js project using Express.

    • Serve a static web page that will be the front end of your application.

  2. Static Web Page:

    • Create an index.html file within a public directory.

    • This page should include placeholders where dynamic content will be displayed.

  3. 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.

  4. 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.

  5. 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.

Example structure

API mash-up application structure example

Stretch Goals

  • 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.

Additional Considerations

  • 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.

Submission Guidelines

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

  • Deploy your application to a cloud platform, ensuring it's publicly accessible.

Project Phases

Initial spike stage

Set up the basic structure of your web application and make a call to a single API.

Core project development

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.

Some API examples

Easier

  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. Corporate Buzzword API - https://corporatebs-generator.sameerkumar.website/

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

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

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

Harder

  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/

Non-AI API Mash-Up Project Ideas

  1. 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.

  2. 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-Enhanced Mash-Up Project Ideas with APIs and OpenAI

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

PreviousObsolete-full-stackNextpost-course

Last updated 1 year ago