Giter VIP home page Giter VIP logo

alfred.gui's Introduction

Alfred.GUI

Build Status Issue Count Stories in Ready Stories in Ready

Presentation

Alfred is a community managing application. Its purpose is to facilitate the tasks of planning and monitoring the work of a group of people. It also comes with additional features inspired from the agile world such as displaying backlog, settings goals and reporting KPIs

  • Alfred Overview Page

ScreenShot

  • Alfred Community Page

ScreenShot

  • Alfred Member Page

ScreenShot

Solution Details

This repo contains the front end part of Alfred. If you are looking for the backend, you can find it here https://github.com/mseknibilel/Alfred

Quick start

**Make sure you have Node version >= 6.0 and NPM >= 4

# clone our repo
git clone https://github.com/mseknibilel/Alfred.GUI.git

# change directory to src repo
cd Alfred.GUI\src

# install the repo with npm
npm install

# start the server
npm start

go to http://localhost:3000 in your browser

File Structure

I use the feature approach in my project. It helps keep related code at the same place and help new comers understand the logic of the application. A feature is group of components and services working together to fulfill a certain part of the application. Here's how it looks:

Alfred.GUI/src
 ├──config/                        * our configuration
 |   ├──helpers.js                 * helper functions for our configuration files
 |   ├──mocha-test-shim.browser.js * mocha testing shim for browser environment
 |   ├──mocha-test-shim.node.js    * mocha testing shim for node environment
 |   ├──webpack.common.config.js   * webpack common for debug and release environment
 │   ├──webpack.common.test.js     * webpack common for test environment
 │   ├──webpack.config.dev.js      * webpack specific config for dev environment
 │   ├──webpack.config.prd.js      * webpack specific config for production environment
 │   ├──webpack.test.browser.js    * webpack specific config for browser testing environment
 │   └──webpack.test.node.js       * webpack specific config for node testing environment
 │
 ├──tasks/                         * our browser sync tasks
 |   ├──debug.js                   * start app in dev mode
 |   ├──release.js                 * start app in release mode
 │   └──test.js                    * start testing in browser mode
 │
 ├──app/                           * our source files that will be compiled to javascript
 |   ├──main.ts                    * our entry file
 |   ├──main-aot.ts                * our entry file in AOT mode
 │   │
 |   ├──index.html                 * Index.html: where we generate our index page
 │   │
 |   ├──polyfills.ts               * our polyfills file
 |   ├──vendor.ts                  * our vendor file
 │   │
 |   ├──app.module.ts              * our app module file
 |   ├──app.component.ts           * our main component file
 |   ├──app.component.html         * our main component's template file
 |   ├──app-routing.module.ts      * our routing module file
 │   │
 │   ├──artifact/                  * artifact features folder
 │   ├──common/                    * common features folder
 │   ├──community/                 * community features folder
 │   ├──member/                    * member features folder
 │   ├──dashboard/                 * dashboard features folder
 │   │
 │   └──assets/                    * static assets are served here
 │       └──img/                   * our list of member img
 │
 │
 ├──tslint.json                    * typescript lint config
 ├──tsconfig.json                  * typescript config used with webpack
 ├──tsconfig-aot.json              * typescript config used in AOT mode
 └──package.json                   * what npm uses to manage it's dependencies

Npm scripts

# development
npm start

# test in node
npm test:node

# test in browser
npm test:browser

# report test coverage
npm run report

# generate coverage report in html
npm run coverage

# production (jit)
npm release

# compile in AoT mode
npm run compile:aot

# Build AoT
npm run build:aot

# build then run AoT bundle locally
npm run release:aot

alfred.gui's People

Contributors

bilelmsekni avatar waffle-iron avatar

Stargazers

 avatar

Watchers

 avatar  avatar

alfred.gui's Issues

/dashboard doesn't work

Given browser displaying /dashboard page
When user navigates manually to /communities
then response is Cannot GET /communities

Webpack

replace gulp with webpack

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.