Giter Club home page Giter Club logo

zombie-preparedness's Introduction

Zombie Preparedness

https://nvande.github.io/zombie-preparedness/

Zombie-preparedness is a React application built for demonstration purposes. It utilizes the U.S. Web Design System (USWDS) for design implementation. Other features include responsive design, JSON encoded page content with a markup preprocessor to allow for rapid changes to page content and structure, and near full test-coverage for the entire application.

Getting started

In the project directory, you can run:

npm start

Runs the app. Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.

npm test

Launches the test runner.

Representative personas

While building this application, I considerd a few different possible sample users that may need to use and would benefit from a webpage built for addressing a possible zombie outbreak event.

The uninformed citizen

This is someone who knows nothing of the outbreak, and is just learning for the first time. They may be of any background, and likely are not very well connected online. For these reasons, it's important to their safety that the website is well organized, can be used to quickly navigate to important information, and has a professional and official governmental feel to make them understand the severity of the risk. Use of graphics can help them find the information they need and parse that information with more context.

The informed, but panicked citizen

This is someone who knows all about the outbreak, but may have read misinformation or who is feeling emotional about the events unfolding. They may have read information online, much of which may not have been true. For them, well researched and well documented information is paramount in making sure they get the correct information and feel in control of the situation. They also benefit from calming, reassuring imagery, similar to the graphics on the home page. The step-by-step break down will help them to set aside their fears and quickly turn to action.

The volunteer

This is someone who is well aware, has a realistic understanding of the events unfolding, and is looking to see how they can get involved and help. They can see the link to the Task-Force signup on the home page, and quickly provide the information needed to join. Additionally, other users may decide to volunteer after reading the Preparedness 101 page, and will be able to do so. I have tried to portray the Task-Force as capable and well equipped, to ensure these people feel they are joining a team that knows what it is doing and has the resources to fight back effectively.

Additional Improvements

If more time was available, here are some additional features that would have been worthwhile to explore:

  • An even more dynamic JSON page structure, so entire pages, and not just their content, can be built dynamically with pure JSON without needing to edit the page components themselves.
  • Working signup features (right now a dummy form is provided, but it cannot be submitted).
  • Multi-language support. Given the dynamic JSON structure, it should not be too difficult to translate page content into other languages and allow for swapping via the UI.
  • Addtional page content. Currently, only Homepage, Preparedness 101 page, and a Task Force Sign-up page are included. But more pages could have been added to provide more detailed information on zombie survival, zombie physiology, and resources to help invdividuals prepare.
  • A more unique brand identity. Currently, the site remains very close to the default recommended design for USWDS, but given the unique and grave nature of content explored in the site, a more unique brand design may be appropriate. This would help set aside the USDSD (US Department of Supernatural Defense) as a more singular element within the US Government which deals with the critical nature of supernatural threats in it's own unique way.

zombie-preparedness's People

Contributors

nvande avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.