NourishMap

Logo Design

Frontend Systems

Our frontend pulls data from our internal API and interfaces with a third-party API to display the locations of food markets and pantries on a map. We kept the design simple and user-friendly to make it easy for users to find the information they need. While Astro is a static site generator they also have a server side rendering feature that made it easy to create a static site has dynamically populated components.

Backend Systems

Astro allowed us to build a simple yet extensive backend system. One of features I implemented was a user authentication that allowed for the creation of new user accounts and session management. With in that system I also created a role based permission system so the primary stakeholders could manage the site without having to worry about the technical details of the site. I worked closely with members of the team to implement some of the other features such the contact and location APIs.

Database Systems

For our relational database we used the AstroDB library which allowed us to build and deploy a libSQL database. During the period of our project we used their now deprecated platform, Astro Studio, which I recently migrated to Turso. We created and use the following schema:

classDiagram
    class Role {
        +id: text
        +name: text
        +canManageUsers: integer
        +canManageRoles: integer
        +canManageMarkets: integer
        +canViewContactFormLogs: integer
        +canManageProducts: integer
    }

    class User {
        +id: text
        +name: text
        +email: text
        -password: text
        +verified: integer
        +role: text
    }

    class EmailVerification {
        +id: text
        +userId: text
        +expiresAt: integer
        -token: text
    }

    class Market {
        +id: text
        +name: text
        +address: text
        +lat: integer
        +long: integer
    }

    class Products {
        +id: text
        +name: text
        +price: integer
        +description: text
        +image: text
        +marketId: text
    }

    class ContactFormLog {
        +id: text
        +body: text
        +created: text
    }

    class Session {
        +id: text
        +userId: text
        +expiresAt: integer
    }

    class Recipes {
        +id: text
        +query: text
        +data: text
    }

    %% Relationships
    User --> Role : "role"
    EmailVerification --> User : "userId"
    Products --> Market : "marketId"
    Session --> User : "userId"

Testing

We used Vitest and Cypress for our test suites. This allowed for use to quickly create unit tests and integrate end-to-end testing. We adapted a test-driven development (TDD) methodology was tests were fully setup to prevent introducing new bugs to the production site. Since we were using AstroDB (and drizzle), a local database (found in .astro/content.db) is regenerated each time the server is run. This allowed us to create a seed file that would populate the database with needed data, and the cypress (e2e) test would run against that data. Similarly, we used vitest to mock api controllers and front end components.

Locations API Handlers:

flowchart LR
  A[Session Validation] -->|Valid Session| B[Check Permissions]
  A -->|No Session| C[Return 401: Unauthorized]
  B -->|Permission Granted| D[Proceed to Action]
  B -->|Permission Denied| E[Return 401: Unauthorized]

Products API Handlers:

sequenceDiagram
    participant User
    participant API_Handler
    participant Database

    User->>API_Handler: GET /products
    alt Products found
        API_Handler->>Database: SELECT * FROM Products
        Database->>API_Handler: [products data]
        API_Handler->>User: 200 OK, [products data]
    else No products found
        API_Handler->>User: 404 Not Found, {message: "No products found"}
    end

    User->>API_Handler: POST /products (create product)
    alt Product created successfully
        API_Handler->>Permission: hasPermission(canManageProducts)
        Permission->>API_Handler: true
        API_Handler->>Database: INSERT INTO Products (...) VALUES (...)
        Database->>API_Handler: success
        API_Handler->>User: 200 OK, {message: "Product created"}
    else Missing required fields
        API_Handler->>User: 400 Bad Request, {error: "Missing required fields", fields: {...}}
    end

    User->>API_Handler: PUT /products/:id (update product)
    alt Product updated successfully
        API_Handler->>Permission: hasPermission(canManageProducts)
        Permission->>API_Handler: true
        API_Handler->>Database: UPDATE Products SET (...) WHERE id = :id
        Database->>API_Handler: success
        API_Handler->>User: 200 OK, {message: "Product updated"}
    else Missing required fields
        API_Handler->>User: 400 Bad Request, {error: "Missing required fields", fields: {...}}
    end

    User->>API_Handler: DELETE /products/:id
    alt Product deleted successfully
        API_Handler->>Database: DELETE FROM Products WHERE id = :id
        Database->>API_Handler: success
        API_Handler->>User: 200 OK, {message: "Product deleted"}
    else Missing required fields
        API_Handler->>User: 400 Bad Request, {error: "Missing required fields"}
    end

Contact Us Page Test:

sequenceDiagram
    participant User
    participant Browser
    participant Server

    User->>Browser: Opens Contact Us page
    Browser->>Server: Sends GET request to /contact
    Server-->>Browser: Sends HTML form
    Browser->>User: Displays form

    User->>Browser: Fills out form and clicks submit
    Browser->>Server: Sends POST request with form data
    Server->>Database: Stores form data
    alt Success
        Server-->>Browser: Sends success message
        Browser->>User: Displays success message
    else Failure
        Server-->>Browser: Sends error message
        Browser->>User: Displays error message
    end

Authentication Tests:

sequenceDiagram
  participant User
  participant API_Handler
  participant Database

  User->>API_Handler: POST /auth/signup
  API_Handler->>Database: INSERT INTO Users (...) VALUES (...)
  alt Signup successful
      Database->>API_Handler: success
      API_Handler->>User: 200 OK (redirect to login page)
  else Signup failed (e.g., email already exists)
      Database->>API_Handler: error
      API_Handler->>User: 400 Bad Request, {error: "Signup failed"}
  end

Sign In

sequenceDiagram
  participant User
  participant API_Handler
  participant Database

  User->>API_Handler: POST /auth/signin (email, password)
  API_Handler->>Database: SELECT * FROM Users WHERE email = :email
  alt User found and password matches
      Database->>API_Handler: [user data]
      API_Handler->>User: 200 OK (redirect to homepage or dashboard)
  else User not found or password incorrect
      Database->>API_Handler: null
      API_Handler->>User: 401 Unauthorized (redirect to login page with error message)
  end

Deployment

The deployment process for the most part straight forward. We used Netlify and Turso (recently migrated from now deprecated Astro Studio). Whenever a pull request is made netlify would build a preview and a GitHub action that was set up for AstroDB would check if the database migrations introduced (if any) were possible. Assuming all integration were successful and the PR was approved by at least one team member and lead engineer, it can be merged to the master branch and would trigger a production deployment.