We were moved on how tech drained Food bank CCCC was. They had a half built website with massive deadlinks on major pages, not mobile friendly and CCCC had no idea how to even edit the site at all. They have had this site for two years! I knew they needed a solid simple but effective solution.

What it does

The site for Chandler Food bank delivers the 5 different non-profit areas of CCCC and allows them to donate, Check events and even Volunteer online which used to be an articulate deal with printing, filling out, and bringing the form in person. Also because the previous site was so hard to maintain we built this website easy to edit, add, remove events. Literally a click on the text and it's then editable.

How we built it

We built the website with the Angular.js on the frontend. It allows the site to be a single page application. No need to request and send data back and forth while browsing the site. Flipping through organizations in a matter of moments. Also we used Angularjs to populate, hide, expand on click's through the site for smoother transitions. We made use of MongoLabs Database as a service for database management of articles and events. Also Angular.js in combination with REST api's through MongoDB our database, allowed us to dynamically send the edits to the database and then back to the website in a milliseconds with Databinding(meaning no page refreshes). For our backend to route those REST api's we used Node.js popular framework Express.js. For authentication we used Passportjs to lay the foundation of validation on authentication on the admin side. Used AngularJs, a Wysig editor, and filtering to make it easy and simple to edit. Also used open source Sass and bootstrap for Styling, Jquery and open source jquery plugins such as Slickjs and Stickyjs to add fun interactivity to the site

Challenges I ran into

We had a team of three and two of us where knowledgeable in the JavaScript full stack where our third teamate just knew html. So we took on the challenge to tutor and show him how working on software works with the Node platform. Challenge was there was only two people devoloping the site.

Also in the later morning time when we got deeper into Mongodb my Computer(Thomas) needed the Visual studio and the entire .net framework to actually run our code on my machine. The download took several hours which ended up still not fixing the computer so we had to have one computer working and actually running and testing the server changes.

Shortly after this time we gave too much data to git. Git then ate a third of our code which we then had to go through commits, pulls, etc

Accomplishments that I'm proud of

That we busted through our challenges and built a responsive website for Food Bank

What I learned

Using the JS Stack in a new and interesting way with Editing in real time with Angular. We learned some new tools and techniques through implementation that we had never before used today.

What's next for Food Bank

If Food bank decides to use the website we built for them we would gladly help them set it up on their server, Finish setting up, tweeking the website for Production Environment

Share this project: