The following work was delivered as part of the coursework of the Full-Stack Web Development Immersive course @ General Assembly, London (#WDI31) and is my second full-stack application after 6 weeks of classes, this time working also with Angular and APIs!
To develop a full-stack application that pulls 3rd party digital currency data and presents them in different ways as well as offering to a registered user a self-publishing functionality.
###Project Plan & Review
Immediately after the initial planning phase, I decided to hold off any dev work so that I can go thoroughly through all the notes & classwork including those of the previous module. Even though this blanked out two days of work, it helped me catch up quickly with fewer erros and cleaner code.
The initial plan was as follows:
The public access of the project and github repository are at Heroku and Github respectivelly.
###Audience - Who is it for? With the planned additional features the app aims to appeal to
- General audience with an interest in cryptocurrencies
- Professionals seeking additional strategic insight into the industry dynamics
###User Stories - What do they want? Definitions:
- Visitor(V) is defined as someone who visits visits & interacts with the website without registering and loging in
- User(U) is defined as someone who visits visits & interacts with the website while logged in.
The basic User Stories backlog includes:
- As a VU i want to see the a summary of the financial performance of all currencies
- As a VU I want to see more info about a specific currency
- As a VU i want to see insightfull charts and visuals
- As a VU I want to access industry articles
- As a U I want to publish my own articles
- As a U I want to access additional Price & Industry information
- As a U I want to see the calendar of upcoming ICOs
###Wireframes - What could it look like?
###Technology Stack The MEAN technology stack was used for this application and more specificaly for the back-end: "dependencies": { "bcrypt": "^1.0.3", "bluebird": "^3.5.1", "body-parser": "^1.18.2", "express": "^4.14.0", "express-flash": "^0.0.2", "express-session": "^1.15.6", "jsonwebtoken": "^8.1.1", "method-override": "^2.3.10", "mongoose": "^5.0.1", "morgan": "~1.6.1", "request-promise": "^4.2.2" }, "devDependencies": { "babel-cli": "^6.18.0", "babel-preset-es2015": "^6.18.0", "bower": "^1.8.0", "browser-sync": "^2.17.6", "event-stream": "^3.3.4", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-babel": "^6.1.2", "gulp-clean": "^0.3.2", "gulp-concat": "^2.6.0", "gulp-htmlhint": "^0.3.1", "gulp-htmlmin": "^3.0.0", "gulp-if": "^2.0.2", "gulp-imagemin": "^3.1.1", "gulp-inject": "^4.1.0", "gulp-jshint": "^2.0.2", "gulp-minify-css": "^1.2.4", "gulp-nodemon": "^2.2.1", "gulp-notify": "^2.2.0", "gulp-order": "^1.1.1", "gulp-plumber": "^1.1.0", "gulp-rename": "^1.2.2", "gulp-replace": "^0.5.4", "gulp-sass": "^2.3.2", "gulp-sourcemaps": "^2.2.0", "gulp-strip-css-comments": "^1.2.0", "gulp-uglify": "^2.0.0", "htmlhint-stylish": "^1.0.3", "jshint": "^2.9.4", "jshint-stylish": "^2.2.1", "main-bower-files": "^2.13.1", "require-dir": "^0.3.1" } And for the front-end: "dependencies": { "angular": "^1.4.8", "angular-ui-router": "^1.0.14", "angular-messages": "^1.6.9", "angular-resource": "^1.6.9", "bootstrap-css-only": "^4.0.0", "angular-bootstrap": "^2.5.0", "angular-animate": "^1.6.9", "satellizer": "^0.15.5", "angular-chart.js": "^1.1.1" },
###API The Coincap API was used https://github.com/CoinCapDev/CoinCap.io
- For coin rankings: http://coincap.io/front
- For global coin data: http://coincap.io/global
- For coin data: http://coincap.io/page/ETC
- For coin historic data: http://coincap.io/history/BTC Thanks guys!
###Charts The following library was used for charts http://jtblin.github.io/angular-chart.js/
###Models The following models were put in place:
- coin.js for coin specific data
- global.js for some aggregate coin market data
- coinHistory.js for historic coin pricing data
- coinindex.js for a small set of coin data for use in a rankings table
- post.js for the self-published articles
- user.js for the user profile and registration
###Application Overview
The following screenshots provide a quick run-through the application. There is a public and a registered user view of the site. Registered Users can also CUD articles.
Home (/): this is static for now as the desired references were not completed.
Coins (/coins): providings a complete listing of the Coincap front page api. Selecting a coin will take you to the respective coin-page.
Coin page (/coins/:id): provides coin specific data and uses two types of chart.js charts
News (/posts): provides a listing of news articles. Logged in Users can choose create a new article
Article (/posts/:id); this is the article page. Logged in Users can Edit or Delete articles
Publich new article (/posts/new)
Registration form (/register)
Login form (/new)
##Technical Deliverables In brief, the following where delivered and are included in this repository
- development plan and wireframes
- Front-page views/router/controllers/factory using Angular and Bootstrap CSS-only, making use of chartjs with 2 of the APIs properly setup
- 6 models and sample data, of which the 4 are used for the diffeerent API calls
- Back-end routers and controllers with all 4 API calls working
- Angular authentication, error handling and custom responses