Green Haven Client

This is the frontend component of a full-stack e-commerce application, focused on houseplants and design. The goal was to create an application that could inform and inspire cutomers who are looking for houseplants that they could successfully care for and enhance their homes interior aesthetic.

Overview

This client-side application was built using React/Next.js, uses Firebase for authetication with Google, and communicates with a server-side application built with Python and Django. The server repository can be found here: https://github.com/rochelle-rossman/green-haven-server. Together, the client and server-side applications allow users to:

• Browse and search products, filtering with pertinent queries.
• View images of inspirational interiors that feature the various products, and easily navigate to the featured products details where they can add the item to their cart.
• Create an account, store their billing information, and view their order history
• Update the quantity of a product or delete items in their order in their shopping cart view.
• Select a stored form of payment and checkout.

Screenshots

ERD

https://drawsql.app/teams/rochelle-rossman/diagrams/green-haven

Wireframe

https://miro.com/app/board/uXjVPqtXsKY=/?share_link_id=554081059619

Run Locally

First:

- Create a Firebase project and enable authentication through Google

- Clone the server-side repository and make migrations

Then:

Clone the repository

  git clone git@github.com:rochelle-rossman/green-haven-client.git

Go to the project directory

  cd green-haven-client

Install dependencies in the root directory

  npm install

  npm run prepare

Create an env file and copy over the required variables

NEXT_PUBLIC_FIREBASE_API_KEY=""
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=""
NEXT_PUBLIC_DATABASE_URL=http://localhost:8000 

Start the server

  npm run dev