http://speedcoder.herokuapp.com/
HTML, CSS, SCSS, Bootstrap, Javascript, jQuery, Ruby on Rails, ActiveRecord, BCrypt, NPM, Browserify, PostgreSQL, Heroku
-- 25 November 2016 --
The goal of this project is to build a website that enables users to practice typing, record their performance, and rank themselves on a leaderboard. We took up the challenge in working on the project in a small team of four to build an API and a front end that consumes it. We aimed to use the Agile development technique to define requirements and tasks, and facilitate the planning process throughout the project.
- Build an API and a front-end that consumes it
- Consume API by making your front-end with HTML, Javascript, & jQuery
- Craft thoughtful user stories together
- Manage team contributions and collaboration using a standard Git flow on Github
- Layout and style your front-end with clean & well-formatted CSS
- Deploy your application online so it's publically accessible
Enable nesting of element properties to apply separate scss files to different views. Enabled the usage of variables for simple updates to site color themes. Used partials for font imports.
Responsive site and navbar. Consistent styling of components (eg. buttons, inputs, modals).
Utilised for DOM manipulation for user interaction with the site
Used to access data from PostgreSQL with specified filters and sorting functions for displaying accurate data on the website.
Node.js is compiled before Ruby to user browserify and html-entities npm packages
Enables usage of require()
- Built site diagram, wire frames and user stories
- Obtained feedback from course instructors and coursemates
- Revised wire frames
- Data storage using PostgreSQL
- Built general layout using html/css
- Created different views using different data sets from the database
- User #/log in and authentification
- Incoporating Bootstrap, and improving design using SCSS
- Debugging and documentation
Details are in the '/wireframes' folder
- Working in a team environment requires good co-ordination and understanding of everyone's tasks for the project to be built efficiently.
- Trello was used to keep our project organized so we knew what each member of our team was working on and when it was completed.
- Using the bootstrap's responsive layout features whilst customizing it to our own style.
- Working in a team environment introduced some differences in coding style and knowledge in different functions and libraries. This required some extra time for other members to learn but enabled team members to expand their knowledge and understanding of new tools.
- Lots of time spent playing table tennis
- Understanding what each team member is doing and ensuring each person is being utilised efficiently.
- Managing changes from multiple people.
- Accounting for each individuals working style (planning time, feature importance etc..).
- Learning to use SASS efficiently to optimise CSS.
- Finding a consistent CSS style across the website.
- Dealing with CSS alignment.
- Creating a feature to show flash messages for successful and unsuccessful operations.
- Creating a password confirmation feature.
- Learning to use SASS.
- Understanding how to use Partials in Rails.
- Using a library for code formatting, color and highlighting rather than just grey text. Codemirror, Aceeditor
- Using ajax to update page with user score upon finishing a snippet, and less page reloads
- Multiplayer gaming
- Updating of WPM during gameplay
$ heroku create
$ heroku buildpacks:set heroku/ruby
$ heroku buildpacks:add --index 1 heroku/nodejs
$ git push heroku master
$ heroku run rails db:migrate
$ heroku run rails db:seed