Project Overview

Monteplier Zombie Guide

URL - https://montpelierzombieguide.netlify.app

Project Description

Montpelier Zombie Guide is a zombie apocalypse guide for the small town of Montpelier, Vermont. This "guide" is built using React JS and Airtable. There are around 20 guides that are preset by admin. Each guide will be dedicated to a certain subject. Some subject examples are escape routes, food, water, shelter and more. Each guide has its own thread where users can comment and make suggestions. Suggestions with the most upvotes will be appended to the guide every week. Users can also reach out to admin directly and offer suggestions for new guides or new threads.

API and Data Sample

Airtable

https://api.airtable.com/v0/appP8Am4eIgzdu7Ma/mzg

{
    "records": [
        {
            "id": "recTEPNKp9gsByeIG",
            "fields": {
                "Contribute": "North via 89",
                "Name": "Justin",
                "Date": "2021-03-15"
            },
            "createdTime": "2021-03-15T14:39:22.000Z"
        },
        {
            "id": "recrDUbZazqmuGbq7",
            "fields": {},
            "createdTime": "2021-03-15T14:39:22.000Z"
        },
        {
            "id": "recfTGrtSIzcajRO8",
            "fields": {},
            "createdTime": "2021-03-15T14:39:22.000Z"
        }
    ],
    "offset": "recfTGrtSIzcajRO8"
}

Wireframes

Web - Home

https://github.com/JustinKnuth/MZG/blob/main/mzg/Wireframes%20/Web%20-%20Home.png

Web - All threads

https://github.com/JustinKnuth/MZG/blob/main/mzg/Wireframes%20/Web%20-%20All%20threads.png

Web - Individual thread

https://github.com/JustinKnuth/MZG/blob/main/mzg/Wireframes%20/Web%20-%20Individual%20thread.png

Mobile

https://github.com/JustinKnuth/MZG/blob/main/mzg/Wireframes%20/Mobile.png

Mobile cont.

https://github.com/JustinKnuth/MZG/blob/main/mzg/Wireframes%20/Mobile%20cont..png

Component Hierarchy

component hierarchy

MVP/PostMVP

MVP

• Structure website(JSX) in a clean and readable fashion
• Style website with grid and/or flex
• Write scripts to add functionality and usability to the site
• Utilize the create and read aspects of CRUD to create a fully functioning user-based website
• Render guides and comments on the page
• Allow users to use a form to provide feedback

PostMVP

• When a suggestion reaches a certain number of upvotes, it is appeneded to the guide
• Use a third-party API (GoogleMaps and/or CDC)
• Include a like or upvote button

Project Schedule

Day	Deliverable	Status
Mar 15	Prompt / Wireframes / Timeframes / Project Approval	Complete
Mar 16	Core Structure / Airtable / Pseudocode	Complete
Mar 17	API Calls and Component Writing / CSS	Complete
Mar 18	Render Data / MVP	Complete /
Mar 19	Initial Clickable Model	Complete
Mar 20	Responsive Design / Refine CSS	Complete
Mar 21	Responsive Design / Refine CSS	Complete
Mar 22	Presentations	incomplete

Timeframes

Component	Priority	Estimated Time	Time Invested	Actual Time
Planning / Preparation	H	3hrs	3hrs	3hrs
Research Similar Products	L	3hrs	1hr	1hr
Core Structure	H	3hr	2hrs	2hrs
Pseudocode	L	1hr	0m	0m
Create and read functions for API	H	3hrs	3hrs	3hrs
Retrieve Correct Data	H	3hrs	3hrs	3hrs
Display Correct Data	H	3hrs	3hrs	3hrs
Media Queries	H	3hrs	10m	10m
Navigation Menu Creation and Style	H	2.5hrs	1hr	1hr
Create User-Friendly Experience	H	3hrs	1hr	1hr
Debugging	H	3hrs	4hrs	4hrs
Code Organization for Readability	H	2hrs	1hr	1hr
Image-Sizing	H	2hrs	10m	10m
Total	H	35.5hrs	22hrs	22hrs

Change Log