Code Monkey home page Code Monkey logo

simply-stash's Introduction

SimplyStash

What this project is for

The point of this project is for me to learn the basics of React Native.

Since I'm happy with React and I've written a PWA using it, it makes sense to try this and see what kind of experience PWA users are missing.

Having said I'm hoping the app I'm creating will come in useful.

What the app is for

The app is to help me find stuff I've put into storage.

In my home, stuff is always getting packed away to go into storage, and now and then we need to go and find those things again. No-one else seems equipped or willing to do this so I do it.

I pack things into cardboard boxes so they don’t get damaged and put them out of the way. Finding the box again is the problem. So I give every box a unique Box ID, and I write it on the outside of the box.

I also give each storage location a unique Location ID.

I record the Box ID, its contents, and its current Location ID.

At the moment I use a spreadsheet for this purpose. That's OK but it would be nice to have a photo of the box contents and to be able to use my mobile phone to record the info, instead of trying to remember it on the way back to updating the spreadsheet.


Design

A subgoal was to get better at Figma so I've been using that to design the app.

UX "Storyframe"

This article by Fabricio Teixeira suggests that before wireframing, we should create a "storyframe".

Storyframes before wireframes

Here's mine:

  • I’ll be able to manage this information from my mobile phone

  • When I pack stuff away in a box:

    • the app will tell me the next box ID or allow me to make one up
    • I will snapshot the contents of the box before I seal it up
    • I will write or say out loud a description of the contents
    • I’ll select a category
    • I’ll select an owner
    • then I’ll seal up and label the box
  • When I go to store the box:

    • I’ll put it somewhere
    • I'll write or scan the barcode for the location code
  • When I've finished:

    • the app will save the data with the box ID associated with the contents of the box and photos, along with the location code
  • When I want to find something again:

    • I’ll search by keyword or part of the description
  • When I want to browse what’s in storage:

    • I’ll browse by category
    • or I'll browse by owner

Wireframes

Wireframes

Colour Scheme

Colour Scheme

Mockups

Mockups

Running

npx expo

On your phone, open the Expo Go app.

Select Scan QR code and scan the one shown on screen.

Status

Project is at a very early stage ...

simply-stash's People

Watchers

Mike Harper 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.