Learning Objectives

• Set up development environment (React + Flask)
• Understand the full-stack architecture
• Initialize Git repository
• Python 3.8+ installed
• Node.js 14+ installed
• Git installed and configured
• VS Code or PyCharm installed
• Create GitHub repository (Diagram)

Step 1: Initialize Flask Backend

python
Run Inline
# backend/app.py
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)  # Enable cross-origin requests
@app.route('/api/health')
def health():
    return {'status': 'ok'}
if __name__ == '__main__':
    app.run(debug=True, port=5000)

Step 2: Initialize React Frontend

bash
npx create-react-app frontend
cd frontend
npm install axios react-router-dom bootstrap

Step 3: Create React App Component

jsx
// frontend/src/App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div className="container mt-5">
      <h1>MAD1 Project</h1>
      <p>Welcome to the Modern Application Development project.</p>
    </div>
  );
}
export default App;

• Run Flask: python app.py -> check http://localhost:5000/api/health
• Run React: npm start -> check http://localhost:3000

1. CORS errors: Ensure flask-cors is installed and CORS is enabled
2. Port conflicts: Use different ports (5000 for Flask, 3000 for React)
3. Node version: Use nvm to manage Node versions

• GitHub repo with README
• Backend Flask app runs
• Frontend React app runs
• API health endpoint working Join Discord NextMilestone 2: Database Models & API Design