/react-shopping-cart-react-router

Assembler School: React Shopping Cart React Router

Primary LanguageJavaScriptMIT LicenseMIT

#react.js #master-in-software-engineering

All Contributors

Assembler School: React Shopping Cart React Router

In this project you will learn how to create a React.js and how to apply all the important concepts.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

See deployment for notes on how to deploy the project on a live system.

The repository

First, you will need to clone or fork the repository into your Github account:

Fork on GitHub

$ git clone https://github.com/assembler-school/react-shopping-cart-react-router.git

Contents and Branches Naming Strategy

The repository is made up of several branches that include the contents of each section.

The branches follow a naming strategy like the following:

  • main: includes the main contents and the instructions
  • assembler-solution: includes the solution

Fetching All the Branches

In order to fetch all the remote branches in the repository, you can use the following command:

$ git fetch --all

List Both Remote Tracking Branches and Local Branches

$ git branch --all

Then, you can create a local branch based on a remote branch with the following command:

$ git checkout -b <new_branch_name> <remote_branch_name>

Installing

First, you will need to install the dependencies with: npm install.

Run the following command in your terminal after cloning the main repo:

$ npm install

Running the Tests

The tests that validate your solution can be executed by running the following command:

$ npm run test

Git precommit and prepush Hooks

In the assembler-solution branch you can see an implementation of these tools if you'd like to use them.

Deployment

In this pill we won't deploy the app.

Technologies used

  • React.js
  • @testing-library/react
  • eslint
  • prettier
  • lint-staged
  • husky

Project requirements

This is an overview of the main requirements of this project. The exact ones are found in the doc that the academic team will provide you.

  • You must follow all the instructions of the project step-by-step
  • You should always try to solve them by yourself before asking for help
  • You should always help your team members and fellow students of the master so that you can all learn together and become better software developers and team members
  • You must finish all the steps that are marked as Required
  • You must use semantic HTML5 elements for all the markup of the application
  • Once you are done, you can move on to the optional ones that are marked as Extra 💯

1. /new-product route

File

/src/App.js
  1. uncomment all the code
  2. add the Route component for the path
    1. path: /new-product
    2. component: NewProduct from the pages folder
    3. follow the code that is used to render the Home component route

Test suite name

@TODO

2. NewProductForm component

File

/src/components/NewProductForm/NewProductForm.js
  1. uncomment all the code
  2. finish the setState code so that a setSubmitted() method can be called that sets the submitted: true prop after a timeout, like 500ms.
  3. this prop is used to conditionally render the {submitted && <Redirect to="/" />} code in the same file
  4. this will save the new form and once the submitted prop is true, the form will redirect to the home page

Test suite name

@TODO

Project delivery

To deliver this project you must follow the steps indicated in the document:

Resources

License

This project is licensed under the MIT License - see the LICENSE file for details

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dani Lucaci
💻 📖 💡 🔧

This project follows the all-contributors specification. Contributions of any kind welcome!