keanacobarde/fe-bangazon

The front end client for the individual, full-stack application Bangazon

React/Next.js Django Auth Template

Topics

• Get Started
• Starting the Project

---

Getting Started

Use Template

1. To get started, click the GREEN "Use this Template" button at the top of the repo

2. Make sure YOUR github account is selected in the dropdown and name your project

3. Clone your new repo to your local machine

4. Go to the NEXT section

Starting the Project

1. Create a Firebase project and set up authentication. Use these videos as a refresher if needed.
2. Create a .env file at the root of the project
3. Copy/Paste the contents of the .env.sample file to your newly created .env file.
4. Copy over all of your Firebase values into the .env file.
5. Open the package.json file and change the name property to the name of your application, and author to your name.
6. From your command line, be in the root directory and run npm install OR npm i for short.
7. Next, run npm run prepare. This command sets up husky to track eslint errors on commit that will make your deploy fail on Netlify.
8. To start your application, run npm run dev. THIS IS THE COMMAND YOU WILL USE TO RUN YOUR DEVELOPMENT SERVER FROM NOW ON.
9. Open http://localhost:3000 with your browser.

If you see this, you are set to go!

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

NOTES:

• If you see the following error, you did not follow all the setup steps correctly and failed to add your Firebase creds. Go back and do that NOW.

Learn More about Next.js

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

fe-bangazon's Issues

Folder Structure, Navigation, and Basic Styling

User Story

• I, as the user, when I log in, should be met with a homepage containing a list of the products.
• If I am a seller, I should see a link on the dashboard which leads to a seller's dashboard.
• If I am only a customer, I should see a navbar, which allows for navigation around the application as well as a logo and a search bar which will allow me to search products as well as sellers.
• I, as the developer, will need a clear vision what components I need.

Acceptance Criteria

• WHEN a user signs in, there should be a permanent navbar. This navbar looks similarly to Simply Books or Almost Amazon.
• WHEN a user signs in, they should see a collection of cards containing product information, as well as a link allowing the user to view product details. (Will be addressed in separate ticket)
• WHEN a user signs in, they should be met with a page that doesn't include clashing color schemes.
• I, as the developer, should have a clear idea as to what components I will need to create, utilizing the user requirements outlined in #3

Dependecies

Dev Notes

NAVBAR - Simply Books

/* eslint-disable @next/next/no-img-element */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import {
  Navbar, Container, Nav, Button,
} from 'react-bootstrap';
import { signOut } from '../utils/auth';

