Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/krenbot/crwn-clothing

E-commerce clothing store done in React w/Redux, Firebase, Stripe
https://github.com/krenbot/crwn-clothing

clothing ecommerce ecommerce-store firebase reactjs reactrouter reactrouterdom redux-saga redux-thunk styled-components

Last synced: 22 days ago
JSON representation

E-commerce clothing store done in React w/Redux, Firebase, Stripe

Awesome Lists containing this project

README 

        
# CRWN Clothing

https://superb-chebakia-e13d92.netlify.app/



## Description



CRWN Clothing is a project I initiated to gain hands-on experience in setting up, maintaining, and implementing best practices for an e-commerce website. Through this project, I delved into advanced concepts in React and various related technologies. The website offers users the ability to register or log in, maintain a persistent shopping cart, navigate different product categories (hats, jackets, etc.), select and modify items in the cart, and complete the checkout process using a credit card.



To ensure a robust and scalable application, the site was initially built using Redux, followed by the implementation of Redux Thunk and Redux Saga for additional practice. I adhered to industry-standard architecture practices and meticulously maintained code formatting throughout the project. The styling was initially done using CSS, and later refactored using Styled Components for a more streamlined development experience.



CRWN Clothing showcases reactivity and responsiveness, providing an intuitive user experience. The website leverages the power of Firebase to maintain a userbase and facilitate secure authentication. Additionally, React Router is employed to enable seamless navigation between different routes.



With CRWN Clothing, I aimed to broaden my skills in e-commerce development, React, and related technologies. Explore the codebase to witness the culmination of my learnings and dedication to building a high-quality, feature-rich e-commerce site.



## Table of Contents

  1) [Technologies](#technologies-used)

  2) [Challenges](#challenges)

  3) [Future Implementations](#future-implementations)

  4) [User Story](#user-story)

  5) [Installation](#installation)

  6) [Credits](#credits)

  7) [License](#license)



## Technologies

* [React](https://react.dev/) - Front-end library.

* [React-Router](https://reactrouter.com/en/main) - Client side app routing.

* [Redux](https://redux.js.org/) - State management.

* [Redux Toolkit](https://redux-toolkit.js.org/) - Redux development toolkit.

* [Firebase](https://firebase.google.com/) - Database management.

* [Styled Components](https://styled-components.com/) - Consistent style management.

* [Netlify](https://www.netlify.com/) - Site deployment.

* [Stripe](https://stripe.com/) - Credit card payment management.



## Challenges

* State management - redoing the application in Thunk and Saga.

* Styled components - learning a new styling framework.



## Future Implementation

* Use/redesign codebase to use as a tested template for local vendors.

* Redesign UI to be less minimalistic.



## User Story

```md

AS AN e-commerce clothing customer

I WANT to have an easy-to-navigate store with secure payment portals

SO THAT I can buy stylish clothing with peace of mind.

```



## Installation

* Clone directory to code editor of choice

* Use custom `$npm install` script to install necessary JSON packages

* Use `$npm start` to build and deploy on your local machine server



## Credits

* Project came from a tutorial by [Zero-To-Mastery](https://zerotomastery.io/)'s [Complete React Developer](https://zerotomastery.io/courses/learn-react/) course. 
Thanks, [Yihua](https://github.com/ZhangMYihua).



## License

MIT © Krenbot