DevOps Assignment

This project consists of a FastAPI backend and a Next.js frontend that communicates with the backend.

Project Structure

.
├── backend/               # FastAPI backend
│   ├── app/
│   │   └── main.py       # Main FastAPI application
│   └── requirements.txt    # Python dependencies
└── frontend/              # Next.js frontend
    ├── pages/
    │   └── index.js     # Main page
    ├── public/            # Static files
    └── package.json       # Node.js dependencies

Prerequisites

• Python 3.8+
• Node.js 16+
• npm or yarn

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Create a virtual environment (recommended):

   python -m venv venv
   source venv/bin/activate  # On Windows: .\venv\Scripts\activate

3. Install dependencies:

   pip install -r requirements.txt

4. Run the FastAPI server:

   uvicorn app.main:app --reload --port 8000

   The backend will be available at http://localhost:8000

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install
   # or
   yarn

3. Configure the backend URL (if different from default):

   • Open .env.local
   • Update NEXT_PUBLIC_API_URL with your backend URL
   • Example: NEXT_PUBLIC_API_URL=https://your-backend-url.com

4. Run the development server:

   npm run dev
   # or
   yarn dev

   The frontend will be available at http://localhost:3000

Changing the Backend URL

To change the backend URL that the frontend connects to:

1. Open the .env.local file in the frontend directory
2. Update the NEXT_PUBLIC_API_URL variable with your new backend URL
3. Save the file
4. Restart the Next.js development server for changes to take effect

Example:

NEXT_PUBLIC_API_URL=https://your-new-backend-url.com

For deployment:

npm run build
# or
yarn build

AND

npm run start
# or
yarn start

The frontend will be available at http://localhost:3000

Testing the Integration

1. Ensure both backend and frontend servers are running
2. Open the frontend in your browser (default: http://localhost:3000)
3. If everything is working correctly, you should see:
   • A status message indicating the backend is connected
   • The message from the backend: "You've successfully integrated the backend!"
   • The current backend URL being used

API Endpoints

• GET /api/health: Health check endpoint

  • Returns: {"status": "healthy", "message": "Backend is running successfully"}

• GET /api/message: Get the integration message

  • Returns: {"message": "You've successfully integrated the backend!"}