/Nike-Ecommerce

It is a Responsive E-Commerce, With Multiple Products Pages, for Women, Men, and Kids. And Nice Animations.

Primary LanguageJavaScript


Nike E-Commerce

It is a Fully Responsive Ecommerce Website, A Re-Design for Nike, With Multiple Products Pages, for Women, Men, Kids, and Collections, And Nice Animations.


Features

  • The User can Discover and Add the Products to The Cart, then Perform The Checkout Process.
  • Backend mocking using Online API Link, Created with JSON Server and Hosted Online on Render.com.
  • Store The Cart Items in The Local Storage.
  • Form Validation using React Hook Form.
  • Dynamic Routes for Each Individual Product.
  • Programmatic Routing.
  • Card Carousel to Display Stories.
  • Search Functionality with Abilities to Reset and Choose From The Trending Keywords, The Search Query is Displayed in The URL.
  • Store The States Globally Using Redux.
  • Filtration Capability with Multiple Options like Price, Size and Color.
  • Pagination.
  • Nice Hand-Picked Photos, Lottiefiles, Confetti Effect and Nice Covers Created With Adobe XD.
  • Nice Looking Card for The Single Product.

Technologies

  • React.
  • React Router.
  • React Query & Axios.
  • Redux
  • Tailwind CSS.
  • React Hook From.
  • Splide.js.

Future Updates

  • Implement Stripe for Checkout.

Online Tools

Here are some online tools i used to facilitate doing this project.

Website Name Description
pngwing Free PNG Images.
UI Verse Open-Source UI elements for any project.
10015 Useful CSS Tools and Other Services.
Svg Repo Open-licensed SVG Vector and Icons.
Dribbble UI Design Inspiration.
Font Pair Free fonts and font pairings to use for your next design project.
Lottie Files Lightweight, scalable animations for your website.
Remove BG Remove Image Background 100% Automatically and Free.
Compress Image Compress Images Online.
SVG Cropper SVG Cropper Online.
CSS Gradient Create a Gradient Background for Websites..
Gradicol Catchy gradients Stunning templates.

API Creating

I've Created the API with JSON Server and Hosted Online on Render.com with Aid of node.js.

Steps:

1-Create new repo then clone it in vs-code in a new folder.

2-Install the package.json file.

npm init -y

3-Open the package.json file and add this script.

"start" : "node index.js"

4-Install json server.

npm install json-server cors
npm install json-serve

5-Create a .gitignore file and add the node-modules file to it.

6-Create the index.js and db.json files.

7-Add a certain logic to the index.js file, you can get this logic from here.

8-Add your JSON data to the dp.json file, and run the npm run start script

9-Add, commit and push the changes.

10-Go to the render website and connect with your GitHub account then create new web services then choose your repo then click create a web service.

Other web hosting services will work like Vercel, Netlify, Railway...etc.

Animation by Oto Motion

Thanx for watching. z