The aim of this project is to design, build, deploy and present an application built for a real world client. This involved to meeting with a business owner or organisation manager to find out what challenges they face. Then find a problem that to solve with an application and present the ideas to the client.
Note - client's identities have been concealled for privacy reasons.
- About the Project
- Project Management Plan
- Executive Summary
- Project Charter
- Project Management Strategy
- Design
- Technical Overview
- Project Work Breakdown
- IT Support Plans
- Post Project Review
The clients that I have chosen to work with approached me to after I put a callout over social media for a client to work with in order to build an application to solve a problem they are confronting.
Their problem related to a volunteer-run campaign they started about 5 years ago called No Meat May. The campaign challenges participants to go meat free for 31 days. Their mission is to:
“To challenge and change behaviour, to create a kinder, greener and healthier future for all.”
Currently they have a website: www.nomeatmay.net. This is a source of information for those who want to participate in the campaign. They have an email list for those who want to sign up to the challenge. Email recipients get weekly emails for the month of May that contain motivational messages, recipes, campaign updates, etc
The campaign has been growing steadily since it started. They currently have 700 people signed up to receive the weekly email and a couple of thousand others participating unofficially who do not receive emails. Each year they add something new to the campaign to keep it fresh and engaging. For example, this year they added an instagram page with daily recipes.
They are looking to build on their past successes by working with me to create prototype No Meat May application. This they want to use to increase engagement with and between people for the duration of the campaign month. They want the application to make it easier for participants to engage with No Meat May by helping build a community of like-minded individuals that can support, inspire, and challenge each other during the campaign. Furthermore, they’d like to use the prototype as a way to garner funding to build an application that helps engage a new audience and grow the campaign in the future.
The background for the No Meat May campaign can be summarised in the following points (from No Meat May website):
- Factory farming – this process is resource intensive, inhumane to animals, and generate as much waste as a small city.
- Health effects – overconsumption of meat increases the risk of many lifestyle diseases such as obesity, cardiovascular diseases, gastrointestinal cancers, etc
- Environmental effects – Farming of animals for over consumption damages the environment by increasing water usage, increases spread of poisonous effluence into rivers, increases deforestation, and increases greenhouse gas emissions.
- Food equality – there’s an increased emphasis placed on underdeveloped countries to sell their grain to the West to feed animals. This forces an unfair distribution of food to livestock and that could otherwise be used to feed humans.
The No Meat May campaign aims to raise awareness of these 4 key points with the hope of changing participants dietary habits. The hope is a decrease in the or cessation of the consumption of meat by participants. From a long-term point of view the organisers are using No Meat May as a means to empower people to live sustainably. They are hoping the application will be able to engage younger audiences to develop healthier eating and living habits.
The problem confronted by the No Meat May organisers is one of engagement and motivation. They are looking for an application, mainly mobile, that will keep participants committed to the challenge of being meat free for the month of May.
They want participants to feel that they are part of a large community of people doing good, and feel they have achieved a worthwhile goal by participating in the challenge for the whole month.
To design, implement, and deploy a website that gives participants points based on how much they engage with the website to demonstrate how well they are going with the No Meat May challenge, to get inspiration from other participants, informational components on the website, and how much they use the support features of the website. This is to keep the participants inpsired and engaged through-out the challenge and to, hopefully, keey them continuing a no meat or less meat lifestyle.
This details the documentation necessary for the client engagement process.
The organisers of No Meat May challenge participants to go without meat for a month to bring awareness to issues around the consumption and overconsumption of meat and the effects it has on people, animals, the environment, and society. The objective of this project is to design and implement a mobile responsive website that gamifies a user’s participation in the No Meat May challenge.
The scope of the project is limited to an MVP that contains a homepage, sign-up, sign-in, profile page, and dashboard with points display and photo upload. Project constraints include time, mobile friendly, and real life rewards while risks include lack of time, failure of website, and potential brand damage. Agile points designated the project are 60 and the project cost is $33,009.
Objectives: The organisers of No Meat May want an application to make it easier for participants to engage with No Meat May by helping build a community of like-minded individuals that can support, inspire, and challenge each other during the campaign. Furthermore, they’d like to use the prototype as a way to garner funding to build an application that helps engage a new audience and grow the campaign in the future.
Scope: To design, develop, and produce a proof of concept for a mobile responsive website that participants of No Meat May can use that will inspire and reward them for staying on track with the No Meat May challenge. Its goal is to create a gamified experience for the participant as well as have features that support and encourage them to stay meat free for 31 days. A breakdown of these features are provided in the Project Work Breakdown section.
- Project Lead: John Stewart 28/5/17
- Project Client 1: signed off on 29/5/17
- Project Client 2: signed off on 29/5/17
This section describes the management processes and roles, role summary, project constraints, and project risks.
The Project Manager, John Stewart, will be guiding, developing, and implementing the project from start to finish. The follow process will be followed:
- Client engagement: engage with clients to determine end goal and solidify concrete features to implement.
- User stories: break down each client guided feature into workable user stories that can be individually implemented.
- Conceptual design: from the user stories mock-up wireframes and a workflow diagram of the user’s journey through the website.
- Technical planning: breakdown the design into technical features and select the most appropriate technologies for the design.
- Technical implementation: following Agile methodology implement features in a week long sprint.
- Client feedback: after the week long sprint return to the clients for feedback.
- Quality control: maintain a high-level of quality as to what is implemented, and how it is implemented with a focus on client satisfaction and perform user testing.
- Deployment: once the clients approve of the project deploy to server for use by No Meat May participants.
The clients will be involved with the conceptual design of the project, quality control, and feedback related to changing of specifications of the project.
The Project Work Breakdown describes the features agreed to be implemented for a minimal viable product. The project manager will monitor and communicate to the clients any deviations and the clients will communicate any changes they want to make to these specifications to the project manager. The project manager will also monitor and inform clients of any project risks or constraints yet to be identified in the Project Management Plan.
Project Manager/Designer/Technical/QC/Deployment: John Stewart Project Consultants and clients: clients
- Time: There is a limited time to implement desired features.
- Mobile application: There is limited time to learn the required technology to deploy it to mobile. In this case will create a website that is mobile responsive instead of a mobile native application.
- Connecting to real life rewards: A feature of the application would be to connect points to real life rewards through partnerships with restaurants. However, this is currently out of reach due to lack of resources and time.
- Lack of use: Building the application and then nobody uses it.
- Failure of application: Building the application and it doesn’t work when somebody uses it.
- Negative brand image: If the application fails it may give No Meat May a negative image and discourage people to participate.
- I want a homepage that gives me information about why I'd want to participate in No Meat May and lets me sign up to the challenge.
- I want to sign up to the application with my email address and a password.
- I want to be able to log into the website with my email address and password.
- I want to create a profile that contains my username, bio, profile picture, and quote.
- I want to have a dashboard.
- I want to get points for achieving goals during No Meat May by interacting with the website.
- On the dashboard I want to have a component with points on it.
- On the dashboard I want to have a map component with local restaurants.
- On the dashboard I want to have a map component with articles/news.
- On the dashboard I want to have a map component with a chatbot that gives me a recipe.
- On the dashboard I want to have a map component with photo component.
- On the dashboard I want to have a community interaction component.
Trello board containing user stories:
This is a link to the workflow diagram board for closer examination: http://tinyurl.com/y8ee4zcp
Wireframe and workflow diagram.
Wireframe of homepage.
Prototype homepage.
The basic project required a very simple database model that was mainly composed of the user information.
ERD
The follow section describes the software components that will be used for the No Meat May project. The project must be completed in Javascript and all the technical components used are based in the javascript language.
You can access the application through heroku: https://nomeatmayfront.herokuapp.com/
Or you can download the project to the local drive and run it from there:
Clone the server side repo:
$ git clone https://github.com/codeinaire/CFA-Major-Project-3-Backend
Clone the client side repo:
$ git clone https://github.com/codeinaire/CFA-Major-Project-3-frontend
Change into the project directory, and install the dependencies:
$ npm install
If you have mongodb installed start it your local machine:
$ mongod
Otherwise create an database online database on an online service such as mLab. The database will be accessed with the backend repo. Create a .env file in CFA-Major-Project-3-Backend and fill in the following keys with your database values and a key for your JWT without quotes:
DBDEV=<database value here>
JWTSECRET=<secret phrase here>
Run the backend server runs on localhost:3001 by running:
$ npm watch
The backend is accessed through the frontend react application, however, there's a little bit of configuration required to get it to work on the localhost. Navigate to SignUpPage.jsx, LoginPage.jsx, and ProfilePage.jsx and replace https://nomeatmay.herokuapp.com with https://localhost:3001/ to get the front end to do api calls to the backend.
Navigate to the directory of CFA-Major-Project-3-frontend and to start the server run:
$ npm start
Access it through your browser:
http://localhost:3000
Have fun!
Server side: Node.js and Express.js - Using Node.js through Express.js is a quick and straightforward way to get a server api up and running with minimal built in features that allows the application to be customised to the project at hand. This will be the database api.
Database: MongoDB hosted by mlab - this is an industry standard online database system that has a cost-free option for developing applications that require data storage. Store user details: Username, name, email address, location (country, suburb, postcode), motivation, bio, badges, pictures, etc
Client side: React.js - this is appropriate for creating client side pages that respond in an asynchronous manner. This is very appropriate for the dashboard that will have many components that need to refresh at different points which makes it so the whole page doesn’t have to refresh. React will be used for: sign up page, sign in page, profile page, and the dashboard.
Sign-in and authentication: Passport.js - this is authentication middleware for Node.js. It is flexible and can be used to connect with the client side React.js and server side Node.js for secure user signup and login. It can also use strategies for social media sites such as Facebook, Google, Instagram, etc
Github: This was used for version control, feature development, code storage, and project review:
Github for the frontend reop.
Github for the backend repo.
Code climate: this is a code quality tool that picks up on any issues within the code to be fixed. I mainly used it when I was merging a branch to the master to check the code quality of the branch. If there were issues I could fix them and then merge once they were confirmed fixed.
Code climate working together with Github.
Code climate repo analysis.
Due to the limited time and resources available there will be a minimum of system testing performed. The main type of system testing to be done will be to follow a No Meat May participant journey through the website. This goes as follows:
- This will test if they can land on the homepage and the displayed content is rendered.
- Determine if the button that takes them to the sign-up form functions correctly.
- On the sign-up page do all components render correctly and is the form able to a take a post request from the participant.
- Does the sign-up form redirect the user to the sign-in page after processing the post request and storing the information in the database.
- Is the participant able to send a post request via the sign-in form and is the validity of the user checked by using json webtokens.
- Is a user redirected to the profile form page and do the components render correctly.
- Is a user able to fill in the form and send a post request to update their profile details. Will the form redirect the user to the profile page where they can check their current profile details.
- Is the user able to select the link to the dashboard and will the dashboard render all the appropriate components.
A code review was provide by my fellow classmate Hyun and I also provided a review of his code using the Github pull and comment feature after we became collaborators on each other's projects.
This section describes the features to be implemented in the website, the implementation schedule as per Agile methodology, and the budget breakdown using the Agile points system to measure production costs.
Core: Home page: Basic information about the challenge such as why to participate in the challenge and a massive button for people to use to sign up for the challenge. Signup and signin system in which a user’s information is saved into a database. Information required:
- First and last name
- Username
- Email address
- Location
- Motivation
- Sign-in with social media sites Facebook Extra
- Sign in with other social media sites such as google, instagram, twitter, etc
Profile form and profile page that will display the information from sign-up plus extra information such as:
- Bio
- Photo
- Personal quote
- Badges
Dashboard with the following components:
- Total number of points they are currently on.
- To prototype this feature will focus on points given for posting at least 3 photos per day of vegetarian/vegan meals. Extra
- Points given for reading an article, points for checking into a vegan/vegetarian restaurant, points for veteran NMM signing up new participants.
- Map with restaurants close to their location.
- News feed.
- Community wall that lists participants comments live.
- Current challenge.
- Recipe chatbot.
Due to the limitations in time the scope of the project is broken up into core features and extra features. The core features will be the first to be implemented while the extra features will be implemented based on the available time. The estimation is based upon on 14 day period working 8 hours a day each day for a total of 112 hours. It is broken down into user story points based on Agile methodology with a production potential to complete 20 points in a week.
Core Feature schedule estimation:
- Homepage: 5.
- Participant sign-up & sign-in system: 20.
- Profile form and profile page: 7.
- Dashboard: 3.
- Points system: 15.
- Including displayed on dashboard and logic for accumulating points.
- Map system: 10.
Total points: 60
The focus for this project is to build a basic prototype and for that reason user story points for implementation of extra features will be left out for discussion and implementation at a future point.
The total cost will be based on Core Functionality points. Break down of production costs: Developer @ 20 points per week: $4,000. Total developer costs: $12,000. Running costs (+30%): $15,600. Business costs (+30%): $19,578. User acceptance testing (+ 20 points): $23,578. Value adding (40%): $33,009.
Once the project is complete the project manager will guide the clients through the use of the website. A new database will be set up for the use with the website to store participants details. The application will be deployed to a server of their choice and the appropriate environmental variables will be configured for the website.
I've decided to continue to work with my clients to complete this project. Post project I will provide maintenance and support for any issues up to a 3 months period in case there are any extra bugs that come up and need to be worked out.
Approval:
Project Lead: John Stewart 9/6/17
Project Client 1: signed off on 9/6/17
Project Client 2: signed off on 9/6/17
Unfortunately, the scope of the project wasn't able to be fulfilled in the allotted time period. However, a core feature was implemented - user authentication - which was/is one of the more difficult parts of the project. The project lead had never done user authentication before and it was a good learning experience. Moving forward the project manager is going to continue to liase with the clients to further build the project out and to set a schedule for the final product to be use to demonstrate a MVP. This will be used to seek further funding to build more advanced features.