Chittr
This is Chittr, a Twitter-like microblogging platform built in React Native for Android devices.
Demo Link
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'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'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'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) 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'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
Top comments (0)