/beatbox

Primary LanguageJavaScript

BeatBox

Overview

BeatBox is an e-commerce website for sound accessories, offering a seamless shopping experience for users. With a fully responsive design, BeatBox allows users to browse, add items to their cart, proceed to a secure payment gateway powered by Stripe, and receive a success page after completing the transaction. The application leverages modern web technologies to provide an efficient and user-friendly platform for purchasing sound accessories.

Features

  • Responsive Design: BeatBox is built with a responsive design, ensuring optimal viewing and interaction across various devices and screen sizes.
  • Product Catalog: The application offers a wide range of sound accessories, including headphones, speakers, microphones, and more, presented in an organized and visually appealing product catalog.
  • Shopping Cart: Users can add products to their cart, review the contents, and make adjustments before proceeding to checkout.
  • Secure Payment Gateway: BeatBox integrates with Stripe, a trusted and secure payment gateway, providing a seamless and secure payment process for customers.
  • Order Confirmation: After completing the transaction, users receive an order confirmation page with details of their purchase and a confirmation number.
  • Product Search: The application includes search functionality that enables users to quickly find specific sound accessories based on keywords or categories.

Tech Stack

  • Frontend: The frontend of BeatBox is developed using Next.js, a popular JavaScript library for building user interfaces, and utilizes responsive design principles for optimal cross-device compatibility.
  • Backend: The application's backend is powered by Sanity, a flexible and customizable headless CMS (Content Management System).
  • Payment Gateway: BeatBox integrates with Stripe, a secure and trusted payment gateway, to handle secure online transactions.
  • Deployment: The application is deployed using Vercel, a cloud platform for static sites and serverless functions, offering scalability and ease of deployment.

Setup and Usage

To access and use BeatBox, visit the deployed application at https://beatbox-seven.vercel.app/.

To set up and run BeatBox on your local machine, follow these steps:

  1. Clone the repository:

    git clone [repository URL]

  2. Install dependencies:

    cd beatbox
npm install

  3. Configure environment variables:

    • Create a .env file in the root directory.
    • Add the necessary environment variables, such as API keys, database credentials, and Stripe configuration details, to the file.

  4. Start the development server:

    npm start

  5. Access BeatBox in your browser at http://localhost:3000.

Contributing

Contributions to BeatBox are highly appreciated! If you wish to contribute to the project, please follow these guidelines:

  1. Fork the repository and create a new branch for your feature or bug fix.
  2. Commit your changes with descriptive commit messages.
  3. Push your branch to your forked repository.
  4. Open a pull request, explaining the purpose and changes of your contribution.

Contact

If you have any questions or suggestions regarding BeatBox, please feel free to reach out to us at shubhjhawar78@gmail.com.

Thank you for using BeatBox! We hope you have a delightful shopping experience for your sound accessories.