https://github.com/aryan-programmer/clothes-suite
A clothes shopping web application developed with ReactJS (with Typescript) utilizing Firebase to store data
https://github.com/aryan-programmer/clothes-suite
bootstrap bootstrap5 firebase firebase-auth firebase-firestore javascript mobx mobx-react netlify netlify-functions neumorphic-design neumorphic-ui neumorphism react react-bootstrap react-typescript reactjs sass scss typescript
Last synced: 3 months ago
JSON representation
A clothes shopping web application developed with ReactJS (with Typescript) utilizing Firebase to store data
- Host: GitHub
- URL: https://github.com/aryan-programmer/clothes-suite
- Owner: aryan-programmer
- Created: 2022-12-01T12:47:52.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T12:27:26.000Z (over 2 years ago)
- Last Synced: 2025-01-17T04:12:45.644Z (5 months ago)
- Topics: bootstrap, bootstrap5, firebase, firebase-auth, firebase-firestore, javascript, mobx, mobx-react, netlify, netlify-functions, neumorphic-design, neumorphic-ui, neumorphism, react, react-bootstrap, react-typescript, reactjs, sass, scss, typescript
- Language: TypeScript
- Homepage: https://clothes-suite-80b2ff.netlify.app/
- Size: 1.81 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Clothes Suite
A clothes shopping web application developed with ReactJS (with Typescript). View the website hosted on Netlify: [https://clothes-suite-80b2ff.netlify.app/](https://clothes-suite-80b2ff.netlify.app/)
Key Features:
- Utilizes Firebase to store data on the server side.
- Implements global state-management with MobX. Uses TSyringe to ensure proper dependency injection of singleton stores.
- Implements a demonstration payment API with Stripe.
- Uses a customized version of Bootstrap 5 to implement a [neumorphism](https://www.toptal.com/designers/ui/neumorphic-ui-design) like interface.
## Setup
Before starting the application you must perform the following steps:
- Run `yarn install` to install all necessary dependencies.
- Create a Firebase project.
- Add a web application to this project.
- Paste the web app's Firebase configuration in `netlify.toml` as a JSON object representation:
- Paste the web app's Stripe Publishable Key in `netlify.toml` as well:
- Paste the Stripe Secret key in `netlify.toml`:
```toml
[context.environment]
REACT_APP_FIREBASE_CONFIG='{ "apiKey": "API_KEY", "authDomain": "AUTH_DOMAIN", "projectId": "PROJECT_ID", "storageBucket": "STORAGE_BUCKET", "messagingSenderId": "MESSAGING_SENDER_ID", "appId": "APP_ID" }'
REACT_APP_STRIPE_PUBLIC_KEY='public_kvalue'
STRIPE_PRIVATE_API_KEY='private_kvalue'
```
## Available Commands
In the project directory, you can run:
### `yarn start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
#### `netlify dev`
This runs the serverless function(s) so that one can test the payment API. The local server is generally hosted on [http://localhost:8888](http://localhost:8888)
### `yarn test`
Launches the test runner in the interactive watch mode.\
### `yarn build`
Builds the app for production to the `build` folder.\