Scaffolding the news app

Software Development with Windsurf

Francesca Donadoni

AI Curriculum Manager, DataCamp

Scaffolding the news app

  • Scaffold a React and Node news app in Windsurf and securely set up News API key
  • Fully working template that can fetch live news updates

scaffolding_news_app1.png

Software Development with Windsurf
Software Development with Windsurf
Software Development with Windsurf
Software Development with Windsurf

Last step: Fetching updates via API

$$

  • Need to connect to a News API securely

$$

  • Storing API key using environment variables

$$

  • Two methods in Windsurf

api_call_news_04.png

Software Development with Windsurf
Software Development with Windsurf
Software Development with Windsurf

Security tips

  • API keys stay hidden within Windsurf

  • The frontend accesses them safely through environment variables

  • Remember to add the .env file to .gitignore when pushing code to GitHub

    • This prevents sensitive information from being uploaded

security_tips.png

Software Development with Windsurf
Software Development with Windsurf

Let's practice!

Software Development with Windsurf

Preparing Video For Download...