/plant-walking-frontend

Q3 Group Project FE in React: Motivate yourself to walk more by growing a plant with your steps

Primary LanguageJavaScript

Garden Walk

welcome screen with flower

LINKS

Group Members:

Rebecca Jensen
Sean Obringer
Kat Reinhart

Repos and URLs:

Deployed site
Frontend repo
Heroku app
Backend repo

ABOUT

Kat, Rebecca, and Sean created Garden Walk as a Quarter 3 project for Galvanize's Full Stack Web Development program. Our goals were to both learn React and motivate people to walk more by rewarding users with an adorable garden they could grow with their steps.

Pick a seed:

pick a seed

USER STORIES

As a user, I can...
-Sign up and log in (and log out)
-Pick a plant to grow
-Input steps and see a plant grow in proportion to my steps
-View my garden, which is a collection of plants I've grown
-View my history of step inputs
-Update my profile

A new plant:

new plant

A growing plant:

small growing plant

An almost-fully-grown plant:

grown plant

NEXT STEPS

Currently, users must input their steps to make the plant grow. Our vision for this web app is to connect it to a pedometer API so that steps are added automatically.

This web app is also ripe for social sharing. We'd like to make it easy for users to share their plants with friends.

User authorization is also in need of additional validation checks.

Menu:

app menu

BUILT WITH

-HTML5, CSS3
-JavaScript
-React.js
-React Router
-Node.js, Express.js, Knex.js
-PostgreSQL

Menu:

garden view showing completed plants

INSTALLATION

To run this locally:

  1. Clone both the frontend and backend
  2. Install npm packages, npm install
  3. Start both front and backend servers, npm start