Light

1gireesh / dermstore-full-stack-clone Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 2.0 1.82 MB

This is clone of dermstore.com layout and functionalities which is online ecommerce web application where you can buy items and add items to cart

Home Page: https://celadon-piroshki-a9a67d.netlify.app/

HTML 0.70% CSS 18.38% JavaScript 80.92%

chakra-ui express-js mongoose nodejs reactjs redux

dermstore-full-stack-clone's Introduction

Construct Week Project of UNIT-5

dermstore.com clone

Project code - rhetorical-cub-8075

Project Duration ( 5 days )

Start in 8th November 2022
End in 12th November 2022

Project IA Manager - Amaresh Barik

Team members

About Dermstore website

Dermstore is US web store which sells cosmetics and skin care products. In 2021, it was acquired by THG plc from Target Corporation for £260.9m and migrated onto the company's Ingenuity e-commerce platform.

functionalities implemented in pages

Navbar
Home page
All Products
Single product preview
Home page slider
Product slider
Search function
Register or signup
Login
Add to cart
Remove from cart
Footer
All the functionality like add to cart, remove from cart, seraching product all are done using backend. And Backend is build using MongoDB, Redux, NodeJS and ExpressJS.

Deployed link of the project

https://celadon-piroshki-a9a67d.netlify.app/ ( Deployed with backend API )
https://celadon-piroshki-a9a67d.netlify.app/ ( Deployed without backend API you have to clone the repositories then run the backend in local system ) *HomePage

*SearchBox

*All products

*Product preview page

*Carts items page

*Signup & Login page

*payment page like that checkout-page

dermstore-full-stack-clone's People

Contributors

Watchers

Forkers

abhijitnr bikramboss8055

dermstore-full-stack-clone's Issues

Payment

code design

add proper design
add good ui

fw19_1025_Navbar_day-3

Login and sign up added
Drop down menu
All routers

Make code better Day-2

Footer - II

fw19_1025_Login_and_Signup_day-4

Signup page design and functionality
Login page design and functionality
Cross check the link of signup and login

Improoving readability

improoving quality of code
making code more scalable

add more components

add maintainability scenarios

cart_section

create ui of cart page

Payment - II

fw19_1025_Checking_link_day-5

Check all routes
check the login and signup page working or not

Make code better

integrating user and cart

fw19_1025_Navbar_day-2

Language
Navbar logo and search
Account and Cart

create slider

create structured components
add data to components
add buttons
add images

products data

api for products
able to get the products from api

add documentation

add docs

making responsive

responsive navbar
responsive homepage
responsive for medium screen devices

search box

search feuture in backend
creating search bar ui
adding debouncing functionality

file and folder structure

re structure the code base
renaming files and folders

drop down menus

drop down menu for the cart
drop down menu for login signup

Folder structure

creating react-app
creating file structure
naming conventions

Shop By Category

create div components
add style to all products
rounded image creation
good UI creation

The Luxe List

create a slideshow
add components detailed information
add style
create two cards

Footer

reworking on cart page

making cart page responsive
making clean ui

Check again page

New design emplments

hosting the api

finding a free provider
set up the hoisting
able push the code

deploying api again

deploying backend to a stable platform
use the api properly

preview page

re designing preview page
linking preview to product buy button

Featured Brands

add functionality to components
create good UI
create crousel
create quick button

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.