Design / Web/Networking Platform
24 / 67

06/2023Design / Web

Networking Platform

goloco, a networking tool that keeps companies, contacts, tasks, and call notes in one workspace, with a five-slice Redux store over a token-authenticated Express/Mongoose API and Gmail integration.

╌╌╌╌

goloco is a networking tool for the job hunt. It keeps the companies you are targeting, the people you know at each, the tasks that chase them down, and the notes from every call in one workspace, instead of scattered across spreadsheets and shared folders. Built with React, TypeScript, and Redux, bundled with Vite, talking to a separate Express/Mongoose API backed by MongoDB Atlas.

Inside the goloco client, five Redux slices feed thunked axios calls, carrying a bearer token, to a separate Express/Mongoose API that persists to MongoDB and reads contact email history from Gmail.

One store holds five slices. The Redux root in store/reducers combines five reducers: user, company, person, task, and note. Each holds the authoritative client copy of one entity, written through Immer so a handler mutates a draft and Redux hands back fresh state. A company, the people at it, and the tasks and notes attached to either are read from whichever view needs them, a profile page, a list, or a modal, without threading data through props.

Every action in store/actions is an async thunk over axios, each carrying a bearer token. Sign-in posts to /api/signin; the token that comes back is kept in localStorage and attached as the authorization header on every later request, and user_reducer flips authenticated once the profile returns. The entity thunks map onto the API directly: /api/companies, /api/people, /api/tasks, /api/notes, each with create, get-one, list, update, delete, and a find?q= search. Tasks and notes are also fetched by association, so a company profile can pull every note tied to it.

Contacts carry their own email history. The person and company views call /api/emails?person= and ?company=, and the API reads Gmail through the Google APIs client, so a contact's recent correspondence sits beside the call notes on them.

On the interface itself, react-md-editor handles note bodies, react-select and react-datepicker sit in the create-task and create-person modals, and react-window keeps long people and company lists cheap to render, all styled with Bootstrap and Sass.

Built as a collaborative project with Bansharee Ireen, Yizhen Zhen, Cindy Li Wang, and Johan Cruz Hernandez.

References

  1. Project repository
  2. Live site

╌╌ END ╌╌