The Campers Shop Frontend is a React-based web application that serves as the user interface for the Campers Shop. It enables users to browse through a wide range of camping products, view product details, manage their shopping cart, and place orders. The application integrates with a backend server to fetch product data, handle user authentication, and process orders. The UI is built using modern React practices, including hooks and functional components, and styled with Tailwind CSS.
Live Link: Campers Shop
- Product Listing: Browse and search for camping products with pagination and sorting.
- Product Details: View detailed information about each product.
- Shopping Cart: Add products to the cart, update quantities, and remove items.
- Order Management: Place orders and view order history.
- Responsive Design: Mobile-friendly design for an optimal user experience on all devices.
- Admin Dashboard: Manage products, orders, and users through an admin interface.
- React: JavaScript library for building user interfaces.
- Redux: State management for managing application state.
- React Router: Library for routing in React applications.
- Tailwind CSS: Utility-first CSS framework for styling.
- Cloudinary: Cloud storage service for managing images.
- React Hook Form: Library for managing form state and validation.
- React Pdf: Library for generating order invoice
Instructions on how to install, configure, and get the project running locally.
- Node.js and npm installed on your machine.
- Backend server running for API integration.
- You can get it from Car Rental System
- Cloudinary account for image storage.
- Strip: for payment system.
-
Clone the repository:
git clone https://github.com/Atik293/campers-shop-frontend.git cd campers-shop-frontend -
Install dependencies:
yarn install
-
Create a
.envfile in the root directory and add the following environment variables:VITE_BASE_URL=http://localhost:5000 VITE_COULDINARY_UPLOAD_PRESET=your_cloudinary_upload_preset VITE_COULDINARY_NAME=your_cloudinary_name VITE_STRIPE_SECRET=your_stripe_secret_key
-
Start the development server:
yarn dev
-
Open http://localhost:5713 to view it in the browser.
This project is open source and available under the MIT License.
Contributions are welcome! Please create a pull request or open an issue to discuss changes.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent