Welcome to the A&M Shopping Brand website repository! This project utilizes React.js for the frontend and Node.js with Firebase for the backend to create a scalable and efficient e-commerce platform.
To get started with this project, follow these steps:
-
Clone the Repository:
git clone https://github.com/mdimado/aandmfashion.com.git cd aandmfashion.com
-
Install Dependencies:
npm install
-
Set Up Firebase:
- Create a Firebase project at Firebase Console.
- Obtain your Firebase config credentials.
- Add your Firebase config to
src/firebase/firebaseConfig.js
.
-
Start the Development Server:
npm start
This will run the React development server. You can view the website at
http://localhost:3000
.
The project folder structure is organized as follows:
public/
: Contains static assets and the mainindex.html
file.src/
: Contains all the source code for the React.js frontend.assets/
: Static assets such as images, fonts, and other media files used in the project.components/
: Reusable React components used throughout the project.custom-hooks/
: Custom React hooks that encapsulate reusable logic.pages/
: React components representing different website pages.redux/
: Redux store setup, reducers, and actions.routers/
: React Router configuration and routing components.services/
: Utility functions and API service modules.stripe/
: Integration with Stripe for payment processing.styles/
: CSS or SCSS stylesheets for styling components.utils/
: Helper functions and utilities.App.css
: Global CSS file for styling the main application layout.App.js
: Main component where routing and layout are defined.firebase.config.js
: Firebase configuration and initialization.index.js
: Entry point of the React application.
In the project directory, you can run the following scripts:
npm start
: Runs the app in development mode.npm test
: Launches the test runner in interactive watch mode.npm run build
: Builds the app for production to thebuild
folder.
Explore these related topics to understand more about this project:
- React, Redux, and managing state in a single-page application.
- Firebase for real-time data management and user authentication.
- Integrating third-party services like Stripe for payments.
- Using React Router for client-side routing.
- Styling components with CSS or SCSS for a polished user interface.
For more information about the technologies used in this project, refer to the following documentation:
![Screenshot 2024-06-22 at 10 44 35 AM](https://private-user-images.githubusercontent.com/123477562/341937145-f01c90ec-ef14-4020-bac5-24ce80420e7a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5OTMzNTcsIm5iZiI6MTczODk5MzA1NywicGF0aCI6Ii8xMjM0Nzc1NjIvMzQxOTM3MTQ1LWYwMWM5MGVjLWVmMTQtNDAyMC1iYWM1LTI0Y2U4MDQyMGU3YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOFQwNTM3MzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kNjQwNTgwNzE2YmY1YjU0NTQ3M2YxODk3MjgwZWI3MTMxZmM3ZGZkMzlkMDU4Zjc5MzJkYTkwNWE3OWJlMGYzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.7QEk_Lx9iqqlRSD92t8djQ7aUDnhVo3Br8LYxFcs4EQ)
![Screenshot 2024-06-22 at 10 45 15 AM](https://private-user-images.githubusercontent.com/123477562/341937189-d2cee0cf-151b-484a-85e4-d5d990b3ee06.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5OTMzNTcsIm5iZiI6MTczODk5MzA1NywicGF0aCI6Ii8xMjM0Nzc1NjIvMzQxOTM3MTg5LWQyY2VlMGNmLTE1MWItNDg0YS04NWU0LWQ1ZDk5MGIzZWUwNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOFQwNTM3MzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01NjM0MjcwNzM2ZGViOGQ5NWY3ZjBkNGViZWZkNTQwZWVhY2IwMDdjMDJjOWJmNWFmYjhmZDM4YWJjYTU5OTQwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.WD3FSFeAsKyRxvEEvFbuDbcpewhv62JChdUC4HpQoyg)
![Screenshot 2024-06-22 at 10 45 43 AM](https://private-user-images.githubusercontent.com/123477562/341937202-5f2fa18f-8aa9-4a07-89b6-38d137cd6c39.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5OTMzNTcsIm5iZiI6MTczODk5MzA1NywicGF0aCI6Ii8xMjM0Nzc1NjIvMzQxOTM3MjAyLTVmMmZhMThmLThhYTktNGEwNy04OWI2LTM4ZDEzN2NkNmMzOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOFQwNTM3MzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mZmQ0ZmE1ODM0Nzg5ZTEzZTFkY2VlNGNkMDIyYTEzOWEyY2Q5NGU5ZTQ3ZDEyMjgyMDVjOTkyMWVkMzdmNGJlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.BqIeG_AEZOCqUIUg3hU7efJkxZLjabeHNywV_Su3ZIs)
![Screenshot 2024-06-22 at 10 46 55 AM](https://private-user-images.githubusercontent.com/123477562/341937269-19e1109b-0e48-48c2-91ff-a6700b9b00b1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5OTMzNTcsIm5iZiI6MTczODk5MzA1NywicGF0aCI6Ii8xMjM0Nzc1NjIvMzQxOTM3MjY5LTE5ZTExMDliLTBlNDgtNDhjMi05MWZmLWE2NzAwYjliMDBiMS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIwOFQwNTM3MzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04MDY2YjBiNjdlMjBlODM5ZTYwYzQ5OGEyMTU1OTJiMWM0NmVhNjFmZTczODJkYTFkNGNmYmE5ZTNlMjg1NGE2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.SGPmbYBB7n2cMVgyr13GpH46XqXjhs-vSfmM4pE5TA8)