export default function NavBar() {
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Link passHref href="/">
          <Navbar.Brand>📚 Simply Books 📚</Navbar.Brand>
        </Link>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse className="justify-content-end">
          <Nav className="ml-auto">
            {/* CLOSE NAVBAR ON LINK SELECTION: https://stackoverflow.com/questions/72813635/collapse-on-select-react-bootstrap-navbar-with-nextjs-not-working */}
            <Link passHref href="/books">
              <Nav.Link>Books</Nav.Link>
            </Link>
            <Link passHref href="/book/new">
              <Nav.Link>Create Book</Nav.Link>
            </Link>
            <Link passHref href="/authors">
              <Nav.Link>Authors</Nav.Link>
            </Link>
            <Link passHref href="/orders">
              <Nav.Link>Orders</Nav.Link>
            </Link>
            <Link passHref href="/order/new">
              <Nav.Link>New Order</Nav.Link>
            </Link>
            <Link passHref href="/profile">
              <Nav.Link>Profile</Nav.Link>
            </Link>
            <Button variant="danger" onClick={signOut}> LOG OUT </Button>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

NavBar.propTypes = {
  user: PropTypes.shape({
    displayName: PropTypes.string,
    photoURL: PropTypes.string,
  }).isRequired,
};

• Separate components by funcitonality and entity relationships.
• Pages are comprised of components. Decide what pages you're including and which pages are stretch goals.
• Decide the views you're working with. Sellers have a view that's shared but seperate, it will most likely be its own page that's routed to. What other pages can you think of?

PRODUCT - READ

User Story

• I, as the user, should be able to see all products which are currently for sale.

Acceptance Criteria

WHEN the user logs in, they should be able to see all the product cards. This will require the creation of a ProductCard.js component. This card will display all the properties requested from the client requirements. This will include a link which leads to a ProductDetails.js page. You can see this modeled within other applications which employ a similar structure such as SimplyBooks.

Dependecies

All API calls must be tested. The data retrieved from the backend will need to be fully documented from its structure/shape to its components.

Dev Notes

API Calls -

GET Products
GET Product by ID

            // GETTING ALL PRODUCTS
            app.MapGet("/products", (BangazonDbContext db) =>
            {
                return db.Products.ToList();
            });
            
            // GETTING ALL PRODUCTS GIVEN AN ID
            app.MapGet("/products/{id}", (BangazonDbContext db, int id) =>
            {
                Product selectedProduct = db.Products.FirstOrDefault(p => p.Id == id);
                if (selectedProduct == null)
                { 
                    return Results.NotFound();
                }
                return Results.Ok(selectedProduct);
            });

• Create a card component (Pulled from SimplyBooks):

import React from 'react';
import PropTypes from 'prop-types';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Link from 'next/link';
import { deleteBook } from '../api/bookData';

function BookCard({ bookObj, onUpdate }) {
  // FOR DELETE, WE NEED TO REMOVE THE BOOK AND HAVE THE VIEW RERENDER,
  // SO WE PASS THE FUNCTION FROM THE PARENT THAT GETS THE BOOKS
  const deleteThisBook = () => {
    if (window.confirm(`Delete ${bookObj.title}?`)) {
      deleteBook(bookObj.firebaseKey).then(() => onUpdate());
    }
  };

  return (
    <Card style={{ width: '18rem', margin: '10px' }}>
      <Card.Img variant="top" src={bookObj.image} alt={bookObj.title} style={{ height: '400px' }} />
      <Card.Body>
        <Card.Title>{bookObj.title}</Card.Title>
        <p className="card-text bold">{bookObj.sale && <span>SALE<br /></span> } ${bookObj.price}</p>
        {/* DYNAMIC LINK TO VIEW THE BOOK DETAILS  */}
        <Link href={`/book/${bookObj.firebaseKey}`} passHref>
          <Button variant="primary" className="m-2">VIEW</Button>
        </Link>
        {/* DYNAMIC LINK TO EDIT THE BOOK DETAILS  */}
        <Link href={`/book/edit/${bookObj.firebaseKey}`} passHref>
          <Button variant="info">EDIT</Button>
        </Link>
        <Button variant="danger" onClick={deleteThisBook} className="m-2">
          DELETE
        </Button>
      </Card.Body>
    </Card>
  );
}

BookCard.propTypes = {
  bookObj: PropTypes.shape({
    image: PropTypes.string,
    title: PropTypes.string,
    sale: PropTypes.bool,
    price: PropTypes.string,
    firebaseKey: PropTypes.string,
  }).isRequired,
  onUpdate: PropTypes.func.isRequired,
};

export default BookCard;

• Create ProductDetails.js Component
  Utilize an [id].js dynamic route which will route to page including Product Details

NAVIGATION + COMPONENT PLANNING

User Story

• I, as a developer, need to examine the requests and attempt to decipher what is MOST important to the client and what can be implemented in the timespan given.

Acceptance Criteria

This plan:

• Should give an outline for the ticket structure.
• Will give a clear guide as to how much I can do, what's a nice to have, and what's an ultimate stretch.
• Will help me organize my folder hierarchy into a clear structure
• Will help me decide what components I need
• Will acknowledge both the available calls written on the backend, and how they will interact with the frontend
• Will include how each entity is framed within the context of the client requirements

Dependencies

N / A, this is the very first issue ticket to allow for ease of planning and organization of user requirements, current backend infrastructure, and how that interacts with the frontend.

Dev Notes

VIEWS

• Login, unauthenticated user view
• User/customer view
• Seller view, dashboard

ENTITIES

• Product

Primary feature of the application.
Read is the main segment of CRUD that can be implemented and is the only one that's truly requested in client requests, but backend API calls are written for other segments of CRUD. Leave for absolute, ultimate maximums.

READ

• Product card component

Customer can search for products:

Customers should be able to search for products by typing keywords in the search input field.
The search results should display products matching the keyword.
--
Customer can view latest products on home page:

The home page should display the last 20 products added to the system as hyperlinks to their respective detail pages.
--
Customer can click on a seller's name on a product page to view all products sold by that seller:

Clicking on a seller's name on a product detail page should redirect customers to the seller's store.
--
Customer should be able to view products that a seller is selling:

Customers should be able to view all products available from a specific seller.
Potential implementation ideas were shared, including creating a new endpoint or enhancing the existing seller endpoint.
--
User Can View Product Detail:

Users should be able to view detailed information about a product, including the title, description, quantity available, price per unit, and an "Add to Cart" button.
--
Customer should be able to view product information when viewing order details:

Customers who have purchased items should be able to view product details along with each order.

• Orders

Secondary but most complex aspect of the application

CREATE

• Form component

Allow a user to place an order:

Authenticated users should be able to place an order and select a payment type for the order.
After selecting a payment option, users should be presented with a confirmation/thank you screen.

READ

• Shopping cart component

Customers can view shopping cart:

Customers with products in their shopping cart should be able to view the product name, price, and the total amount of their order.

• Seller's Dashboard -> Products

Allow sellers to see orders with their products on them:

Sellers should have access to order history and be able to see orders that include their products.
Discussion focused on creating dedicated sections for orders with sellers' products and displaying customer information.

• Order History

Customer should be able to view their completed orders:

Customers should have access to a list of their completed orders.

• User

CREATE

Allow a user to register for Bangazon:

Users who want to buy or sell products and do not have an account should be provided with the option to register.

• Category

Similarly to PaymentType, categories will need to be seen whenever an order is created (within the OrderForm.js) component; however, it's not as necessary as other important components.

Seller should have a dashboard:

Sellers should have a dedicated dashboard displaying key information such as total sales, total inventory by category, and orders that require shipping.
--
User Can View All Product Categories:

Users should be able to access a view containing a list of all product categories.
The view should display the number of products in each category and provide links to the first three products within each category.
--

• PaymentType

You need to be able to see payment type whenever you create/edit an order. It'll most likely be tucked away in a useEffect() and won't be very difficult to render but not as necessary to render as other components. Will, most likely, coincide with the singular GET request written within the backend.

Allow a user to place an order:

Authenticated users should be able to place an order and select a payment type for the order.
After selecting a payment option, users should be presented with a confirmation/thank you screen.