https://github.com/chanda-abdul/bloom-client

My second full stack capstone project that I created for my Thinkful Course called the "Bloom" App
https://github.com/chanda-abdul/bloom-client

css html javascript react

Last synced: 2 days ago
JSON representation

My second full stack capstone project that I created for my Thinkful Course called the "Bloom" App

• Host: GitHub
• URL: https://github.com/chanda-abdul/bloom-client
• Owner: Chanda-Abdul
• Created: 2020-07-07T07:38:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-09-10T23:48:27.000Z (about 3 years ago)
• Last Synced: 2023-03-04T21:31:36.206Z (over 1 year ago)
• Topics: css, html, javascript, react
• Language: JavaScript
• Homepage: https://bloom-app.chandacodes.vercel.app
• Size: 7.25 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Thinkful Full Stack Capstone - Bloom App Client

## Programmer

Chanda Abdul

## Summary

While enrolled in Thinkful's Web Development bootcamp I created this Full-stack Capstone project.  Bloom is an interactive web application that was created to view and manage your plant collection.  This app was created so that you can view all of your plants, and keep track of thier care and maintenance.

Link to the [Live URL application](https://bloom-app.chandacodes.vercel.app)

## Technology Used

#### Front-end

- React

    - Router

    - Context

    - Axios

    - Libraries

        - Sweet Alerts

- HTML

- CSS

- Vercel(Zeit)

#### Back-end

- Node.js

- Express

    - Knex

    - Mocha, Chai & Supertest

    - Morgan, CORS, Helmet

- PostgreSQL

    - Elephant SQL

- Heroku

## User Stories 

Landing Page

- As a new user

    - I want to understand what this app does and if it will be useful for me.

    - I would like to create a garden

- As a returning user

    - I would like to learn more about my plants

    - I would like to update my garden

View your garden screen

- As a new user

    - I would like to see what a sample plant collection "garden" looks like

- As a returning user

    - I would like to review my current plant collection

Add a plant screen

- As a returning user

    - I would like to add a new plant to my garden

Not Found screen

- As a new user AND As a returning user

    - I would like to know that the page I navigated to does not exist 

## React Component Structure

- index.js (stateless)

    - src/App.js(statefull)

        - NavBar.js

            - SignupButton.js

        - LandingPage.js

        - ViewGardenButton.js

            - ViewGardenPage.js

                - PlantCard.js

                    - DeleteButton.js

                    - InfoButton.js

                        - PlantCarePage.js

                - AddPlantPage.js

        - NotFoundPage.js

        - Footer.js

# 

#### Landing Page





#### Signup Button

- From the landing page click the signup button to view a signup alert.  

- From there you can leave your email address to be notified of future app updates.  

- This alert was created with Sweet Alerts



#### View your garden screen

- From the landing page click the View Your Garden button to navigate to the `/view` page.  

- On this page a list of plants can be viewed through CSS cards that renders a database of plants which were created with PostgreSQL.  

- The database is pre-populated with default plants.  

- Click the More Info button to navigate to the `/information` page.

- Plants can be added with the Add A Plant button and then the app will navigate to the add a plant page.





- Click the Delete button to remove a plant.

    - Once the  Delete button has been clicked you will see an alert to confirm that you would like to delete the plant

    - This alert was created with Sweet Alerts

    

    

#### Add a plant screen

- Once the Add A Plant button is clicked the app navigates to the `/add` page

- Enter information for the new plant in the form and click the Add Plant! button

- The View Your Garden button can be clicked to navigate back to the `/view` page



- Once the Add Plant! button has been click an alert will appear to let you know that the plant has been created. 

    - This alert was created with Sweet Alerts

    

- You can then navigate back to the `/view` screen to view the new plant that was created



#### Plant Care Page

- From the `/view` page you can select the More Info button to navigate to the `/information` page

- This page provides general information about how to care for your plants

- On this page you can select the View your Garden button to navigate back to the `/view` page







#### Not Found screen

- If the user tries to navigate to a page that does not have a route `/*` the Not Found page will be displayed

- This feature was created with React Router



# 

## Bloom API

Link to the [API Repo](https://github.com/ChandaHubbard/bloom-api)  with API Documentation

# 

## Other features to implement in future versions

[ ] Incorporate the `/PATCH` endpoint into the client. 

[ ] Add Bootstrap

[ ] Add react-burger-menu