Coastside Amateur Radio ClubCoastside ARC

System Infrastructure Workflow

[Frontend Browser] 
    │
    ├── 1. POST /api/submitDues (NextJS Proxy) ──> [Main Backend (5000)]
    │                                                    │ (Saves pending record)
    │                                                    ▼
    │   <─── Returns generated track token ──────────────┘
    │
    ├── 2. POST /api/orders ─────────────────────> [PayPal Backend (5556)]
    │                                                    │ (Calls PayPal API)
    │                                                    ▼
    │   <─── Returns secure PayPal Order ID ─────────────┘
    │
    ├── 3. Pop-up opens, user clicks pay.
    │
    └── 4. POST /api/orders/:id/capture ─────────> [PayPal Backend (5556)]
                                                         │ (Finalizes payment)
                                                         ▼
                                                    [Main Backend (5000)]
                                                         │ (Updates MySQL status)
                                                         ▼
                                                    [Database Updated]
  

1. Overall Architecture: Monolithic vs. Distributed

This demonstration project utilizes a distributed architecture, separating the frontend and backend into distinct applications. This approach offers several advantages:

• Scalability: Frontend and backend can be scaled independently.
• Maintainability: Clear separation of concerns makes development and debugging easier.
• Technology Flexibility: Different technologies can be used for each part (e.g., Python for backend, JavaScript for frontend).
• Team Collaboration: Separate teams can work on frontend and backend simultaneously with minimal conflicts.

2. Frontend: Next.js and React

The user interface (UI) of this website is built using Next.js and React.

• React: A JavaScript library for building user interfaces. It allows for creating reusable UI components and efficiently updates and renders components when data changes.
• Next.js: A React framework that enables powerful features like:
  • Server-Side Rendering (SSR): Pages are rendered on the server before being sent to the client, improving initial load performance and SEO.
  • Static Site Generation (SSG): Pages can be pre-rendered at build time, leading to extremely fast page loads for static content.
  • File-system based Routing: Pages are automatically routed based on their file names in the src/app directory (App Router).
  • API Routes: Next.js allows you to create API endpoints directly within your Next.js project. For this demo, we use a separate Express backend for clarity.
• Components: The frontend is composed of various React components (e.g., Header, Footer, SideMenu, and individual page components) that encapsulate UI logic and render specific parts of the page.
• Navigation: The left-side menu uses Next.js's Link component for client-side navigation, which preloads pages for a smooth user experience without full page reloads.

3. Backend: Node.js and Express.js

The server-side logic and API for this website are handled by Node.js and Express.js.

• Node.js: A JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. It's ideal for building fast and scalable network applications.
• Express.js: A fast, unopinionated, minimalist web framework for Node.js. It simplifies the process of building robust APIs and web applications by providing:
  • Routing: Handles different HTTP requests (GET, POST, etc.) to specific URL paths.
  • Middleware: Functions that have access to the request and response objects, and the next middleware function in the application's request-response cycle.
  • API Endpoints: Exposes data or functionality to the frontend through RESTful APIs (e.g., /api/hello, /api/data).
• CORS (Cross-Origin Resource Sharing): Configured in the Express backend to allow the Next.js frontend (running on a different port) to make requests to the backend API securely.

4. Data Flow (Frontend-Backend Interaction)

When the frontend needs data (e.g., a list of items), it makes an HTTP request (using ‘fetch’ or a library like Axios) to a specific API endpoint exposed by the Express.js backend.

1. The user interacts with the Next.js frontend.
2. The frontend (a React component) initiates a ‘fetch’ request to an Express.js API endpoint (e.g., http://localhost:5000/api/data).
3. The Express.js backend receives the request, processes it (e.g., retrieves data from a database), and sends a JSON response back to the frontend.
4. The Next.js frontend receives the JSON data and updates its React components to display the information to the user.

This clear separation allows for independent development and deployment of both parts of the application.

5. PayPal Specific Details

A standard PayPal interface works via the PayPal JavaScript SDK, which splits processing into two main stages: Creating the Order and Capturing the Payment.

This architecture protects data by letting PayPal securely handle sensitive money transfers. Here is the step-by-step breakdown of how the frontend and backend communicate: