girlscriptsummerofcode / upay Goto Github PK

It would render an array of items, each with

• an image
• description
• Add button #12
• save for later button #13

Feel free to take inspiration from sites like myntra/flipkart etc for design.
It should be a responsive grid that scales from desktop to mobile resolutions.

We are using bash variables here in our scripts, which isn't supported in DOS environment.

In order to support windows, we can use cross-env (add to devDependencies using npm i -D cross-env) and simply prepend cross-env in our scripts;

-    "test": "NODE_ENV=test jest && npm run lint",
+    "test": "cross-env NODE_ENV=test jest && npm run lint",

-    "start": "NODE_ENV=production node server"
+    "start": "cross-env NODE_ENV=production node server"
  },

A small and descriptive footer can be added to the present functionality set.

Provide learning resources for different technologies used in the project.

Let's create a button that will be used for buying the products. For example, it will look like the 'BUY NOW' buttons that we find in many e-commerce websites. Let's not put too much effort in styling as it has to be changed in the later stage once we are given the specific designs.

React styleguidist is a fun way of documenting your components.

It makes use of markdown files placed in your component folder and reads jsx code blocks within it to create working examples. Even if we don't use the design guide server, the file itself acts as a good documentation about how to use your component, its props, etc.

this might help with the configuration.

Let's create a button that can be used for 'ADD TO CART' option. This button will be used to add a particular item into the cart. Let's not put too much effort in styling as it has to be changed in the later stage once we are given the specific designs.

This would have details like address, contact us etc etc. I guess we should keep this in _document.js as it'll be common to all.

So once we have #38, it might link to a product page with more details of product, this is what we are talking about in this issue.

This would have product details in depth. Two people can work on this (updating API at server and creating UI in frontend)

CircleCI/Travis either would do.

Let's create a button that would be used to save a product which a user might buy later. This would basically help the user in putting the item into the wishlist. Let's not put too much effort in styling as it has to be changed in the later stage once we are given the specific designs.

SVG are ideal for glyphs as they can be inlined and load instantly. This isn't the case with font based icons that wait on fonts to load before showing anything to user. This gives poor experience on mobile where even if your content is loaded, the buttons might look empty or with X strange X marks everywhere.

Let's create components/Icons/ dir that'll have React SVG components, which can then be used anywhere in the code base (buttons, titles, sidebars, sections etc).

You can find the icon of your choice from font awesome, get it's SVG code paste it in svgr.now.sh, paste the React code in said directory and done. Thereafter we can add props like direction for chevron or color or size to fiddle with it.

You can refer to my project here.

Do note that if we use font awesome, we need to add credits in some page of our website. Probably legal page or footer.

Some obvious icons

• Arrow
• Chevron
• Save/Heart/Bookmark
• Share
• Search
• Wrench/Gears
• Human (for user account)
• Hamburger (for menu)
• Rupee

We can add rest as time passes.

I guess we can load them all in our home page for demonstration purpose for now.

Install husky into dependencies and run eslint and jest tests before push.

Let's create a button that would redirect the user to the payment page. Let's not put too much effort in styling as it has to be changed in the later stage once we are given the specific designs.

Adding a CONTRIBUTING.md file as discussed with @bogas04