Close:

Application:

"Co Cleanup"

Co Cleanup, short for Community Clean-up, is designed and purposed for real-world use as a social coordination and meetup platform to help communities better coordinate the clean-up process after a natural disaster or any time that community members would like to coordinate group action for the betterment of their community. Co Cleanup has been designed and built by Chris Hullman and Mick Caffery as their final capstone project for Coder Academy's Full Stack Web Development Bootcamp, 2022.

Why did I choose to build this project?

It can be argued that with the increasing rate of climate change globally, the prevalence or severity of extreme weather events is also increasing as a result. Co Cleanup, as an app, then has real-world, beneficial value to its users. This was a key driver for our motivation to build this app upon this knowledge. As a user-driven platform, the developers, Mick and myself, can leverage user empowerment in their engagement with Co Cleanup as the app is designed in such a way that ordinary users can create their clean-up events. We have the strong assumption that the more empowered a user feels using an application, the more likely they are to engage with the app and its members, and thus continue using it.
Both my team partner, Mick, and I were adamant to build the application upon the MERN stack; Very new technologies to both of us at the time, but we both evaluated each other and that we have the capacity and feasibility to learn and apply this stack with great success! The proof is shown that we successfully deployed a production version of the application that meets Minimum Viable Product (MVP) requirements.

What challenged you when making this project?

  • This was the first time I've been involved in a team app development project almost entirely remotely, but both Mick and I easily utilised modern remote collaboration and communication platforms with great success!
  • The project deadline was relatively tight, especially as I had to learn a lot of MongoDB and Express JS ad-hoc whilst completing the app, but I love challenging myself with ambitious targets, and we delivered a quality result!
  • Extremely extensive planning and coordination between my team partner and myself with very detailed related documentation meant fine-tuning our Agile methodologies and organisation to tackle the full SDLC of the project.

How did I get unstuck?

Our very comprehensive resourcefulness in sourcing information primarily from credible web resources, combined with all our pre-existing learnings meant we were almost always able to find the information we need for the above challenges listed. Constant and accurate, professional communication between my team partner and myself also ensured synergy in knowledge sharing between us and reflecting ideas between each other.

What was my process for completing this project?

Thankfully with the clear assessment rubric guidelines for the requirements of the project, we knew what we needed to achieve and when throughout the whole SDLC of the project. I aspired for the highest grade in all rubric categories, and that paid off with the final project results and the high grades we received.

What would I do differently next time?

I underestimated how time-consuming designing and implementing the front-end styling/CSS would be, but my team partner Mick did a fantastic job in designing highly modular styled components that we can reuse as React JSX components, saving time in the long run.

Source:

GitHub Repo: https://github.com/Community-Cleanup/Co-Cleanup-Docs

The README.md in the repository contains links to both the Server app and Client app repos for the full-stack app

Key Technology:

(Update: October 2022) Current Tech:

MERN stack - MongoDB, Express, ReactJS, NodeJS

Specifically:

  • Front-end: HTML5, CSS3, JavaScript, React.js, Axios
  • Back-end: Node, ExpressJS, Mongoose, MongoDB, Firebase Authentication
  • Authentication: Firebase Authentication
  • Deployment (Server): Heroku
  • Deployment (Database): MongoDB Cloud Services
  • Deployment (Front-End): Netlify
  • APIs: Mapbox maps & geocoding
  • Testing: Jest
  • Source Control: Git & Github
  • Project Management: Trello & TeamGantt
  • UI Design: Figma

Screenshots:

Screenshot of 'Co Cleanup' MERN app Screenshot of 'Co Cleanup' MERN app

Close:

Application:

"Bubble Buddies"

Likened to the popular group event hosting and organisation platform, "meetup.com", this app was developed from the ground up as a demo/student project to showcase my skills and experience in Rails development. Key phases of the Software Development Lifecycle were conducted and recorded/documented as part of this project.

Why did I choose to build this project?

You may or may not have yet read in my "About Me" page that I love going SCUBA diving, and when diving, you must always dive with someone else next to you at all times underwater, known as a "buddy". From my own personal experience, it's difficult to find buddies sometimes, especially on self-organised trips. Excellent meetup platforms exist such as meetup.com for people to get together in thriving communities. Whilst it's certainly possible to host SCUBA diving meetups on such platforms, the interface and functionalities are not tailored specifically for recreational divers and dive instructors to be able to find and get together for the most compatible and tailored SCUBA diving experience. This is the key problem that is intended to be solved with "Bubble Buddies".

What challenged you when making this project?

I had designed an entire relational database schema for Bubble Buddies that would be hosted on PostgreSQL DBMS. However, implementation of the relationships between primary and foreign keys between the databases' tables, as well as implementation of the cardinality of relationships, proved to be confusing when converting my schema into Rails code.

How did I get unstuck?

For the above challenge I faced, I was being very resourceful and tried to debug it on my own. Without success, to waste no time, I sought assistance from our educator at the time, where I actively demonstrated what I tried so far, and thus we resolved the issue efficiently and with clarity of understanding.

What was my process for completing this project?

As I was still very much learning Ruby and Rails at the time, I adopted a compartmentalised, "prototype" development approach, with significant resourceful "Google'ing" if time permitted.

What would I do differently next time?

The styling is very much incomplete, with lots of broken or non-developed CSS styling. I would very much make the front-end UI/UX more intuitive, clean and responsive looking. Time-constraints meant I was only able to get the website to MVP before submission, which meant sacrificing front-end aesthetics. I would also flesh out wireframes in much more detail to help me with the UI creation.

