Giter VIP home page Giter VIP logo

roshan194 / crwn-clothing Goto Github PK

View Code? Open in Web Editor NEW

This project forked from rishabhsingh12/crwn-clothing

0.0 0.0 0.0 11.02 MB

An ecommerce cloth webshop for viewing and ordering different cloth and wardrobe items.. It has the login and signup functionalities with firebase and all the ecommerce site functionalities.

Home Page: https://crwn-clothingshop.netlify.app

Shell 0.39% JavaScript 96.17% HTML 2.87% SCSS 0.57%

crwn-clothing's Introduction

Crwn-Clothing webshop

Description -

An e-commerce cloth store webaite which contains different categories of cloth items where users can signin / signup , view different categories of items , add/checkout items from cart and make orders from the site.

Tech Stack Used -

  • Reactjs (v.17.0.2)
  • Firebase(v.9.6.6)
  • Styled components(v4.3.3)
  • redux(v.4.1.2)
  • sass(v.1.49.4)
  • react-router-dom(v.6.0.0)

 

React Redux SASS Firebase

Styled Components React Router

Features-

  • Login/Signup for the store done using firebase authentication service.

  • Viewing of different item-directories, category-items and component items with assets and data stored on firestore db

  • Complete cart functionality for adding and checkout items and manipulating items quanity.

  • State management of app done using redux and orders history page available for the successful orders.

 

Live preview of the application -

 

Image preview of the application-

ItemsDirectory-

ItemsDirectory

CategoryItems Preview -

Category-directories

Login/Signup Preview -

Login/Signup

Orders Preview -

Orders

CheckoutItems Preview -

Checkout

Component Preview -

Component

 

Future Updates-

  • Will make the site responsive for all the screens.

  • Add a new dummy payment gateway for making orders

 

Feel free to give suggestions and advices 😀

 

 

How to fork and clone

One quick note about cloning this project. If you wish to make commits and push your own code, you'll need to fork the project first. Forking allows you to have your own copy of this repository by adding a duplicate version in your own profile!

You can see the fork button in the top right corner of every GitHub project; click it and a copy of the project will be added to your GitHub profile under the same name as the original project.

github fork

After forking the project, simply clone it the way you would from the new forked project in your own GitHub repository and you can commit and push to it freely!

After you fork and clone:

Install dependencies

In your terminal after you clone your project down, remember to run either yarn or npm install to build all the dependencies in the project.

Set your firebase config

Remember to replace the config variable in your firebase.utils.js with your own config object from the firebase dashboard! Navigate to the project settings gear icon > project settings and scroll down to the config code. Copy the object in the code and replace the variable in your cloned code.

Screen Shot 2022-03-11 at 8 51 22 PM

Branching strategy

After forking this repository and cloning it down, you will have access to all the lesson branches with code at different checkpoints throughout the course. If for some reason you need to work from the codebase at one of these lesson branch checkpoints, follow these steps:

  1. Checkout to the lesson-# (let's use lesson-15 as an example) branch
git checkout lesson-15
  1. Branch off from lesson-15. This will create a new branch where the code of lesson-15 is the basis for your new branch. You can name your new branch whatever you want! Let's say we use my-main-branch as the name.
git checkout -b my-main-branch
  1. Now you can just code on this branch, push code from this branch up to your forked repo etc. The main thing to remember is that you want to be on this branch for your own code, so remember what you named this branch!

crwn-clothing's People

Contributors

rishabhsingh12 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.