A modern e-commerce frontend application built using Next.js. This application allows users to browse products, view product details, and manage their shopping cart.
- Description
- Features
- Demo
- Prerequisites
- Installation
- Environment Variables
- Usage
- Testing
- Contributing
- License
- Contact
Next Frontend Shop is an e-commerce application designed to provide a seamless shopping experience. It leverages Next.js for server-side rendering and fast page loads, ensuring users can browse and purchase products efficiently.
- Browse a list of products
- View detailed information about each product
- Add or remove products from the shopping cart
- Responsive design for optimal viewing on different devices
- Fast page loads and server-side rendering with Next.js
- Dynamic product pages
Link to live demo (Replace this with the actual link to your deployed app)
Before you begin, ensure you have met the following requirements:
- Node.js and npm installed. You can download Node.js from Node.js official website.
- A modern web browser (Chrome, Firefox, Safari, Edge)
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Sajid-tech/next-frontend-shop.git cd next-frontend-shop
-
Install dependencies:
npm install
To run this project, you will need to add the following environment variables to your .env.local
file:
NEXT_PUBLIC_API_URL=your_api_url_here
NEXT_PUBLIC_API_KEY=your_api_key_here
Replace your_api_url_here
and your_api_key_here
with the actual URL and API key you are using for the backend service.
-
Start the development server:
npm run dev
The app will be available at
http://localhost:3000
. -
Browse Products:
- Navigate through the list of available products on the homepage.
-
View Product Details:
- Click on a product to see more detailed information, including price, description, and available stock.
-
Manage Shopping Cart:
- Add products to your shopping cart and manage quantities. The cart is persistent across sessions.
To run tests, execute the following command:
npm test
This will run the test suite and output the results to the console.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeature
). - Commit your changes (
git commit -m 'Add some feature'
). - Push to the branch (
git push origin feature/YourFeature
). - Open a pull request.
Please ensure your pull request adheres to the following guidelines:
- Describe the feature or fix in detail.
- Ensure code is well-documented and follows the existing code style.
- Include tests for any new functionality or changes.
This project is licensed under the MIT License. See the LICENSE file for details.
Created by Sajid-tech - feel free to contact me for any questions or suggestions!
Feel free to adjust any sections as necessary. Let me know if there are any specific details you would like to add or modify!