Giter Site home page Giter Site logo

devintent / rapid-mvp-workshop Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 0.0 4.94 MB

Home Page: https://rapid-mvp-workshop.web.app

TypeScript 87.22% HTML 1.81% SCSS 10.97%
angular firebase rxjs workshop ngx-charts d3js angular-material material-design

rapid-mvp-workshop's Introduction

Introduction

This workshop is designed to help you learn how to use a set of Angular tools for prototyping and building functional MVPs.

Firegrow

The theoretical product that we'll be building in this workshop is Firegrow. This product is designed to solve a problem that many new parents encounter. They need to keep track of the growth of their children.

There are many free apps that do this currently, but the usability and user experience of these apps is often frustrating. These apps could also disappear at any time, taking the data with them. Additionally, they require you to send off data about your children to some unknown company's servers. Deploying your own version of this this app, enables you to store the data in a database that you control and gives you freedom to add features or tweak the UX.

Finally, this seemed like a really good fit for an MVP workshop because the concept is easy for most anyone to grasp and it exercises the key features found in many business applications (i.e. forms, charts, etc.). You should be able to extend this application and change just a few concepts to create a whole new app that tracks something like meals, workouts, writing sessions, meditation, etc.

Phase 1

In the first phase, we'll just focus on building out the interaction and the UI. We'll use mock data and localStorage to simulate a database so that we can stay focused on the design, layout, and interaction. In this phase, we'll cover some of the following technologies:

  1. Angular CLI
  2. Angular Material
  3. Angular Flex Layout
  4. HTML 5 localStorage
  5. Angular Reactive Forms
  6. ngx-charts (to visualize data with D3.js)

Phase 2

In the second phase, we'll get more functional by adding features from Firebase to allow us to deploy the app, attach a database, add user authentication, and enable storing files. In this phase, we'll cover some of the following technologies:

  1. Firebase Hosting
  2. AngularFire2
  3. Firebase Realtime Database
  4. Firebase Auth
  5. Firebase Cloud Storage

Start the Tutorial

  1. Open Getting Started
  2. Follow the guidance in each step
  3. Use the link at the end of each step to move to the next step

rapid-mvp-workshop's People

Contributors

dependabot[bot] avatar gitbook-bot avatar splaktar avatar

Stargazers

 avatar  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.