Giter VIP home page Giter VIP logo

kidsy_fullstackproject's Introduction

Kidsy

Kidsy Live

Kidsy is a shopping website for Kids Products. I used React and Redux on the frontend with Ruby on Rails on the backend, utilizing PostgreSQL as my datbase,AWS to store images.

Features

  • Secure frontend to backend user authentication using BCrypt.
  • Users can create, edit,delete and see products that they have.
  • Users can add products to shopping cart.
  • Users can also search for products by the name.
  • Users not logged in will be redirected to sign in/register if trying to sell products.

Homepage

Sign In and Register

Sign In & Register

Products

All Products

Search

Add to Cart

Add to Cart

User's Profile

Profile

Create A Product

Create A Product

Editing A Product

Edit a Product

Deleting A Product

Delete a Product

// USers cann't list their product without loggedIN
const Protected = ({ component: Component, path, loggedIn, exact, redirectToModal }) => (
    <Route path={path} exact={exact} render={(props) => (
        loggedIn ? (
          <Component {...props} />
        ) : (
          <Test redirectToModal={redirectToModal} />
            )
    )} />
);

Additional Resources

Possible Future Features

In the future I would like to add:

  • Show cart page
  • Comments/Reviews
  • Add Loading

kidsy_fullstackproject's People

Contributors

jayad25 avatar

Stargazers

Jonnatan Ortiz avatar Micah Jaffe avatar  avatar

Watchers

James Cloos avatar

Forkers

programerone

kidsy_fullstackproject's Issues

H10 Error

hello,

I deployed the app on Heroku but it crashes on launch. I didn't edit any of your original code. The error is H10. What could this be from?

Proposal Checklist

Wiki Page Home

  • Is the first page you see upon entering the wiki
  • Contains a welcome message
  • Contains a link/placeholder for a link to the live page
  • All links in the right sidebar should contain each wiki page and link to the correct page
  • Correctly formatted
    • each wiki page is listed in bullet points
    • all links route the correct page

Comments


MVP List

  • Should have 7 MVPs.
    • 3 of those are User Auth, Heroku, and Production README.
    • The other 4 are from the MVP List or they have clarified them with you
  • Contains a description sentence of the app
  • Includes the following list for the 4 app specific MVPs:
    • Adequate styling
    • Smooth, bug-free navigation
    • Adequate and appropriate seeds to demonstrate the feature
  • At least one CRUD feature, which states what CRUD operations are planned (creation, reading, updating, deletion)
  • Estimates how long it will take the code each MVP
  • Correctly formatted
    • MVPs are listed in an ordered list
    • Each MVP is broken down into bullet points

Comments


Database Schema

  • Contains correct datatypes
  • Contains appropriate constraints/details
    • primary key
    • not null
    • unique
    • indexed
    • foreign key
  • Contains bullet points after the table that state which foreign keys will reference to which table, or references to the associations which will be made
  • Correctly formatted
    • schema is written in a table format
    • the table's name are back_ticked
    • the table header column names are bolded
    • columns names are lowercased and snaked_cased and back_ticked

Comments

  • Integer spelled correctly in all tables
  • product description data type text instead of string to allow more characters
  • price data type float instead of string
  • You probably will want a cart items joins table. Then the cart table would not keep track of product ids.

Sample State

  • State shape is flat!
  • State's keys are camelCased
  • All keys within the values in the state are accessible in the schema
  • Correctly formatted
    • Sample state is rendered with triple backticks, and the language ```javascript...```). This will display the state as a code block instead of a giant line of text
  • Top level slices
    • entities
    • session
    • errors (here or in ui)
    • ui (if needed)
  • Should NOT have nested slices, aka comments inside of posts
  • Some info from other tables is ok, for instance:
  • the author username and imageurl for a post. basically any info that the user can't change
  • like count and a boolean on whether the user likes the post instead of a likes slice

Comments

  • commas between POJOs for each slice
  • price as float instead of string
  • Matching column names with state keys (image / image_url & description / details)
  • email spelled correctly in users slice

Backend Routes

  • Contains the following sections: HTML, API Endpoints(Backend)
  • Each route has a description
  • API Endpoint routes contains wildcard variables written in snake_case
  • Routes does not contain superfluous routes
  • Have API routes that will allow the front end to get all info it needs and does not have unneeded routes:
    • probably doesn't need a GET likes api endpoint because that info comes through the post show

Comments

  • wildcard variables for cart GET eg. /api/users/:user_id/carts if a user will only have one cart or /api/users/:iser_id/carts/:id if a user can have more than one cart
  • PATCH for cart to add and remove specific items instead of DELETE
  • No GET for reviews because it'll come through the product

Frontend Routes

  • Frontend routes contains wildcard variables written in camelCase
  • Correctly formatted
    • Routes are displayed with inline coding text (backticks)

Comments

  • Remove / before component names

PA Review: User Authentification

User Auth

Functionality

  • The main button with logo should link to /
  • Has working demo login

Before Login

  • The /login page should not display a link to Log In. Same for /signup
  • Going to a random route /#/oweiniouewbrviuwebv should redirect
  • Errors should display for both /signup and /login.
  • Errors should clear when moving between /signup and /login.
  • Can sign up a user
  • Can sign in as a user
  • Can log out a user
  • Can't sign up with the same username/email
  • Pressing enter after filling out the session form should use the form data, not the demo user

After Login

  • Should not be able to visit /login or /signup
  • Should be able to refresh the page and still be logged in

Style

  • The site should look exactly like the actual site
  • All relevant elements should have cursor: pointer on hover
  • When errors are displayed, most elements should not move around the page (particularly input boxes)
  • Remove Redux logger and all console.log()'s from production

MVP #3

  • Users can browse the website and view the products
  • Users can view specific Product
  • logged in users can only create and update products
  • users can update their own products
  • users can delete their own products
  • Adequate styling
  • Smooth, bug-free navigation
  • Adequate and appropriate seeds to demonstrate the feature

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.