Product catalog (UA)

Implement the catalog with a shopping cart and favorites page according to one of the next designs:

• Original
• Original Dark
• Rounded Blue
• Rounded Purple
• Rounded Orange

If you work in a team

1. Create an organization on Github
2. Choose a Free plan
3. Use a name like fe-feb20-team0 (your group + your team name)
4. It should belong to your personal account
5. Add your teammates to the team by their usernames on Github

Instructions

1. Create a new React project using create-react-app
   • use an appropriate template if you are going to add typescript or redux;
2. Create a new Github repo with product_catalog name (or nay other you like)
   • if you work in a team the repo MUST belong to the organization;
3. Connect a repo to a folder with your React project (see the instructions on Github);
4. Setup deployment to Github Pages as described in the React Deployment lesson
   • (*) if you want to deploy your Express API to Heroku follow this video
5. Setup Eslint as described here.
   • you may also want to setup Prettier, Husky, and Lint Staged (see the next videos in the lesson).
6. The main branch is a base for your feature PullRequests.
7. Merge PRs to main branch on github.

How to develop a feature

1. Pull the latest main.
2. Create a your-feature-name branch and push it to Github.
3. Open a Pull Request (PR) from your branch to the main.
4. Write your code, save it and push it to Github.
5. Ask your teammate to review and approve if everything is OK.
6. If some fixes are required discuss the comments and repeat steps 5-7.
7. Mentors will review your codebase everyday, but not PRs.

Data

1. You have phones.json and phones/:phoneId.json files in the api folder.
2. Images are inside img/phones folder grouped by phone models and colors.
3. Better to move images to the API side, but they can exist on a FE side too.
4. Each product has:
   • id is required to fetch product details;
   • name with a product name;
   • image with a link to the first image relative to a public folder;
   • price and fullPrice to show the discount;
   • year is used to sort by Newest;
   • capacity and color that can be choosen on product details page.

App

1. Put components into an src/components folder.
   • each component should be a folder with index.ts, ComponentName.tsx, ComponentName.module.scss files.
   • use CSS modules.
   • keep .module.scss files together with their components.
2. Advanced project structure:
   • src/modules folder. Inside per page modules HomePage, CartPage, ect. and shared folder. with shared content between modules.
   • inside each module is own components folder with the structure described above. And optionaly other files/folders: hoocs, constants and so on.
3. Add the sticky header with a logo, navigation, favorites and cart.
4. The footer with the link to the Github repo and Back to top button.
   • the content should limited to the same width as the page content;
   • Back to top button should scroll to the top smoothly;
5. Add NotFoundPage containing text Page not found for all the unknown URLs.
6. All changes the hover effects should be smooth.
7. Scale all image links by 10% on hover.
8. Implement all form element and icons according to the UI Kit

Product pages

There should be 3 separate pages /phones, /tablets and /accessories.

1. Each page loads the data of required type.
2. Add an h1 with Phones/Tablets/Accessories page (choose required).
3. Add ProductsList component showing all the products.
4. Implement a Loader to show it while waiting for the data from server.
5. In case of loading error show the something went wrong message with a reload button.
6. If there are no products available show the There are no phones/tablets/accessories yet message (choose required).
7. Add a <select> with the Newest, Alphabetically and Cheapest options to sort products by age, title or price (after discount).
   • save the sort value in the URL ?sort=age and apply it after the page reload;
8. Add Pagination buttons and Items on page select element with 4, 8, 16 and all options.
   • it should limit the products you show to the user;
   • save pagination params in the url ?page=2&perPage=8 (page=1 and perPage=all are the default values and should not be added to the URL;
   • Hide pagination elements if they does not make sense;
   • You can use the logic explained in the React Pagination task;

Shopping Cart page

Create a Cart page with a list of CartItems at /cart. Each item should have an id, quantity and a product. Use the React Context or Redux to store Items.

1. Add to cart button in the ProductCard should add a product to the Cart.
2. If the product is already in the Cart the button should say Added to cart and do nothing.
3. Add ability to remove items from the Cart with a x button next to a CartItem.
4. Add message Your cart is empty when there are no products in the Cart
5. Add ability to change the item quantity in the Cart with - and + buttons (it should be > 0).
6. Total amount and quantity should be calculated automatically.
7. Show the quantity at the Cart icon in the header.
8. Save the Cart to the localSotrage on each change and read it on page load.
9. Checkout button should show a modal dialog with the text Checkout is not implemented yet. Do you wan't to clear the Cart?:
   • clear the Cart if the user confirms the order;
   • keep the Cart items and close the confirmation on cancel;
   • use the confirm function if you don't have a better solution.

Home page

Implement Home page at available at /.

1. <h1>Product Catalog</h1> should be visually hidden.
2. PicturesSlider:
   • find your own images to peronalize the App;
   • change pictures automatically every 5 seconds;
   • the next buttons should show the first image after the last one;
   • dashes at the botton should allow to choose exact picture.
3. ProductsSlider for Hot prices block:
   • the products with a discount starting from the biggest absolute value;
   • < and > buttons should scroll products.
4. Shop by category block with the links to /phones, /tablets and /accessories.
5. Add Brand new block using ProductsSlider with products without a discount starting from the most expensive.

Product details page

Create ProductDetailsPage available at /product/:productId.

1. ProductCard image and title should be links to the product details page.
2. Use Loader when fetching the product details.
3. Show the details on the page:
   • fix one Available color and on Select capacity value for now;
   • About section should contain just a description (without any subheaders);
   • Choose Tech specs you want to show.
4. Add ability to choose a picture
5. Implement You may also like block with products chosen randomly:
   • create getSuggestedProducts method fetching the suggested products.
6. Add Back button working the same way as a Browser Back button.
7. Add Breadcrumbs at the top with
   • a Home page link;
   • a category page link (Phones, Tablets, Accessories);
   • the name of the product (just a text).
8. Show Product was not found if there is no product with a given id on the server.

Favorites page

Create Favorites page with a ProductsList showing favorite products at /favorites.

1. Add/remove a product to favorites by pressing a heart button in the ProductCard element.
2. The heart should be highlighted if the product is already added to the favorites.
3. Use React Context or Redux to store the favorites.
4. Show the number of favorites at the Favorites icon in the header.
5. Save favorites to localStorage on each change and load the on page load.

(*) Advanced tasks

Search

Show input:search in the header when a page contains a ProductList to search in.

1. Save the Search value in the URL as a ?query=value to apply on page load
2. Show There are no phones/tablets/accessories/products matching the query instead of ProductList when needed.
3. Add debounce to the search field.

Other

1. Implement your own API with Node.js and Express.
2. Use PostgreSQL DB.
3. Save Orders to the DB after checkout.
4. Show the list of orders with all the saved orders at /orders.
5. Create Order details page at /orders/:orderId with ability to edit or cancel an order.
6. Implement the login/register functionality and show the author's email of each order in the list.
7. Restrict order editing only to its author.
8. Deploy the App and the API with the DB to the Heroku