Coder Social home page Coder Social logo

goyalcharu / ui-project Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 13.93 MB

This project is a web based shopping system for an existing e-shop. The project’s objective is to deliver an online shopping website which sells customized, hand painted and hand crafted products.

HTML 59.24% CSS 12.36% JavaScript 25.19% Ruby 0.04% Less 1.51% SCSS 1.66%
css html javacript mysql php

ui-project's Introduction

UI-Project

ABSTRACT

This project is a web based shopping system for an existing e-shop. The project’s objective is to deliver an online shopping website which sells customized, hand painted and hand crafted products. From hand painted clothing, photo frames, gift hampers, explosion box, stickers, hand painted masks, handmade cards, painted customized footwear, customized polaroids , illustrations, customized hampers (made according to budget), this website will provide it all. The brand is for a gender neutral audience. All the products can be used by everyone.

OBJECTIVE

The project's goal is to create a website that allows users to purchase things from an existing store. To construct such a website, comprehensive web support must be given. The primary goal of the project is to create a full and functional web application that can deliver an online shopping experience. It also helps us comprehend the notion of user-integrated graphics and how JavaScript may be inserted in HTML. It also explains how the client-side language interacts with the server-side language as well as the database. This shopping cart application is quite adaptable and may be improved by adding more functionality and changing the aesthetics for commercial usage.

EXPLANATION AND IMPLEMENTATION

Front-end

We have created 9 pages that are home page, products, product detail, cart, checkout, myaccount, wishlist, login and register, contact us. According to our client’s demands we have opted a pink-white themed website.

About Home Page: The user can see the type of products that are available like hampers, frames and boxes; Polaroids and Bookmarks; Printed tees and Jackets; Clay rings and Handmade earrings; Masks and Stickers. In addition, the user can view the latest arrivals and customize his or her order. The user can search for products by entering the search term into the search textbox provided on the top. This text box is watermarked with the words “Search” to let the user know that this is the place to enter the search terms. The home page also provides information on new deals or discounts that the site is offering, as well as a description of the services we offer, which include Secure Payment, PAN India Delivery, Return, and 24/7 Customer Support. We can learn about user ratings and reviews of the website.

About Products: The user will be able to explore the items we provide on this page, as well as sort the products by newest arrivals, most sold products, and popular in demand. They may also filter the website by the price range in which they want to find their desired products.

About Product Detail: This page contains information on the product we have chosen, as well as comprehensive information about it, such as the product price, number, sizes, and color. It also provides users with product specifications as well as feedback from prior users.

About Cart: The page displays a list of products we have added to the basket, including their price, quantity, and total amount. It also provides a cart summary and the amount we must pay, as well as the delivery cost. We may also apply for a coupon code if one is available for any of the products.

About Checkout: This page prompts the customer to provide all of the essential information to purchase the product, such as name, address, phone number, email address, nation, state, city, zip code, and so on. Also, provide the grand amount of the things we have bought, as well as payment options that the customer is comfortable with, such as Paypal, Cash on Delivery, Direct Bank Transfer, and so on.

About myaccount: This page contains details regarding our website. It features a dashboard that shows the user's orders, payment method, address, and account information. The user can also log out of the page.

About Wishlist: This page essentially specifies the product that the customer wishes to purchase in the future... such as a future wishlist.

About Contact Us: This website allows users to contact us and also locate our location via the map and address provided.

Back-end

The database has been developed using SQL, phpMyAdmin (version 5.1.3) and Xampp server. We have created a table by the name of ‘checkout_info’ which has been created for the ‘Checkout’ web page of the website which takes the customer’s information and saves it in the database. This web page asks the customer to input his/her general information such as his/her name, email id, mobile number, address, country, city, state, zip code. We have set ‘id’ as the primary key in the database.

APPLICATION

The application of this website is to help the owner of the small business “ Artwork by Yuktaa”, a platform where the owner of the franchise, Ms. Yuktaa Malik can put all the products she makes. It is important for small businesses to provide a platform wherein customers can view all the products available. As Miss Yuktaa had an Instagram store which provided limited scope to the users in terms of looking for reviews or searching for particular products it became extremely crucial for her to create a website for her brand.

RESULTS AND DISCUSSION

We were successfully able to create a website for the small business “Artwork by Yuktaa” as a team. The website can be used for any Ecommerce brand. It is easy to use, since it uses CSS and Javascript which makes the website more attractive and effective. User friendly screens are provided. The website is easy to use and interactive making online shopping a recreational activity for users. The web design has been presented to Ms. Yuktaa as well who liked the overall working and creatives of the website.

ui-project's People

Contributors

goyalcharu avatar

Stargazers

Drishti Kemni avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.