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.
- 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.
- React.
- React Router.
- React Query & Axios.
- Redux
- Tailwind CSS.
- React Hook From.
- Splide.js.
- Implement Stripe for Checkout.
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. |
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