Ocean Health Index Site Clone

A website rebuilt from the original Ocean Health Index website, June 14, 2019.

By Reese Lee

Description

A website that is rebuilt from the OHI website to practice Angular.

Setup/Installation Requirements

First, clone from GitHub repo
$cd ohi-clone
$npm install
Set up your own Firebase credentials, as listed below

Firebase Setup Instructions

Login to Firebase, or create a new account
Click Create a New Project
Provide a name for this project, "OHI-Clone"
Select your country/region from the drop-down menu
Select Add Firebase to your web app
$ npm install firebase angularfire2 --save
In your tsconfig.json file, add "types": [ "firebase" ] at the bottom
Create a file named api-keys.ts at the top of your project directory, and add it to the .gitignore file
Copy and past the following information into that file, replacing all "xxxx" placeholders with information from your Firebase project overview:

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

In your app.module.ts file, copy and paste the following to replace the entire file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ParallaxBannerComponent } from './parallax-banner/parallax-banner.component';
import { FooterComponent } from './footer/footer.component';
import { NewsComponent } from './news/news.component';
import { masterFirebaseConfig } from './api-keys';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

export const firebaseConfig = {
  apiKey: masterFirebaseConfig.apiKey,
  authDomain: masterFirebaseConfig.authDomain,
  databaseURL: masterFirebaseConfig.databaseURL,
  storageBucket: masterFirebaseConfig.storageBucket
};

@NgModule({
  declarations: [
    AppComponent,
    ParallaxBannerComponent,
    FooterComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Return to your Firebase console, and go to the Database section. Select Realtime Database, and click on the Rules tab. Switch the "false" values to "true" on both properties (as seen below):

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

$firebase login (this will take you to the login page for Firebase)
$firebase init (this will take you through a series of questions, say yes to all of them)
$firebase deploy
$ng serve --o (this will automatically open the page)

Specs

Current Functionality
1. The user can view the first half of the splash page
2. The top navigation bar hosts drop-down menus
3. The jellyfish element is the same one as the official site

Functionality to be added
Hyperlink all links
Firebase implementation
Jellyfish animation
Hover effect for top nav-bar
Add footer

Support and contact details

Please contact reese.lee.cy@gmail.com if you run into any issues or have questions, ideas or feedback.

Technologies Used

JavaScript, HTML, CSS, Angular, Material, Bootstrap

License

MIT license.

reese-lee / ohi-clone