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: