<div style="width: 100vw"> <img src="https://cdn.sanity.io/images/vrx9irrf/production/143ff9065b85d1805c1baba11b249838fa2d9ddc-2156x1230.png" width="80px" style="float:left"/>
<br><br><br></div>

# Product Planning

>
> "Let our advance worrying become advance thinking and planning." – **Winston Churchill**

<img src="https://f.hubspotusercontent40.net/hubfs/9253440/Blog%20Images/strategic-planning-a-group-works-at-a-table.jpg"/>

After researching and idea-generating, you already have in mind your dream application. However, hold your horse buddy 🐴 ✋, the next step is NOT to code!

Because the magnitude of a project is not always decided by the size of your dream but rather based on how many resources you have. In this case, they are skills and time. One can not build Facebook in 2 weeks and certainly not at this level of skill. However, we could aim for something similar, less of Facebook-quality but heading in the right direction.

As we don't want to ship an app only after it is _"perfect"_, we want to ship the MVP (Minimum Viable Product) and keep on developing from that foundation.

🚩 So keep in mind, **Time** and **Core features**

Hence, **Product Planning** - is a process of breaking down many of the most important features needed for the app with the corresponding time available for them.
You are given only **4 weeks** to ship this masterpiece. Please feel free to follow this suggested checklist or tailor a more suitable as well as specific one for yourself.

>
> **So, how to define core features ⚙️?**
>
> What to prioritize in a huge project where everything seems all important?
<div style="page-break-after: always;"></div>

## From MVP to Masterpiece

1️⃣ First off, all apps start with some fundamental features such as:
- [ ] Users can login/logout with authentication.
- [ ] Users can see lists of items.
- [ ] Users can see the information of an item.
- [ ] Users can search and filter items.

Able to complete the above 4 features meaning your application's foundation has been set for the next cool stuff - which are features that speak up _**the nature of your app**_ ⭐️

2️⃣ The second level, for example, of building an E-commerce app would be the core features such as:
- [ ] Show different pages.
- [ ] Show different pages for authenticated users such as sellers and buyers.
- [ ] Show detailed information of a product.
- [ ] Show lists of categorized products.
- [ ] Allow users to add products to the cart.
- [ ] Allow users to make an order from the cart.
- [ ] etc.

3️⃣ The third level is where you can flex your creativity with external APIs or any other cool stuffs 🎩 you could pull. Let's continue with the E-commerce example:
- [ ] Buyers are able to see the location of sellers via Google Map API.
- [ ] Sellers are able to see shipping schedules via Google Calendar API.
- [ ] Sellers are able to track monthly expenses, and profits via Accounting API.
- [ ] etc.

🚩 First - **fundamental features**, second - **core features**, third - **cool stuff**.

Make sure you have the above checklist before diving into the app's front-end or back-end. Only after having such clear expected outputs, we could compose our inputs.

<div style="page-break-after: always;"></div>

## Case Study

After knowing what we want, what are the steps to actually bring it to life? 🤩 Now, let's turn the checklist of human language into dev language 🤖. Here is a case study of a past learner, Alex. Check out her step-by-step plan to build an E-commerce app.

_Alex wants to build an eCommerce website that sells shoes. Here is what she does:_

1️⃣ **Fundamental feature:**

**Frontend**

- [ ] Alex starts up a React App and clean it up.
- [ ] Alex creates routes like Homepage, Not Found page, Protected Page, Login Page.
- [ ] Alex creates general layouts and content for all 4 pages.
- [ ] Alex creates a form component in Login Page.
- [ ] Alex creates layouts for the Homepage with 3 main components: Product List, Search App Bar, and Pagination.

**Backend**

- [ ] Alex creates an Express - Mongo server.
- [ ] Alex creates a User modal with the required information (name, email, role).
- [ ] Alex creates register/ login API routes for `/users`.
- [ ] Alex creates routes to CRUD _(Create (POST), Read (GET), Update, Delete)_ users.
- [ ] Alex tests authentication with Front-end.
- [ ] Alex designs a Product schema in a paper, that list out:
- - [ ] What information a product should have: Name, Price, Category, Year, Size, Brand, Likes, Buy times.
- - [ ] How some attributes could be related to each other.
- - [ ] What fundamental actions buyers can do with products: Category Filter, Price Filter, Size filter
- - [ ] Alex uses the dataset she found online ([Kaggel](https://www.kaggle.com/datae)), then changes it to match her schema.
- [ ] Alex actually codes the Product Schema and creates the Product modal with the required information above.
- [ ] Alex creates routes to CRUD products. (without any authentication for now)

**Testing**

- [ ] To test the app: Alex fetches data from the backend via the `localhost` server and renders the UI of all products. At this stage, Alex only expects to `GET` all items, she doesn't need other functions like Update, Create or Delete.

> **Fundamental application has done ✅**
> She could submit this work and get around 30% score.
> ⏰ This took her around 1 week.

2️⃣ **Core features:**

**Frontend**

- [ ] Alex creates a categorized product list and filter function for the Homepage.
- [ ] Alex creates layouts, content, and components for the User Profile & Account Setting Page - UI without testing.
- [ ] Alex creates layouts, content, and components for Upload Product Page - UI without testing.
- [ ] Alex creates layouts, content, and components for Detail Product Page - UI without testing.
- [ ] Alex creates layouts, content, and components for Cart Page - UI without testing.
- [ ] Alex creates layouts, content, and components for Complete Buying Page - UI without testing.
- [ ] Alex continues to connect users' interaction throughout frontend and backend with API service and Redux, for each page

**Backend**

- [ ] Alex modifies all the `/products` CRUD with Authentication. At the same time, testing via Thunder Client.
- [ ] Alex deploys Backend on Heroku.

**Testing**

- [ ] Finally, Alex tests the interaction between the frontend and backend with the Heroku link.
- [ ] Alex looks for bugs from the front-end and fixes them.
- [ ] Alex deploys the front-end on Netlify.
- [ ] Alex submits the project and gets ready to be a Web Developer.

> **Core application has done ✅**
> She could submit this work and get around 40% more.
> ⏰ This took her around 2 weeks.

3️⃣ **Cool stuff:**

- [ ] Alex wants to visually show the location of each seller on the map via the Google Map API
- [ ] Alex wants to build the Admin Dashboard for sellers to monitor the expenses and delivery via an Accounting API.
- [ ] Alex wants to show the weather in many cities via the Weather API.
- [ ] Alex wants to show many inspiration images of shoes style for both sellers and buyers via the Style API.
- [ ] She consults her mentor for guidelines, as well as research, and read through the docs by herself.

> **Cool stuff done ✅**
> She could submit this work and get around 10% - 40% more depending on his coolness.
> ⏰ This took her around 1 week.

Don't forget, you still have to record a presentation of your product too.

<img src="https://cdn.sanity.io/images/vrx9irrf/production/143ff9065b85d1805c1baba11b249838fa2d9ddc-2156x1230.png" width="80px" style="float:right"/>