Think Geek Site Clone

A clone of everyone's favorite novelty shop, 10/19/18

By Luke Vandekieft

Description

What's better than yet another novelty mug gift? A novelty mug gift shaped like a Koopa shell! Think Geek is your one-stop gift shop for that special someone who you kind-of know. You may not know what you coworker needs but you can say with certainty what they want, and that thing is a snack bowl shaped like Chewbacca.

In cloning this site I'm not only paying homage to my go-to Christmas shopping hub but also testing out my chops with Angular & Firebase. Different site components will be displayed in separate components and the final product will be available to view on a site other than GH Pages. If you have any suggestions or commentary on how my use of these tools could be improved I'm all ears!

Clone site:

Original site:

Setup/Installation Requirements

Live site is at https://thinkgeek-clone.firebaseapp.com/

To download & edit do the following:

Get file from Github.

$ git clone https://github.com/lukevandekieft/think-geek-clone.git

Install NPM (node package manager) as needed - instructions can be found at https://www.npmjs.com/get-npm .
Install necessary webpack dependencies for project.
```
$ npm install
```

Create file src/app/api-keys.ts and include the following. You will need to get the API key and sender ID from me.

export const masterFirebaseConfig = {
    apiKey: "[YOUR KEY]",
    authDomain: "thinkgeek-clone.firebaseapp.com",
    databaseURL: "https://thinkgeek-clone.firebaseio.com",
    projectId: "thinkgeek-clone",
    storageBucket: "thinkgeek-clone.appspot.com",
    messagingSenderId: "[YOUR ID]"
  };

Set up local dev server and then open page at http://localhost:4200/ .
```
$ ng serve
```

Specs

Site is deployed to Firebase and can be readily viewed there.
Page contains various Angular components that populate and nest independently (navbar, content, & footer bar, all with sub-components).
Shopping & link content come primarily from Firebase rather than statically saved images & info.
Links and image references can change dynamically based on database info.
Components stack and interact appropriately, with Sass variables and local CSS applied at the correct levels.
All page hyperlinks are active and lead to original site destinations. These hyperlinks are stored and organized on Firebase.
Stretch goal: have functioning social media links in bottom bar and Instagram sections.
Stretch goal: add more content to the shopping section.
Stretch goal: make functioning search bar.

Technologies Used

Angular Framework
HTML
JavaScript
CSS
Sass
Firebase

Support and contact details

If you have any concerns or suggestions please contact Luke Vandekieft at vandekie@gmail.com

License

This software is licensed under the MIT License.

lukevandekieft/thinkgeek-clone