Chittr Microblogging Platform
Tags: octograd2020
Published: 2020-05-20 12:02:18

## Chittr
This is **Chittr**, a Twitter-like microblogging platform built in React Native for **Android** devices.

## Demo Link
https://streamable.com/50j9h7

## Link to Code
https://github.com/jppgibbs/ReactTwitter

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

This application was my first time using React-Native, and Javascript in general. I also had not built a fully featured android application before with a focus on UX, so overall it was a difficult, but extremely valuable learning experience.

## Application Structure

How the application&#39;s structure and flow was designed from the API specification

### Wireframes

The wireframes for the application went through multiple evolutions as my understanding of the application&#39;s flow grew. I made the wireframes using Adobe Xd, and they are fully viewable in a web prototype mode with all links working and have been included in the submission.

I wasn&#39;t happy with the way the new chit screen looked, as there was a lot of buttons that cluttered the design in a messy way. I also wanted to include an option for the option for the user to include their location in the chit which lead to the design changes in v2.

The drafts screen was originally planned to just have a schedule button along with posting when the draft card was tapped. The design needed to change once the need for edit and delete buttons was decided upon.

### Navigation Structure

The final navigation structure of the app is as follows:

**App (Tab Navigator)**

- **Home** (Stack)
  - Home (Main Route)
- **Post** (Stack)
  - New Chit (Main Route)
  - Camera
  - Drafts
- **Search** (Stack)
  - Search Users (Main Route)
  - View Profile
- **Account** (Stack)
  - Account (Main Route)
  - Register
  - Edit Profile
  - Edit Profile Picture

## Version Control

Throughout the project, I used Git extensively. To do this, I used the GitKraken desktop client with GitHub. To evidence this I have provided the full commit history from GitKraken below:

## Style Guide

To stick to a single consistent formatting guideline, I followed the Airbnb ([https://github.com/airbnb/javascript](https://github.com/airbnb/javascript)) style guide with the aid of the ESLint plugin for Visual Studio Code. This plugin allowed the automatic formatting of all of my code to comply with the Airbnb standard.

## Testing

My ability to test was somewhat limited by the way I had designed the application from the ground up, and online resources for testing an application built like this were not useful. In future I plan to work on getting a more complete understanding of Jest and application testing.

I created a snapshot test script (inside \_\_tests\_\_ in the app folder) that tests if the Register screen (the only screen that doesn&#39;t use async) loads as expected and a test plan for it below:

## Project Management

I opted for a Kanban style of project management using Trello. This was extremely beneficial as it allowed me to very clearly see the objectives I had in a to-do list style. Below are two screenshots of my Trello board, one halfway through development and one after development had finished, respectively:

[https://trello.com/b/CGhEWDV9/chitter-mobile-apps-dev-mmu-joseph-gibbs-16014690](https://trello.com/b/CGhEWDV9/chitter-mobile-apps-dev-mmu-joseph-gibbs-16014690)

## Additional Thoughts / Feelings / Stories


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)