Chicha

const likeEvent = async (url) => {
  const eventId = getEventId(url);
  const mobileUrl = `https://m.facebook.com/events/${eventId}`;
  const args = [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-dev-shm-usage',
    '--single-process',
  ];
  const options = { args, headless: true };
  const browser = await puppeteer.launch(options);
  const page = await browser.newPage();
  await page.setViewport({ width: 800, height: 600 })
  if (Object.keys(cookies).length) await page.setCookie(...cookies);
  await loginToFacebook(page);
  await goToEventAndClickInterested(mobileUrl, page);
  await page.waitFor(1500);
  browser.close();
};

const goToEventAndClickInterested = async (mobileUrl, page) => {
  await page.goto(mobileUrl, { waitUntil: 'networkidle2' });
  const links = await page.$x("//a[contains(., 'Interested')]");
  await links[0].click();
};

const checkIfLoggedIn = async (page) => {
  if (await page.$('#pass')) return false;
  else return true;
};

const loginToFacebook = async (page) => {
  try {
    await page.goto('https://www.facebook.com/login', { waitUntil: 'networkidle2' });
  } catch (error) {
    console.log('error navigating to Facebook login');
  }
  const isLoggedIn = await checkIfLoggedIn(page);
  const isLoggedIn = true;
  if (!isLoggedIn) {
    await page.type('#email', FB_USERNAME, { delay: 1 });
    await page.type('#pass', FB_PASSWORD, { delay: 1 });
    await page.click('#loginbutton');
    await page.waitFor(2000);
    await writeCookies(page);
  }
};

const writeCookies = async (page) => {
  const currentCookies = await page.cookies();
  fs.writeFileSync('./cookies.json', JSON.stringify(currentCookies));
}

Design

Previously I've used Sketch but for this project decided to try Figma for wireframing:

The colors are inspired by Peruvian chicha street art:

For typefaces I used Roboto Slab (serif, titles), Open Sans (sans serif, text) and Material Design (icons). I mixed and matched the following CSS custom properties to create light and dark modes:

:root {
  --near-black: #212121;
  --gray-primary: #565656;
  --gray-lighter: #b2b2b2;
  --gray-lightest: #e4e4e4;
  --near-white: rgba(255, 255, 255, 0.9);
  --yellow-primary: #fef200;
  --yellow-lighter: #ffff8b;
  --pink-primary: #ee2B7a;
  --blue-primary: #59c7de;
  --blue-primary-faded: rgba(89, 199, 222, 0.2);
  --blue-lighter: #7fd5e6;
  --blue-lighter-faded: rgba(127, 213, 230, 0.6);
  --blue-lightest: #ccfcff;
  --heavy-shadow: rgba(0, 0, 0, 0.4);
  --light-shadow: rgba(0, 0, 0, 0.1);
  --white-shadow: rgba(255, 255, 255, 0.15);
}

body.light {
  --bg-color: white;
  --text-color: var(--near-black);
  --text-gray: var(--gray-primary);
  --button-bg: white;
  --control-bg: var(--near-white);
  --blue-bg: var(--blue-primary-faded);
  --light-line: var(--gray-lightest);
  --shadow: var(--light-shadow);
}

body.dark {
  --bg-color: var(--near-black);
  --text-color: var(--near-white);
  --text-gray: var(--gray-lighter);
  --button-bg: var(--near-white);
  --control-bg: var(--near-white);
  --blue-bg: var(--blue-lighter-faded);
  --light-line: var(--gray-primary);
  --shadow: var(--white-shadow);
}

export default class DragToResizeDrawer extends Component {
  state = { isResizing: false, marginTop: 350 };

  isTouchOnHandle = (clientY) => {
    const distanceBelowHandle = clientY - this.state.marginTop;
    if (distanceBelowHandle < 40) return true;
    else return false;
  }

  onTouchStart = (e) => {
    const { clientY } = e.touches[0];
    const touchIsOnHandle = this.isTouchOnHandle(clientY);
    if (touchIsOnHandle) this.setState({ isResizing: true })
  }

