BakerGirl

A simple online platform for ordering customised cakes for baker girl company based in Sydney. This platform is to help streamline the running of bakergirl as it helps manage orders.

---

Team:

Sophie Chhoeu

• Role: Project Manager

  Responsibilities: Organising work flow, managing client relationship, assist team where necessary and or with escalation issues.

Bianca Power

• Role: Tech Lead

  Responsibilities: Manages Team Github, Deployment and escalation tech and creative issues.

Tessa Reed

• Role: UX / Dev Lead

  Responsibilities: Manages and develops site flow. Implements authentication in line with client user experience.

Cindy Ariya

• Role: Creative Lead

  Responsibilities: Implements style requirements based on team and client recommendations.

---

Live site

Here is the deployed live site on netlify:

Click here

---

Initial Setup

To install packages:

yarn add [package name]

---

Dependencies required for api backend:

---

• body-parser version 1.18.2
• cookie-parser version 1.4.3
• cors version 2.8.4
• dotenv version 4.0.0
• express version 4.16.2
• express-session version 1.15.6
• jsonwebtoken version 8.1.0
• mongoose version 4.13.6
• passport version 0.4.0
• passport-jwt version 3.0.1
• passport-local version 1.0.0
• passport-local-mongoose version 4.4.0

Development dependencies required for api backend:

---

• chai version 4.1.2
• chai-http version 3.0.0
• mocha version 4.0.1
• nodemon version 1.12.4
• now version 9.0.1

---

Dependencies for react front-end

• bootstrap version 4.0.0-beta.3
• jwt-decode version 2.2.0
• react-dom version 16.2.0
• react-router-dom version 4.2.2
• react-scripts version 1.0.17

Note: you will need to add the below for the backend api to work with the react front end as part of the react front-end dependencies

"proxy": "http://localhost:7000",

Development dependencies for react front-end

• enzyme version 3.2.0
• enzyme-adapter-react-16 version 1.1.0
• react-test-renderer version 16.2.0

---

To run on local server

• clone repository
• change directories to api (backend folder) and create .env file in api (backend) and add the below:

MONGO_URI=mongodb://localhost/cakes

• change directories to react-web (front end folder) and create a .env.local file and add the below:

REACT_APP_API_URL=http://localhost:7000

Note: To run instagram feed will require instagram creditionals of the client which we are unable to provide

Terminal

• In one tab run

$ mongod --dbpath /usr/local/var/mongodb

this will run a mongodb server

• In a seperate tab change directories to api folder and the Bakergirl folder and run the following command:

$ npm install

this will install the dependencies required the api backend

• In a seperate tab change directories to the react-web folder and run the following command:

$ yarn

this will install the dependencies required for the react front end

• In the api tab run the below:

$ yarn dev

this will start your backend api locally

• In the react-web tab run the below:

$ yarn start

this will start your react front end locally automatically in the browswer if not the app can be accessed through http://localhost:3000/

---

Project Proposal

Proposal Pitch

User Flow

Project Sprint

ERD

Wireframes

Trello Board

Highlights deliverables by team: includes: styling, colours, user stories and initial project timeline

https://trello.com/b/SOuF8d5F/baker-girl

Client Diary

Communication with client including meeting minutes and agenda points by the team:

https://docs.google.com/document/d/1H_Q8dseeNPwsDFcRDex7stukgzn7SDYm_t_CPqaoapc/edit

Issues:

---

Instagram

In attempting to use the npm module react-instafeed I realised that the code in the module was incorrect. To remedy this, I forked the github repo, made the necessary changes to the code, and from there on used my forked version to achieve the desired result.

To get it working locally:

• cd into react-web/src
• remove the directory "react-instafeed"
• git clone https://github.com/biancapower/react-instafeed.git

Form Validation

Due to the timeframe of the project we were unable to implement form validation for the client and have advised accordingly.

Delete order entries in Admin

Due to the timeframe of the project, next sprint will include routes to delete order entries. Have advised client accordingly.

---

User testing

Team have provided feedback survey to other users results are below:

• User Feedback

• Users rated the website extremely engaging
• Users rated the website extremely easy to navigate

Client Feedback

---

Provided client survey for site feedback: Click here

Results from client below:

• mobile responsiveness for iphone, ie safari browser
• smaller font

Overall the client was happy with the initial mvp and would look to add the following for future development to include:

• cake quote custom feature : as the cake is being built an estimate quote is provided to a user
• admin : having the ability to delete entries from the admin interface once a cake is completed