Ideacart Ideakart is a site that gives u an idea about the book you want to buy.It offers a huge collection of books in diverse categories. It has a user-friendly search engine and a quick delivery system. With this, they even provide the best discounts on books you buy. You can write to us with any idea or any help you need.
Cloning ideacart.com was our project for Unit-5 Construct week at Masai School. Our main objective was to complete all main functionality of this e-commerce website , starting from sing up till buying of the products, and that too without refreshing or rerendering the website more than once throughout the operation.
We completed this project within a week.
- Click here to preview our project.
- Aman Singh Click here to view our Blog.
- Click here to watch a brief preview of our project in video format.
- Images : ideacart.com
- Content : ideakart.com
- CSS Library: Bootstrap | Tailwind CSS | Material-UI
- Icons : Reacct-Font Awesome
- References : MDN Docs | W3School | React | React Redux | Express | MongoDB
- React
- React-Redux
- MongoDB
- Express
- HTML 5
- CSS 3
- JavaScript
- CSS Library — Bootstrap, Tailwind CSS, Material-UI
- Github
Client: ideacart.com
- Login | Sign Up .
- Search bar for finding the product by it's name and viewing it.
- Product page.
- Detailed product preview page
- Add to cart option for buying products.
- Payment Page.
- Media query for All Size Screen.
The landing page consists of Top Reads the books users are buying the most in the previous week. At the top, you will see a navigation bar that shows a search bar where you can type the name of the book you want to buy. At the bottom of the page, there is a footer that shows about, contact details and other necessary details about our website.
Here in Login part, the user need to fill the correct credentials to log in, and if input type mismatches then it will throw an error to "Enter a valid Credential" Once we are done with Login part we will be redirected to OTP page and after submitting correct OTP it will take you to the Home Page.
On the product page, you will see different sets of products with their brief details. You can add the products to the cart from here. Specific product page with more details about the product.
In this section, you will see the products added to the cart and wishlist. After the add the products to the cart, the user will be able to go to the checkout page, on clicking the button “PROCEED TO PAY SECURELY” the user will be redirected to the Payment page.
After clicking on proceed button of cart, we will be redirected to payment page, where we can select any of the suggested payment method to proceed with the payment. After this we will be asked to enter contact number along with some other details and after verifying the OTP we will be redirected us to the home page.
-
As every journey has some challenges and so was ours. In our team, all of the members were not familiar with each other so it was difficult for all of us to communicate and collaborate, there were some moments where members were not able to communicate with each other and had a conflict and it was hard for everyone to handle these conflicts.
-
Another problem was to merge all of the files in a proper sequence which was again a difficult task for us because while merging and connecting all the pages some of the pages had the same name, and while running the site it was redirecting to some other pages so it was difficult to find the location and to rename the file.
-
We faced challenges with CSS, as few of the team members used Bootstrap and Material-UI and remaining few members unknowingly used the same name class which already existed in bootstrap, which created an unpredictable conflict in the CSS Part.
-
We faced difficulties to manage the routes, page, dependencies to work at a time.
-
The main challenge of ours was to run the whole project without rerendering or reloading.
Click on name to visit Github Account
Click the name to visit their Github Profile
For support, email - [email protected]