Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mahamudm90/crwnstore-house

Ecommerce Fashion-House is a fully functional website with a beautiful user interface built with React, using Firebase and Stripe API👒👚👔
https://github.com/mahamudm90/crwnstore-house

firebase jsx-syntax reactjs sass

Last synced: about 1 month ago
JSON representation

Ecommerce Fashion-House is a fully functional website with a beautiful user interface built with React, using Firebase and Stripe API👒👚👔

Awesome Lists containing this project

README 

        

## Crwnstore-House👚👖👔



E-Commerce Fashion-House Is a Fully Functional Website With A Beautiful User Interface Built With React, Using Firebase & Stripe API 👔 👕 👚 👛 👜 



### Work Under Progress

The App is Being under Maintenance, As more Work Needs to Be Done.



Current Functionality includes:



- Create An account or Sign In with Google

- Sign In

- Add items to cart

- Remove item/items from cart

- Responsive design

- Load/Update data asynchronously using Firebase

- Payments with Stripe (Testing Mode)



### Version 1 :

* The data is Stored locally and not on Firestore



An E commerce platform made using React JS, Redux, Firebase (authentication), Firestore, Stripe API (temporarily creating dummy payment gateway)



The application is composed of the following Features:



## Technologies



1. React.js (Front-end)

2. SASS and Styled Components (Styling)

3. Redux and Redux Saga (State Management)

5. Firebase (Database)

6. Stripe API



### Front-End

* A landing page with animated minimalistic design, with the major categories of items.

* A quick peek page where 5 products of each categories are on display.

* A page with Sign-in and Sign-out components.

* All form related fields are made using reusable components.

* Has a cart feature which opens up and displays the items selected in a summary, also has a checkout button.

* The cart component also allows to edit the contents of the items selected.

* Check out features are yet to be integrated into the appplication. 



### Firebase



* As of this moment I am using firebase for user authentication, also enabled google sign in authentication.

* It is also used to store user data 

* In the future it will also hold all shopping related and cart related dtaa of each user.



**Progress:**

Version 1 completed and hosted



Version 2 Progress: 50%




![](src/assets/progressbar.png)



**SCREENSHOTS:**



Landing Page:



![](src/assets/main-screen.png)

---

Product Preview:



![](src/assets/preview-page.png)

---

Sign-in && Sign-Up Page:



![](src/assets/signinup.png)



Cart Section:



![](src/assets/cart.png)



---



## Developed With



* [Visual Studio Code](https://code.visualstudio.com/) - A source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring

* [React](https://reactjs.org/) - A javascript library for building user interfaces

* [Create react app](https://create-react-app.dev/) - A quick method to start developing a react application.

* [Babel](https://babeljs.io/) - A transpiler for javascript

* [Webpack](https://webpack.js.org/) - A module bundler

* [SCSS](http://sass-lang.com/) - A css metalanguage



---

 ###    [Live Site](https://crwn-live-preview.herokuapp.com/)



## Getting Started



These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.



### Prerequisites



The following software is required to be installed on your system:



* Node 8.x

* Npm 3.x



Type the following commands in the terminal to verify your node and npm versions



```bash

node -v

npm -v

```



### Install



Follow the following steps to get development environment running.



* Clone _'react-e-commerce-website.git'_ repository from GitHub



  ```bash

  git clone https://github.com/MahamudM90/FASHION-HOUSE.git

  ```



   _OR USING SSH_



  ```bash

  git clone [email protected]:MahamudM90/FASHION-HOUSE.git

  ```



* Install node modules



   ```bash

   npm install

   ```



### Starting front-end servers



* Build application



  ```bash

  npm start

  ```

---



## Future Updates



- Enable PWA

- Product Page

- Improve overall UX/UI and fix bugs

- Featured Products

- Recently Viewed Products



## Known Bugs



Feel free to email me at [email protected] if you run into any issues or have questions, Ideas or concerns. Please enjoy

and feel free to share your opinion, constructive criticism, or comments about My work. Thank you! 🙂