/mock-mint

A replica of Mint.com using Angular5

Primary LanguageTypeScript

Intuit Mint Clone Using Angular

By Epicodus Independent Project - Advanced JavaScript Week 3 & 4 - 10/26/2018.

Description

The goal of this project is to rebuil a website using Angular with the following criteria:

  • The site can be divided into multiple components.

  • The project must utilize a database.

Project Planning and Specifications

The website should includes a landing page, an authentication page and a main page where the user can manage their financials.

Specifications

  • The user should be able to sign up for a new account.
  • The user should be able to sign in to an existing account.
  • The user should be able to view the balance on all connected accounts.
  • The user should be able to view spending trends.
  • The user should see a list of transactions.

Completed Features

  • The public page is available to everyone.
  • The private page is only visible to authenticated users only using an authentication guard.
  • User authentication using Firebase Google Auth.
  • Transactional data is pulled from Firebase and can be sorted using various pipes.
  • The website is deployed to Firebase at http://mock-mint.firebaseapp.com.

Setup/Installation Requirements

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Firebase Setup and Deployment

  • Create a Firebase account.
  • Create a Firebase project.
  • In the Overview area, select the "Add Firebase to your web app" option to collect your API information.
  • Install AngularFire and Firebase using npm:

npm install angularfire2@4.0.0-rc.0 firebase@^3.6.6 --save

  • Add this line to your tsconfig.json at the very end to mention Firebase:

"type":["firebase"]

  • Create a new file called api-keys.ts in the src/app directory. Then place our Firebase credentials (the information Firebase provided in that modal window), like this:

export const masterFirebaseConfig = { apiKey: "xxxx", authDomain: "xxxx.firebaseapp.com", databaseURL: "https://xxxx.firebaseio.com", storageBucket: "xxxx.appspot.com", messagingSenderId: "xxxx" };

  • Add /src/app/api-keys.ts to .gitignore.
  • In src/app/app.module.ts, import and export the following:

import { masterFirebaseConfig } from './api-keys'; import { AngularFireModule } from 'angularfire2'; import { AngularFireDatabaseModule } from 'angularfire2/database';

export const firebaseConfig = { apiKey: "AIzaSyCsXeeqQGEXp7WQAB7WU4blJmS0rCIAZaU", authDomain: "makeup-genius-702f9.firebaseapp.com", databaseURL: "https://makeup-genius-702f9.firebaseio.com", projectId: "makeup-genius-702f9", storageBucket: "makeup-genius-702f9.appspot.com", messagingSenderId: "416277350179"

  • Add these to the import array in your app.module.ts:

AngularFireModule.initializeApp(firebaseConfig), AngularFireDatabaseModule

  • Build the application before deploying:

ng build --env=prod

  • Install Firebase-tools and deploying:

npm install -g firebase-tools

firebase login

firebase init

firebase deploy

Support and contact details

Please contact us at skye@dames.es for more information and/or feedback.

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Known Bugs

  • Images on the home page panels automatically resize to 100% when a change is made to the project.
    • Attempted fix: Move the panel component stylings to styles.css.
    • Current fix: refresh the browser.

Technologies Used

  • TypeScript
  • JavaScript
  • NodeJs
  • Firebase
  • Homebrew
  • Angular CLI 1.6.5
  • Git
  • GitHub

License: MIT

Copyright (c) 2018 Skye Nguyen