Skip to content

My team project for a 12-week Web Development Immersive course at General Assembly in London

Notifications You must be signed in to change notification settings

klarissamm/WDI_PROJECT_3

Repository files navigation

#CodeFund

A MEAN Stack application by Team Undefined

Group project for Web Development Immersive course at General Assembly.

See it here: CodeFund.

image

##Background

This group project was inspired by our experience in the tech world. We wanted to create a space for asking coding-related questions to fellow web developers. However, it was important to us that the app was more than just a question and answer forum, and the idea was very much rooted in the idea of charitable donations being rewarded to successful answers. This is because my teammates and I wanted to explore how to use tech for good; how to contribute in a small way whilst still providing a service.

##Technology overview

The app used JWT authentication and was built using the MEAN stack, with Bootstrap v4 as a CSS framework to make the site mobile responsive.

Within our team of 5, I predominantly worked with AngularJS on the front-end, as well as seeding data using Bluebird and async waterfall in the back-end. I also implemented the design and branding that would be used throughout the website and ensured that the team merged on Git without conflict - as much as possible anyway!

We used the JustGiving external API in order to populate information about a user's chosen chairty.

##Planning: models and design

We spent a couple of days carefully planning our Mongoose models, as they needed to be embedded within each other so that we could link and reference the right data on the front-end.

  • The 'User' model references the 'Question' model as an array
  • The 'Question' model references the 'Language' model, and also the 'Answer' model as an array
  • The 'Language' model references the 'Question' model as an array
  • The 'Answer' model references the 'Question' model

    We also collaborated on the Balsamiq wireframes before starting to code, so that everyone approved the look of the app. We followed the mobile-first design method.

    image image image

    Tasks were organised and delegated using a Trello board. We had three stand-ups and Git merges a day to ascertain what had to be achieved and what still needed to be done.

    image

    ##How it works

    When registering, a user can search for the charity of their choice. If they manage to help another user by giving the most helpful answer to a question, they will win the reward money for the charity they choose here.

    We used the JustGiving API to serve the data to the front-end. A user types in a search word to the charities search bar and the top 5 most relevant charities are returned in a selection box.

    image

    The user can then select one and add it as their chosen charity.

    image

    Once a user has logged in, they land on the "technologies" page, where they can choose the technology that they would like to explore or to answer a question.

    image

    To ask a new question, the user clicks on 'Post your question' in the nav bar. They can then select the relevant technology for that question, for example, HTML5, set a number for the reward amount and then post it to the site. It will be found in the HTML5 technology question page.

    image

    We used textAngular so that users could input code easily to the site. Any edits can then be made to that block of code, to make user experience and functionality as easy and seemless as possible.

    image

    In the user's profile page, they can see which questions they have asked, as well as information about their chosen charity, populated by the JustGiving API.

    image

    Any other user is now able to answer that question, and the questioner can select the best answer and donate to the chosen charity.

    ##Challenges

    This was my first experience working with a team. On the first day we found that we had some conflicts because we had not been merging frequently enough over the weekend. From then on, we made sure that we were all on the same page and as up-to-date as possible, with multiple merges per day and many commits.

    Seeding our data was difficult because of our complicated embedded model system. We had to use Promises and async waterfall in order to make sure the data saved in an order that made sense.

    ##What's next?

    In the future, we would love to implement a mentorship scheme through the app, connecting experienced developers with newbies like ourselves.

    ##Technnology used

  • HTML5
  • SASS
  • AngularJS
  • Node.js
  • Express.js
  • MongoDB
  • Gulp
  • Bower
  • Bootstrap and UI Bootstrap
  • Just Giving API
  • textAngular
  • About

    My team project for a 12-week Web Development Immersive course at General Assembly in London

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published