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
- Alfred Community Page
- Alfred Member Page
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
**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
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
# 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent