Built with ❤︎ by Timothy Merritt
Note: This project is fully-functional on desktop, but is still a WIP for mobile responsiveness. It's best viewed on a wide screen for now.
Resolute Apparel is a React mock-eCommerce site built from React, React-Router, Redux, SCSS, Firebase, and Stripe. You can view the demo site here. The goal of this project was to practice using a larger tech stack, and to employ
Resolute Apparel is bootstrapped from create-react-app. It does not currently use Hooks, as state is managed by Redux. React-Router handles the url routing with HashRouter (rather than the more typical BrowserRouter) to better integrate with GitHub Pages, though there might be some wonkiness in terms of url addresses because of the nature of how HashRouter works.
The styling is handled with SCSS, using BEM naming conventions. Currently, the site uses Open Sans for font.
Redux manages state for items added to the cart, rendered section previews, displaying the Shop, and handling user logged in state. Redux Persist creates persistent state with localStorage, saving added cart items and user credentials through refreshes and navigating away from the site.
User authentication and validation is handled through Firebase, with the option to sign-in with a pre-existing Google account or create a new account.
Payment processing functionality is handled through Stripe via React Stripe Checkout, which has a further layer of authentication where a user's account/billing information must be legitimate before checkout can finish.
Test payments can be completed with the Stripe test credit card:
| CC Number | Expiration Date | CVV |
|---|---|---|
| 4242 4242 4242 4242 | Any future date | Any future date |
To use locally, clone the repo:
git clone https://github.com/timmybytes/resolute-apparel.gitOpen directory and install dependencies:
cd resolute-apparel/
npm installTo start the development environment:
npm run startTo deploy to a domain:
Update "homepage" in package.json to the desired domain. Note that currently the project is set up to be deployed through GitHub Pages, which may cause errors elsewhere. Then run:
npm run deployThe Resolute Apparel site is offered under the MIT License.
Feel free to submit a PR, though since this is mostly a personal project, I may not merge your code. If you're looking to make extensive changes, you can fork and create your own version. Happy hacking.