Code Monkey home page Code Monkey logo

plotsandpotsclient's Introduction

Plots & Pots - By Eliza Davis

Description:

This application allows users to view a list of plants identified as being either "Plots" (plants for their gardens) or "Pots" (houseplants). Users may add to the list, and all plants are available for everyone to see so that users may get some ideas and inspiration for how to build their own collections. Users may also edit or remove any plants that they have added, but not those created by others.

Technologies used:

  1. HTML
  2. CSS, Sass, & Bootstrap
  3. JavaScript & JQuery
  4. Rails (1st Iteration)
  5. Handlebars
  6. MongoDB (2nd Iteration)
  7. Mongoose (2nd Iteration)
  8. Express.js (2nd Iteration)
  9. Node.js (2nd Iteration)

User Stories:

  1. As a user, I want to sign up.
  2. As a user, I want to sign in.
  3. As a user, I want to change my password.
  4. As a user, I want to sign out.
  5. As a user, I want to view a list of plants.
  6. As a user, I want to add plants to the list.
  7. As a user, I want to edit plants that I have created.
  8. As a user, I want to delete plants that I have created.

Planning, Development Process, Problem-Solving:

My original plan was to focus only on houseplants and create watering schedules, but I wanted to allow users to add to the list. I realized that could be a challenge, as people may not necessarily know average watering cycles. I chose to keep the required data simple and focus on creating a collaborative list. My process was roughly as follows:

  1. Build back end
  2. Create plants table
  3. Add editable to serializer
  4. Inherit Plant controller from OpenRead
  5. Build front end
  6. Authorization: API routes, events, user interface 1. Ensure user can sign up, sign in, change password, and sign out
  7. Add functionality for creating, reading, updating, and deleting plants 1. Ensure users were appropriately authorized for actions
  8. Create handlebars template
  9. Add update and delete actions to individual plants, only available to the user who created them.
  10. Add messages to reflect user actions
  11. Testing, polishing
  12. Styling

Wireframe:

Wireframe

Future Goals:

  1. Allow users to create personalized lists separated by "plots" and "pots."
  2. Allow lists to be sortable.
  3. Add images.
  • Note that 1st goal has been accomplished through second iteration.

1st Iteration Rails Back-End Repository 2nd Iteration MongoDB Back-End Repository

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.