GOECHA / habitual

ReactNative App

Table of Contents 🪷

• Introduction
• Learning Goals
• Technologies and Tools
• Illustrations & Demo
• Project Reflections
• Roadmap
• Deployed Page
• Set Up
• Contributors
• Sources
• Project Specs

Introduction

• Habitual is an application built in React Native, based in IOS. This is an application that allows a user to view a random mantra and choose to save the mantra to a list within the application for a daily dose of positive vibes.

Learning Goals

• Gain competency with React Native fundamentals
• Create a multi-page UI/UX using React Native Navigation
• Create a REST API in Express

Technologies and Tools

• ReactNative
• npm
• Node.js
• Cypress Testing
• Express API
• ReactPlayer
• GitHub Projects
• Figma

Illustrations and Demo

Home Screen Display

---

Modal Display

---

Favorite Quotes Display

---

Checklist Display

---

Calendar View Display

---

Demo

Screen.Recording.2022-09-20.at.2.20.41.AM.mov

Wire Frame

Project Reflections

Wins

• Successfully consumed API data
• Founded fundamentals in React-Native
• Implemented best practices
• Successful use of React Native Modal
• Successful use of React Native Carousel
• Creating Express API
• Working with React Native Tab Navigation
• Icon design with Adobe Illustrator
• Wireframing design for ios UI/UX to scale with Figma

Challenges

• Sourcing accurate documentation for React Native
• Accurately maintianing flow of data with Modal/Carousel
• Accurately rendering modal for multiple different tiles

Roadmap

Future features could include:

• Functioning carousel tile with link for creating a daily checklist
• Chart to display habit-making trends
• Calendar to track and guide habit-making daily, weekly, and monthly

Deployed Page

Visit the published site here

Set Up

1. Fork this repo
2. Clone the repo to your local machine
3. cd into the root of the project directory
4. Run npm install
5. Run npm start
6. Download Expo Go app

---

7. Upon start you will see a QR code in the command line.

8. Using your smart phone, scan the QR code and open the app in the Expo Go Simulator on your computer or Expo Go App on your device ----

Please do the following to run API:

****** API has been deployed, no need for local server ******

1. Clone down https://github.com/GOECHA/mantras-api
2. npm install
3. node server.js

Contributors

• Shauna MacFarlane-Okongo | LinkedIn

• Maia Cochran | LinkedIn

• Chantal Goethals | LinkedIn

Sources

• MDN
• YouTube
• W3Schools
• React Native Docs
• Medium
• React Native Linear Gradient

Project Specs

• The project spec & rubric can be found here