# Keesy Driving School:Full MERN Stack App

# Part A

<details>
<summary>Click here to expand</summary>

#### Developed by: [Anthony Wilde](https://www.linkedin.com/in/anfiiwilde/) | [Syeda Ismat Farjana](https://www.linkedin.com/in/syeda-ismat-farjana/) | Assignment T3A2-A

#### [Link To The Github Repository](https://github.com/Kessy-Driving-School-T3A2/T3A2-A)


---

## Description of our website

Our Website will be a remake of a static website for a Driving School Company called Keesy Driving School using MERN stack technology. Mainly updating certain features to assist the owner of the company to easily interact with his website for the future.

---

## Purpose

The purpose of the website is to increase the amount of business that Keesy Driving Schools will receive by creating another medium for people to find out/ discover Keesy Driving Schools or to compound the idea that the driving school is the right one for you.

---

## Functionality / Features

<details>
<summary>Click here to expand</summary>

On top of the default features included with the static website we will include several new features.

### Original Features to be copied over:

- **Home Page**

- **About Me Page**

- **Contact Info**

- **Prices**

- **Locations**

### Additional Features to be added:

- **Login for Admin (Owner's Account)**

- **Ability for owner to modify prices**

- **Clean up images/ make less blurry**

- **Make webpages dynamic**

- **Email filtering for form**

- **Modify zone of influence(area in which Keesy Driving School will operate)**

</details>

---

## Target audience

The target audience of the site is and will continue to be teenagers looking to get there P plates or adults both young and old who are looking to get back into driving or never got there P's as a youth. The website is to act as a medium for them to get into touch with Keesy Driving Schools if other forms of advertisement hasn't gotten through to them, or if they saw it in passing and wanted to have a closer look at their own conveniance.

---

## Tech stack

<details>
<summary>Click here to expand</summary>

**Frontend:**

- HTML
- CSS
- JS
- React

**Backend**

- Express.js
- Node.js

**Database**

- MongoDB

**Deployment**

- Heroku / Netlify

**Utilities**

- Passport
-- user authentication

**Tools**

- VS code
-- as text editor
- Git

- Github

- Trello
-- tracking development of website

- Figma
-- create wireframes version 1

- Figma
-- create wireframes prototype

**Test**

- jest

</details>

---

## User Stories with Implementation of Agile methodology

<details>
<summary>Click here to expand</summary>

<span style="color:blue">**Persona:** Craig / Student / 16 </span></br>
<span style="color:purple">**Persona:** Stephanie / Mother / 39.5 </span></br>
<span style="color:red">**Persona:** Jeff/ No Licence + Tradesmen / 25 </span></br>
<span style="color:orange">**Persona:** Keesy / Business Owner / ... </span></br>

<span style="color:purple">**1.** As Stephanie, I want to find out how I can contact the business, so I can organize an appointment. </span></br>

<span style="color:blue">**2.** As Craig, I want to see how far the business is willing to travel for work. So I can know if I live close enough. </span></br>

<span style="color:red">**3.** As Jeff, I want to know if I can decide between manual or automatic transmission, I wish to drive manual. </span></br>

<span style="color:orange">**4.** As Keesy, I want to be able to change prices on my site, so I can update prices throughout the year/ over many years.</span></br>

<span style="color:blue">**5.** As Craig I am a poor student, I want to see the cost of employing the driving schools services. So I can decide whether I can afford it.</span></br>

<span style="color:red">**6.** As Jeff, I want to find out if I can employ this service during non working hours (9am-5pm), so I can continue to work throughout the day.</span></br>

<span style="color:purple">**7.** As Stephanie, I want to know if I can buy in bulk (lessons), so I can give my child a present.</span></br>

<span style="color:purple">**8.** As Craig, I want to find out how I can contact the business, so I can organize an appointment. </span></br>

<span style="color:purple">**9.** As Jeff, I want to find out how I can contact the business, so I can organize an appointment. </span></br>

<span style="color:blue">**10.** As Stephanie, I want to see how far the business is willing to travel for work. So I can know if I live close enough. </span></br>

<span style="color:blue">**11.** As Jeff, I want to see how far the business is willing to travel for work. So I can know if I live close enough. </span></br>

<span style="color:orange">**12.** As Keesy, I want my contact info to be avaliable at all times, so I will receive more business.</span></br>

</details>

---

## Database

## Data Flow Diagram

<details>
<summary>Click here to expand</summary>


</details>

---

## Application Architecture Diagram

<details>
<summary>Click here to expand</summary>

will add aad here

</details>

---

## Sitemap

<details>
<summary>Click here to expand</summary>

| User | Authentication status | Sitemap |
| ------------- | --------------------- | ------- |
| As a consumer | Not logged in | |
| As a Owner | logged in | |

</details>

---

## Wireframes & Prototypes showing Agile methodology Implementation

### Wireframes

<details>
<summary>Click here to expand</summary>

| Different pages | Desktop | Tablet | Mobile Phone |
| --------------- | ------------------------------------ | ------------------------------------ | -------------------------------------- |
| Home |  |  |  |
| About Us |  |  |  |
| Packages |  |  |  |
| Contact Us |  |  |  |
| FAQ |  |  |  |
| Review |  |  |  |
| Admin |  |  |  |

</details>

### Prototypes

<details>
<summary>Click here to expand</summary>

| Different Screens | Prototyped Wireframes |Link to Prototype|
| ----------------- | ------------------------------------ |-|
| Desktop ||[Figma](https://www.figma.com/proto/hbxYaFEWkXtHkCarxxh9He/T3A2-Wireframes?node-id=69%3A57&scaling=scale-down-width)|
| Tablet ||[Figma](https://www.figma.com/proto/hbxYaFEWkXtHkCarxxh9He/T3A2-Wireframes?node-id=156%3A1774&scaling=scale-down)|
| Mobile phone ||[Figma](https://www.figma.com/proto/hbxYaFEWkXtHkCarxxh9He/T3A2-Wireframes?node-id=109%3A967&scaling=scale-down)|

</details>

---

## Third party services

<details>
<summary>Click here to expand</summary>

### Heroku / Netlify

( small description , why use it)

</details>

---

## Planning methodology

<details>
<summary>Click here to expand</summary>

[ Link to Trello: Part-A](https://trello.com/invite/b/hBRx8eK4/b6879d4a3a712979efcad24491cfcf2c/t3a2-a-mern-full-stack-apppart-a)
[Link to Trello: Part-B](https://trello.com/invite/b/IDtzWr3T/e3530227bd491d0df2d0a6dc87ad5e27/t3a2-b)

Screen shots throughout the **Development of Planning**

| Weeks | Days | Screen shots |
| ------ | ----- | ------------------------------------ |
| Week 1 | Day 1 |  |
| | Day 2 |  |
| | Day 3 |  |
| Week 2 | Day 1 | |
| | Day 2 ||
| | Day 3 ||
| Week 3 | Day 1 | |
| | Day 2 | |
| | Day 3 | |

</details>

---

## Preffered Test Methods

### Automated Test | Jest: Unit Test

<details>
<summary>Click here to expand</summary>

- An Opensource Project maintained by **Facebook**

- A **Javascript Library** to

- Create tests
- Run tests
- Structures tests

- An **NPM** package to install

- A Default choice for a **React** Project

**Reason for choosing Jest**

- Jest manages metadata of the source cose so it can run relevent test files by acquiring the knowledge about source code and which part of code has been changed.

- Time saver

</details>

### Manual Test | Bug Fixing

<details>
<summary>Click here to expand</summary>

**Reason for choosing Manual test**

- Tests from Humans perspective

- Give the scope to explore and hunt down bugs

- No chance of errors

- Give the scope to understand the problem on a conceptual and emotional level

- Connects with end-user

- Introduce a level of empathy

</details>

## Possible Challanges Of Planning During Development Process

<details>
<summary>Click here to expand</summary>

#### Possible challanges

During the actual implimentation of this planning, we might need to change certain plans which will depend on

- Regular feedback checking regarding the balance between our **Client's need** and **possible outcome** of certain feature plans

- As a Developer team, we will try our best to create the features as promised and deliver it to the customer, still there is a possiblity of having an issue regarding time managemant and implimenting **Client's need** as this project is a **part of our Academic Assessment** and the **time limit** to finish the project is **controlled** by the Academy.

#### Possible solution

- Providing the details information about any featurs implimentaton. **how client want's it to be done** vs **how it will look after being done**, and change the plan if required

- Weekly meeting with our **Client** for through discussion about **what our Client needs** and **what can be done** in the **provided time period**

</details>

---

</details>

---
---
---

# Part B

<details>
<summary>Click here to expand</summary>

# T3A2-B ReadMe
#### Developed by: [Anthony Wilde](https://www.linkedin.com/in/anfiiwilde/) | [Syeda Ismat Farjana](https://www.linkedin.com/in/syeda-ismat-farjana/) | Assignment T3A2-B

#### Link to Git Hub Repo
Back End: https://github.com/Kessy-Driving-School-T3A2/T3A2-B-BackEnd
Front End: https://github.com/Kessy-Driving-School-T3A2/T3A2-B-FrontEnd
T3A2-A: https://github.com/Kessy-Driving-School-T3A2/T3A2-A


## Libraries Used
### Front End
<strong>axios:</strong> Promise based HTTP client for the browser and node.js
<strong>react:</strong> A JavaScript library for building user interfaces
<strong>react-dom:</strong> The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to
<strong>react-router-dom:</strong> DOM bindings for React Router.
<strong>react-scripts:</strong> This package includes scripts and configuration used by Create React App.
<strong>jest:</strong> Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
<strong>babel:</strong> Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
<strong>enzyme:</strong> Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.
<strong>Amazon-Web-Services:</strong>Amazon-Web-Services: The AWS SDK for JavaScript enables developers to build libraries and applications that use AWS services. You can use the JavaScript API in the browser and inside Node.js applications on the server.

### Back End
<strong>Nodemon:</strong> A tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
<strong>body-parser:</strong>Parse incoming request bodies in a middleware before your handlers, available under the req.body property.
<strong>cors:</strong> Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.
<strong>dotenv:</strong> A zero-dependency module that loads environment variables from a .env file into process.env.
<strong>express:</strong> Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
<strong>jsonwebtoken:</strong> JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties
<strong>mongoose:</strong> Elegant MongoDB object modeling for Node.js
<strong>nodemailer:</strong> Nodemailer is a module for Node.js applications to allow easy as cake email sending.
<strong>nodemailer-mailgun-transport:</strong> The transport plugin that goes with nodemailer to send email using Mailgun.
<strong>jest:</strong> Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

---

## Meeting Client and User Standards
From T3A2-A: https://github.com/Kessy-Driving-School-T3A2/T3A2-A
Original Features to be copied over:

Home Page

About Me Page

Contact Info

Prices

Locations

Additional Features to be added:

Login for Admin (Owner's Account)

Ability for owner to modify prices

Clean up images/ make less blurry

Make webpages dynamic

Email filtering for form

Modify zone of influence(area in which Keesy Driving School will operate)
****
We achieved all of the goals of bringing over features from the previous KeesyDrivingSchool domain and successfully added the following features; Login for Admin, Modifiable prices, Cleaned up images, made webpages dynamic. Email mailgun was implemented but was in original design of website.

We did not create a modifiable zone of influence for Keesy.

We successfully implemented user stories as features within the website to meet the needs of the users who will come to the site.

----

## Project Management Methodology
Trello: https://trello.com/b/IDtzWr3T/t3a2-b
Slack Private Messaging

----

## Task Delegation Methodology
When looking through Anthony's previous works during CoderAcademy there is a lack of attention to detail where CSS and presentation is concerned. Previously scoring averagely on the portfolio website. We decided that for a professional website for a client that it was for the best if Anthony stuck to the Back End of the website where he felt more comfortable. This decision was accepted by Syeda who is more comfortable as a Full Stack Developer being able to do Front End or Back End competently.

----

## Deployment
Front End: https://keesydrivingschool.herokuapp.com
Back End: https://keesydrivingschool-backend.herokuapp.com

---

## Testing

### Production Testing:

Records of us testing features on a delployed site and localhost

* [ Evidence of user testing: Production](https://github.com/Kessy-Driving-School-T3A2/resources/blob/main/keesy%20production.mp4)

* [Evidence of user testing: Localhost](https://github.com/Kessy-Driving-School-T3A2/resources/blob/main/keesy%20dev%20.mp4)

### Development Testing: (links to our tests)
-Front End: https://github.com/Kessy-Driving-School-T3A2/T3A2-B-FrontEnd/tree/main/src/tests
-Back End: https://github.com/Kessy-Driving-School-T3A2/T3A2-B-BackEnd/tree/main/tests

-------
-------

</details>

----
----
----