Code Monkey home page Code Monkey logo

kingpin-app's Introduction

kingpin-app

Skateboarding app to find parks and other skaters in Toronto. Let others know what you're working on and where to find you online!

Follow development progress on here: https://trello.com/b/dXjchpEa/skateboarding-app

Local Setup

Requirements:

  • Node v12.13.1. Use nvm to help easily manage your Node versions!
  • Yarn Classic v1.22.0. Get it from here
  • Expo CLI v3.22.1+. If it's your first time using Expo, its installation (including dependency installation for mobile simulators) are included in their Getting Started Docs.

    Note: Mac users will need to get watchman as well! It's mentioned in the docs!

  • If you want to test the app directly on your phone, get the Expo Client app installed on your device! Find it on iOS or Android.

Once all of the above is setup and installed:

  1. Clone this repo and navigate to it.
  2. Run yarn start. This will open a browser with a helpful Expo dashboard to monitor and run simulators of the app.
  3. On the left side control panel, choose your mobile simulator or open up your phone's QR scanner to see the app in action!

Storybook Development

This app also includes Storybook which is viewable in app! (Note to self: Hide Storybook in production and make sure storybook code is removed from production if it's included!) The process for Storybook + React Native is a little tedious where you need to require each story directly and reload the app... To help streamline that a bit, storybook reloader is included. Here's the steps to add and view these new stories:

Note: Storybook + React Native only supports old storybook format. Read more about this at the bottom the the "Basic Story" Section here.

  1. Add a story anywhere within ./src. It must end in *.stories.js, like Details.stories.js.
  2. Run yarn loadstories. This will auto-generate all paths to all stories anywhere within ./src.
  3. Have your app running in simulator or on device and refresh/reload it (Command + R on iOS simulator, or via pressing "Reload" in the in-app dev menu). You should now see the new stories!

Debugging

You'll need to React Native Debugger standalone configured to Expo, you can read official docs here. It's neat because if comes with React Dev Tools and Redux Dev Tools!

  1. Install React Native Debugger by running brew update && brew cask install react-native-debugger.
  2. Run app in simulator.
  3. Open in-app dev menu and tap "Debug Remote JS". React Native Debugger should open up on it's own and be connected to the app!

If for some reason the Debugger is not opening/not connecting, kill the simulator and Expo processes. Try clearing watchmen with watchman watch-del-all and restart Expo with yarn start -c. Re-try steps 1-3 and it should be working!

Testing

To run and watch all tests, you can run yarn test. To do the same with debug on, run yarn testdebug.

Other Helpful Dev Notes

  • Absolute imports are setup via babel-plugin-module-resolver. You can find and edit its configuration in babel.config.js
  • To fully clean Expo + watchman, kill Expo then run watchman watch-del-all. Then restart Expo by running yarn start -c. Source

kingpin-app's People

Contributors

brandensoropia avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.