App deployed: https://webstore-c908a.web.app/
"Web Store" is clone of amazon(online store) which allow users to do online shopping simulation. Functions included register/login, adding items to basket, removing items from basket, viewing the basket and subtotal, payment process and viewing the order histories.
- Fork this repository, then clone your fork of this repository.
- Install dependencies using the
npm install
command in both / and /functions folder. - Create a firebase project and enable the Email/Password Sign-in method.
- Create a file called firebase.js in the src folder with the following code.
//import firebase from "firebase";
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
//firebase config from the firebase project goes here
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);
export { db, auth };
- Create a stripe account.
- Create a file called .env in / with the following code.
REACT_APP_PK=//stripe publishable key goes here
- Create a file called .env in /functions with the following code.
SK=//stripe secret key goes here
- Use
firebase emulators:start
in /functions to setup the backend and replace the baseUrl in /src/axios.js with url obtained fromfirebase emulators:start
. - Use
npm start
in / to run the app. default url: http://localhost:3000/ - Use
4242 4242 4242 4242 04/24 242 42424
for the credit card infomation.
- Front-end
- React
- React Router
- Axios
- Styling
- CSS3
- Back-end
- Express
- Firebase
- API
- Stripe
- @material-ui/core
- @material-ui/icons
- @stripe/react-stripe-js
- @stripe/stripe-js
- @testing-library/jest-dom
- @testing-library/react
- @testing-library/user-event
- axios
- firebase
- moment
- react
- react-currency-format
- react-dom
- react-router-dom
- react-scripts
- web-vitals
- cors
- express
- firebase-admin
- firebase-functions
- stripe
Last updated Octeber 26, 2022