Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 6 hours ago
JSON representation
Ecommerce Fashion-House is a fully functional website with a beautiful user interface built with React, using Firebase and Stripe API👒👚👔
- Host: GitHub
- URL: https://github.com/mahamudm90/crwnstore-house
- Owner: MahamudM90
- Created: 2022-03-09T07:56:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-30T16:33:13.000Z (almost 2 years ago)
- Last Synced: 2023-12-29T10:27:49.617Z (11 months ago)
- Topics: firebase, jsx-syntax, reactjs, sass
- Language: JavaScript
- Homepage: https://crwncstore.herokuapp.com/
- Size: 4.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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%
**SCREENSHOTS:**
Landing Page:
---
Product Preview:
---
Sign-in && Sign-Up Page:
Cart Section:
---
## 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! 🙂