SparkBytes

By Yuri Bychkov, Ethan Liu, Mario Hysa, and Simran Singh

SparkBytes is a web application dedicated to addressing two important challenges at Boston University: Food waste from over-purchasing and community food access. SparkBytes aims to solve these problems by making it possible for members of the BU community to locate and pick up free, delicious food!

Check out the website here.

Architecture Overview

Frontend

• SparkBytes was bootstrapped and built with create-vite + React + Typescript. The front end used the Ant Design library for responsive UI components.
• We used Figma for UI wireframes and general visual design prototyping.

Backend

• The backend used Firestore from Firebase to store event, user, and comment information and used Firebase Authentication to implement Google Sign-in via Google SSO, session tracking, and password recent functionality.
• We also utilized the Mapbox API for event geolocation and user travel time calculation. Check out the Mapbox documentation here.

React + TypeScript + Vite Framework Details

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})