  onTouchMove = (e) => {
    const { isResizing } = this.state;
    const { clientY } = e.touches[0];
    const maxTopMargin = window.innerHeight * 0.8; // map container height is 80vh;
    const marginTop = Math.max(0, clientY < maxTopMargin ? clientY : maxTopMargin );
    if (isResizing) this.setState({ marginTop });
  }

  onTouchEnd = (e) => this.setState({ isResizing: false })

  componentDidMount = () => {
    document.addEventListener('onTouchStart', this.onTouchStart);
    document.addEventListener('onTouchMove', this.onTouchMove);
    document.addEventListener('onTouchEnd', this.onTouchEnd);
  }

  componentWillUnmount = () => {
    document.removeEventListener('onTouchStart', this.onTouchStart);
    document.removeEventListener('onTouchMove', this.onTouchMove);
    document.removeEventListener('onTouchEnd', this.onTouchEnd);
  }

  render() {
    const { marginTop } = this.state;
    const dragHandleStyle = { marginTop };
    const draggerStyle = {
      marginTop: marginTop + 20,
      overflow: this.state.isResizing ? 'hidden' : 'scroll',
      paddingBottom: marginTop + 70,
    }
    return (
      <div className='drag-to-resize-container' onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove} onTouchEnd={this.onTouchEnd}>
        <div className='drag-handle' style={dragHandleStyle}><i className='material-icons'>drag_handle</i></div>
        <div className='dragger' style={draggerStyle}>{this.props.children}</div>
      </div>
    );
  }
}

QR Codes

Users earn points by sharing events and voting, and can then redeem them for offers at local businesses.

The QR code encodes a coupon ID which may be scanned by an authorized merchant. When the merchant scans the QR code, the encoded coupon ID is read and sent to the server, which checks to ensure the code is valid. Scan dates are stored in the database to prevent the same QR code being used more than once.

API routes

As noted, Chicha has models for User, Event, Vote and Offer with back end Express routing that receives request from the front end React app that allow for CRUD – create, read, update and delete – operations. Below is the code for the front end API service; for the back end API endpoints check my API repository on GitHub.

import axios from 'axios';

class ApiClient {
  constructor() {
    this.apiClient = axios.create({
      baseURL: process.env.REACT_APP_BACKEND_URI,
      withCredentials: true,
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
    });
  }

  whoami = () => this.apiClient.get('/whoami');
  signIn = (body) => this.apiClient.post('/signin', body);
  logout = () => this.apiClient.get('/logout');

  register = (user) => this.apiClient.post('/users', user);
  getUser = (userId) => this.apiClient.get(`/users/${userId}`);
  editUser = (userId, body) => this.apiClient.put(`/users/${userId}`, body);
  deleteUser = (userId) => this.apiClient.delete(`/users/${userId}`);
  getHeavies = () => this.apiClient.get('/users/heavies');

  addCoupon = (userId, body) => this.apiClient.patch(`/users/${userId}/coupons`, body);
  getUserWithCoupon = (couponId) => this.apiClient.get(`/users/find?coupon=${couponId}`);
  redeemCoupon = (userId, couponId) => this.apiClient.patch(`/users/${userId}/coupons/${couponId}`);
  getRedeemedCoupons = (partnerId) => this.apiClient.get(`/users/coupons/find?partner=${partnerId}`)

  getOffer = (offerId) => this.apiClient.get(`/offers/${offerId}`);
  getOffers = () => this.apiClient.get('/offers');

  addEvent = (body) => this.apiClient.post('/events', body);
  getEvent = (eventId) => this.apiClient.get(`/events/${eventId}`);
  getEvents = () => this.apiClient.get('/events');
  editEvent = (eventId, body) => this.apiClient.put(`/events/${eventId}`, body);
  deleteEvent = (eventId) => this.apiClient.delete(`/events/${eventId}`);
  searchEvents = (query) => this.apiClient.get(`/events/search?query=${query}`);

  createVote = (body) => this.apiClient.post('/votes', body);
  getVotes = () => this.apiClient.get('/votes');
  changeVote = (voteId, body) => this.apiClient.put(`/votes/${voteId}`, body);
  removeVote = (voteId, eventId, direction) => this.apiClient.delete(`/votes/${voteId}?eventid=${eventId}&direction=${direction}`);
}

const apiClient = new ApiClient();
export default apiClient;