EggChat

The Basics

EggChat is an app that allows for forwarding messages, similar to chain emails. It was written with Node and Mongo for the backend and React Native for the frontend.

The team and I built EggChat as a way to build a complete mobile app including front-end and back-end components. It was one of the first apps that I worked on which contained both a strong front-end and back-end component.

I was responsible for creating the front end application, which can be seen below.

Screenshot of EggChat

EggChat User Flow

User:

  • Creates a post
  • Forwards to another user
  • That user can forward the post again to another user

EggChat Documentation

A core aspect of the project was creating documentation to potentially help future students learn React Native.

The documentation for the project is available at https://anims1.docs.bz/.

Designing EggChat

The design for the app makes extensive use of curved borders and is loosely based on this post from Dribbble, especially for having curved borders around the image.

Many of the other elements are handled by React Native. For example, there is a natively rendered tab bar at the bottom of the page. In addition, modal pages contain native navigation bars, which allows for the swiping gesture on iOS devices and the back button on Android to work as the user would expect.

Color Scheme

Primary Color

Buttons

Secondary (White)

Lessons Learned

During the process, I learned several skills both technical and leadership-wise.

Technical

  • Designing an app in Adobe Illustrator, including exporting CSS
  • Building an app using React Native and React Native CLI from the ground up
  • Understanding user design tradeoffs as pertaining to mobile applications
  • Effective testing procedures to document successes and failures
  • Google Play deployment and store creation (Alpha Track Only)

Leadership

  • Kanban-style project management in Microsoft Planner
  • Using Sharepoint for organization
  • Organizing integration between front-end and back-end systems