The project is a clone of amazon.com and I build it around that. I name the clone site "Apni Dukan". For me, the main objective of this project is to test the skills I learn about HTML, CSS, and JAVASCRIPT and got some knowledge about managing the project.
Project Description:- So, I add a few pages in my clone. Like, Home page, Products page, Single product detail, and cart. Other than that there are signs and payment gateway pages.
Signin and signup pages:- The user can access any page on the website but if the user wanna visit the cart. The user has to sign in to the system first. Firstly users have to register their details like name, email, and password in the signup section. Users can use the same name for multiple accounts but must use a unique email each time. And another there all the details much be filled in otherwise, the website didn't let the user register them. Then the data will be stored in the Local System Once the user is resister to the system they can go to the SignIn page to log in to the system.
On the sign-in page, the user has to enter the resister gmail and password. If the password and email matched the user data from the Local System. The user will be redirected to the home page. If the users fill in any wrong then they got the alert accordingly.
Home Page:-
The home page has three sections the Nav bar, the products display, and a footer.
NavBar:-
In the nav bar, there are few functionalities have been added. First, the logo of the site the user can click on the logo to visit back to the landing page from any page of the website. Second is the search and sort function there functions only work on the product pages other than that there are static or not added in the nav bar. Third in the cart icon. It helps the user to visit the cart page.
There is a sub-nav bar also attached to the nav bar it has the category like mobile, clothing, and jewel. Users can visit any of the product pages Kirby clicking on them.
Product Display:- It has not that much functionality as I make it static but a few boxes or div are functions that will redirect the user to the product page according to the images inside that box or div.
Footer:-
It is also static and has no functionality.
Product Pages:- There are three product pages. All of them have the same kind of functionalities. There are products displayed on the pages and ails and then add the user can click on the product to see its det product to the cart.
SingleProduct Page:- Once the user clicks on a particular product, the product will be opened in the single product pages with all the details. From there, the user can add the product to the cart and can set the quantity.
Cart Page:-
Cart pages show all the products added by the user. with the quantity and the price and the total cart price or we can say the total price of all the products.
From there the user can go to the payment pages and make the payment. The payment interface is static and has not to have much functionality. It has only a payments option and once the user clicks on the payment option it will give the message "Payment is successful"
Some of the challenges you faced and features you hope to implement in the future:-
- I use random classes and IDs that make my work more difficult to understand.
- One thing I learned is that to complete any project on time planning is important. The more important thing is doing the planning in a way that if something goes out of control. You can manage that.