This is a shopping cart application built with React and Stripe for processing payments. The app provides a simple e-commerce store where users can browse products, add them to a cart, and proceed to checkout.
- Product Store: Displays a list of products with their names and prices.
- Cart: Users can add or remove items to/from their cart.
- Checkout: Users can view the contents of their cart, calculate the total price, and proceed to checkout using Stripe's payment gateway.
- Modal Interface: Cart items are displayed in a modal when the user clicks the cart button in the navigation bar.
- Payment Processing: Integrates with Stripe for secure payment processing.
Follow these steps to get the project up and running locally:
git clone https://github.com/your-repo-name/shopping-cart-app.git
cd shopping-cart-appIn the root directory, install the necessary dependencies for the front-end:
npm installAlso, install dependencies for the back-end in the server directory:
cd server
npm installIn the server directory, you need to set up an Express server with Stripe integration for payment processing.
-
Create a
.envfile to store your Stripe secret key:STRIPE_SECRET_KEY=your-stripe-secret-key
-
Run the server:
node index.js
The server will listen on port 4000 and handle the checkout requests.
In the root directory, run the following command to start the React development server:
npm startThis will run the app on http://localhost:3000.
CartProduct.js: Component to display a product in the cart.ItemCard.js: Displays individual product items with options to add or remove from the cart.Navbar.js: Contains the navigation bar and the cart modal for displaying cart contents and proceeding to checkout.
Cancel.js: Page shown when the user cancels the payment during checkout.Store.js: Displays all available products in the store.Success.js: Page shown upon successful payment.
- Provides the global context for managing cart state, including adding/removing products, getting total price, etc.
- Contains the product data (name, price, and unique ID) and helper functions for getting product details.
- Main entry point of the React application where routes and context providers are set up.
- Back-end server using Express and Stripe to handle checkout requests and redirect users to Stripe’s payment page.
- React: Front-end library for building the user interface.
- React-Bootstrap: UI components for building the interface.
- React-Router-Dom: For handling routing in the app.
- Stripe: For handling payment processing.
- Express: Server-side framework for handling requests.
- CORS: Middleware to enable cross-origin requests between front-end and back-end.
-
Viewing Products: The products are displayed on the Store page (
Store.js). The user can click on any product to add it to the cart. Each product has an "Add To Cart" button. -
Managing Cart: When a user adds a product to the cart, it is stored in the global state using React's Context API (
CartContext.js). The user can view the cart by clicking on the cart icon in the navigation bar (Navbar.js), which opens a modal displaying the cart contents. -
Checkout Process: The user can proceed to checkout, which communicates with the Express server. The server uses the Stripe API to create a checkout session. Upon success or failure, users are redirected to either the Success or Cancel page.
- POST
/checkout: This API handles the checkout process, receiving the cart items and creating a Stripe session. The response includes a URL to redirect users to Stripe's checkout page.
Unit and integration tests can be written using jest and @testing-library/react. Basic tests have been set up for rendering components.
To run the tests, use the following command:
npm test- Add user authentication to track orders.
- Improve error handling for payment failures.
- Enhance UI/UX design with better animations and responsiveness.
This project is licensed under the MIT License - see the LICENSE file for details.
Feel free to contact me at KristopherPoston@gmail.com