Implement the catalog with a shopping cart and favorites page according to one of the next designs:
- Create an organization on Github
- Choose a
Free
plan - Use a name like
fe-feb20-team0
(your group + your team name) - It should belong to your personal account
- Add your teammates to the team by their usernames on Github
-
Create a new React project using create-react-app
- use an appropriate template if you are going to add
typescript
orredux
;
- use an appropriate template if you are going to add
-
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;
-
configure
Branch protection rules
for the organization repository using the following tutorial:Tutorial for branch protection rules
Go to the repository settings STEP #1
Add the rule with only next settings STEP #3
More information about all other settings at the link
-
-
Connect a repo to a folder with your React project (see the instructions on Github);
-
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
-
Setup Eslint as described here.
- you may also want to setup Prettier, Husky, and Lint Staged (see the next videos in the lesson).
-
The
main
branch is a base for your feature PullRequests. -
Merge PRs to
main
branch on github.
Pull
the latestmain
.- Create a
your-feature-name
branch andpush
it to Github. - Open a Pull Request (
PR
) from your branch to themain
. - Write your code, save it and push it to Github.
- Ask your teammate to review and approve if everything is OK.
- If some fixes are required discuss the comments and repeat steps 5-7.
- Mentors will review your codebase everyday, but not PRs.
- You have
phones.json
andphones/:phoneId.json
files in theapi
folder. - Images are inside
img/phones
folder grouped by phone models and colors. - Better to move images to the API side, but they can exist on a FE side too.
- 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 apublic
folder;price
andfullPrice
to show the discount;year
is used to sort byNewest
;capacity
andcolor
that can be choosen on product details page.
- 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.
- each component should be a folder with
- Advanced project structure:
src/modules
folder. Inside per page modulesHomePage
,CartPage
, ect. andshared
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.
- Add the sticky header with a logo, navigation, favorites and cart.
- 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;
- Add
NotFoundPage
containing textPage not found
for all the unknown URLs. - All changes the hover effects should be smooth.
- Scale all image links by 10% on hover.
- Implement all form element and icons according to the UI Kit
There should be 3 separate pages /phones
, /tablets
and /accessories
.
- Each page loads the data of required
type
. - Add an
h1
withPhones/Tablets/Accessories page
(choose required). - Add
ProductsList
component showing all theproducts
. - Implement a
Loader
to show it while waiting for the data from server. - In case of loading error show the something went wrong message with a reload button.
- If there are no products available show the
There are no phones/tablets/accessories yet
message (choose required). - Add a
<select>
with theNewest
,Alphabetically
andCheapest
options to sort products byage
,title
orprice
(after discount).- save the sort value in the URL
?sort=age
and apply it after the page reload;
- save the sort value in the URL
- Add
Pagination
buttons andItems on page
select element with4
,8
,16
andall
options.- it should limit the products you show to the user;
- save pagination params in the url
?page=2&perPage=8
(page=1
andperPage=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;
Create a Cart page with a list of CartItem
s at /cart
.
Each item should have an id
, quantity
and a product
.
Use the React Context or Redux to store Items.
Add to cart
button in theProductCard
should add a product to theCart
.- If the product is already in the
Cart
the button should sayAdded to cart
and do nothing. - Add ability to remove items from the
Cart
with ax
button next to aCartItem
. - Add message
Your cart is empty
when there are no products in theCart
- Add ability to change the item quantity in the
Cart
with-
and+
buttons (it should be > 0). - Total amount and quantity should be calculated automatically.
- Show the quantity at the
Cart
icon in the header. - Save the
Cart
to thelocalSotrage
on each change and read it on page load. Checkout
button should show a modal dialog with the textCheckout 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.
Implement Home page at available at /
.
<h1>Product Catalog</h1>
should be visually hidden.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.
ProductsSlider
forHot prices
block:- the products with a discount starting from the biggest absolute value;
<
and>
buttons should scroll products.
Shop by category
block with the links to/phones
,/tablets
and/accessories
.- Add
Brand new
block usingProductsSlider
with products without a discount starting from the most expensive.
Create ProductDetailsPage
available at /product/:productId
.
ProductCard
image and title should be links to the product details page.- Use
Loader
when fetching the product details. - Show the details on the page:
- fix one
Available color
and onSelect capacity
value for now; About
section should contain just a description (without any subheaders);- Choose
Tech specs
you want to show.
- fix one
- Add ability to choose a picture
- Implement
You may also like
block with products chosen randomly:- create
getSuggestedProducts
method fetching the suggested products.
- create
- Add
Back
button working the same way as a BrowserBack
button. - 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).
- Show
Product was not found
if there is no product with a given id on the server.
Create Favorites
page with a ProductsList
showing favorite products at /favorites
.
- Add/remove a product to favorites by pressing a heart button in the
ProductCard
element. - The heart should be highlighted if the product is already added to the favorites.
- Use React Context or Redux to store the favorites.
- Show the number of favorites at the
Favorites
icon in the header. - Save favorites to
localStorage
on each change and load the on page load.
Show input:search
in the header when a page contains a ProductList
to search in.
- Save the
Search
value in the URL as a?query=value
to apply on page load - Show
There are no phones/tablets/accessories/products matching the query
instead ofProductList
when needed. - Add
debounce
to the search field.
- Implement your own API with Node.js and Express.
- Use PostgreSQL DB.
- Save Orders to the DB after checkout.
- Show the list of orders with all the saved orders at
/orders
. - Create Order details page at
/orders/:orderId
with ability to edit or cancel an order. - Implement the login/register functionality and show the author's email of each order in the list.
- Restrict order editing only to its author.
- Deploy the App and the API with the DB to the Heroku