Git Product home page Git Product logo

hockey-club's Introduction

Stream One Final Project - Castlebar Hockey Club

Overview

The aim of this website

Displays club information and images to websites visitors. Gives visitors the aility to enquire for membership or login if they are already a member. Using HTMl5, CSS and Bootstrap, the website is aimed to be used on multiple browsers and devices.

How does it work

This app uses JSON Web Tokens to authenticate users and keep them logged in. All the data is consumed from an API hosted on Heroku using AngularJS. The site is styled with Bootstrap.

Features

  • Navigation between main pages.
  • Enquiry Form.
  • User Login. (Username + password stored in local storage)
  • Images Gallery Carousel.
  • 5 Team Pages.
  • Likes Counter (Likes stored in local storage)
  • Angular Material - Used for datepicker on IE and Mozilla as date types are unsupported on these browsers.

Features I Would Like To Add.

  • User Based Features
    • Ability to add images and details to the carousel.

Tech Used

Some the tech used includes:

  • AngularJS
    • AngularJS is used to in app to handle the routing, storage. Created the Controllers, Factory and Custom Directives
  • Bootstrap
    • Bootstrap is used to give a responsive, simple design approach in the application/website. Also used the framework for the Media Gallery carousel and the accordians on each of the team pages for the team photos.
  • npm
    • We use npm to help manage some of the dependencies in our application.
  • bower
    • Bower is used to manage the installation of our libraries and frameworks.
  • jQuery
    • Used jQuery modals for login.
  • Sweet Alerts
    • Sweet Alerts are in use on the Enquiry Form and the Login Modal.
  • [Angular Material] (https://material.angularjs.org/latest/)
    • Angular Materials were used in for date types on browsers that don't support date types.

Contributing

Getting the code up and running

  1. Firstly you will need to clone this repository by running the git clone <project's Github URL> command
  2. After you've that you'll need to make sure that you have npm and bower installed
  3. You can get npm by installing Node from here
  4. Once you've done this you'll need to run the following command: npm install -g bower # this may require sudo on Mac/Linux
  5. Once npm and bower are installed, you'll need to install all of the dependencies in package.json and bower.json
npm install

bower install
  1. After those dependencies have been installed you'll need to make sure that you have http-server installed. You can install this by running the following: npm install -g http-server # this also may require sudo on Mac/Linux
  2. Once http-server is installed run http-server -c-1
  3. The project will now run on localhost
  4. Make changes to the code and if you think it belongs in here then just submit a pull request

Credit

  • I have used images I sourced with google searches.
  • With the paragraphs for each of the teams, I copied some mission statements from random teams across the world.
  • In this README file, I copied the Contributing & How Does It Work section from the to_do application.
  • I have used the UserService from the To_Do application taught on the AngularJS section of Stream 1.

hockey-club's People

Contributors

horan5034 avatar

Watchers

 avatar  avatar

Forkers

nishant8bits

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.