Source:

GitHub Repo: https://github.com/chullman/BubbleBuddies

Key Technology:

(Update: October 2022) Current Tech:

From the below original tech, I had migrated the Rails app from scratch onto Ruby on Rails v6.1.7 to leverage the various advantages of Rails v6 from Rails v5. This also allowed me to deploy a live public version of the web app on a cloud-based PaaS solution.

Certained consumed, third-party API dependencies also had to be reconfigured. A new mail service provider and a new geocoding API were also sourced.

Please refer to the README.md contained in the GitHub Repo link for more technical specifics.

Original Tech:

I had built this application as a full-stack using Ruby on Rails v5.2.0 - a server-side web application framework written in Ruby based on the MVC structure.

I had designed and implemented a rudimentary relational database schema to be executed on a PostgreSQL DBMS.

Certain existing publically sourced APIs were utilised such as Google Maps and Stripe.

Screenshots:

Screenshot of 'Bubble Buddies' Rails app

Close:

Application:

"SAP Dashboard"

Designed and purposed with the objective to provide a more "user-friendly" interface for stakeholders to perform data analytics and gather information from select SAP ERP data marts with excellent User Experience (UX) in mind. Although it is in its prototype stage, the foundational code structure is all in place, ready to be built upon with relative ease with more dashboard functionality.

Why did I choose to build this project?

There was a critical business need that needed to be addressed and resolved as soon as possible; Critical because the business need could've escalated into a physical safety issue if left ignored. The SAP ERP interface made it challenging to gather and analyse the data for Business Intelligence, especially when it involved the exportation of such data onto rudimentary spreadsheets. I needed quickly developed and deployable web interface to gather the data (with help from some self-created SQL code to correlate the right data from the data marts), so I proactively chose ASP.NET MVC as the tool of choice, using Bootstrap 3 for rapid front-end development.

What challenged you when making this project?

Display the correlated data on the website as Business Intelligence required a tabular representation of the data for view by the user. I implemented an open-source jQuery template that I heavily modified to show this data, but JavaScript, let alone jQuery, was very confusing to me at the time.

How did I get unstuck?

Extensive resourceful and efficient "Google'ing" for solutions, as thankfully JavaScript is a very popular language in the world with countless resources available on the internet, and seeking help from an experienced colleague was unfortunately not an option at the time.

What was my process for completing this project?

Very much got stuck into development. I know this is certainly not software development best practice anywhere in the industry, but it allowed me to get a functional and tested "prototype" web app out at MVP level.

What would I do differently next time?

Upon reflection now, I realised I was overly ambitious and self-driven. I would've saved a lot of headache if I had just engaged with the company's primary IT SAP team and used third-party software for Business Intelligence visualisation such as Tableau.

Source:

(Omitted for copyright reasons)

Key Technology:

I had built this application using ASP.NET MVC.

Readily available, open-source jQuery snippets were utilised to assist with dynamic functionality of rendering the necessary key information for the user.

Bootstrap 3 was utilised to aid in rapid and easier front-end development.

Screenshots:

Screenshot of 'SAP Dashboard' app
  • Email
  • LinkedIn
  • GitHub
  • Medium
  • Facebook

    • < Web Development />

    Anchor icon

    Skills and Experience

    • Successful team collaboration with a student peer to complete a full-stack MERN app from the ground-up as a capstone project, not limited to programming a fully customised and secured authentication and RBAC authorisation system using Google Firebase Authentication and MongoDB user credential storage. Protected API routes configured and implemented, thanks to Express JS, utilising such auth. (See "Project 1" below).
    • Demonstrated proven capability to build a completely custom, full-stack web application utilising Ruby on Rails (Rails) and various third-party Ruby Gems to achieve objectives. Such applications include various third-party APIs to bolster functionality and user experience. (See "Project 2" below).
    • Sound competency in using JavaScript to include programmatic functionality, not limited to dynamically manipulating elements or their styling in the DOM for an even more fantastic UI/UX experience for the user.
    • Recently upskilled in ReactJS for declarative coding of components for highly reusable and responsive interfaces. This includes my sound experience and practice in developing class components and functional components with Hooks and React Context, etc., all tied together with React Router for SPA navigation.
    • Practical competency in building mobile-first, responsive websites from scratch using HTML and CSS functionalities and techniques for enhanced UI/UX on modern browsers. I have demonstrated ability in using SASS as a CSS preprocessor to facilitate code maintainability and reuse. I am always mindful that attention to detail is paramount in planning, designing and developing such websites to combine aesthetics and accessibility effectively. This portfolio website you're browsing was built almost entirely from scratch by me!
    • Prior real-world support and maintenance of legacy ASP.NET-based web applications built under the MVC code architecture, that was still utilised by a significant number of end-users.
    • Prior real-world experience in building and customising a modern ASP.NET MVC web application that added value to a critical business need, built upon Bootstrap for rapid development. This app included my customisation and implementation of a jQuery template fit for business purposes. (See "Project 3" below).
    • Real-world exposure and both professional and academic training in the agile methodology throughout the software development lifecycle, utilising Kanban frameworks on Trello, where appropriate and implemented.

    Example Projects I've Done:

    > Project 1

    MERN App - Full-stack

    GO
    MERN Logo Thumbnail

    > Project 2

    Demo MVC App - Ruby on Rails

    GO
    Rails Logo Thumbnail

    > Project 3

    MVC App - ASP.NET

    GO
    ASP.NET Logo Thumbnail