ATTIRIA

Attiria - Nobero Clone: An E-commerce Web Application

This project is a full-stack e-commerce web application, a clone of the Nobero website, built using React for the frontend and Django with Django Rest Framework for the backend. It also includes a Scrapy spider to scrape product data from the original Nobero website.

Table of Contents

• Features
• Technologies Used
• Getting Started
  • Prerequisites
  • Backend Setup (Django API)
  • Frontend Setup (React)
  • Scrapy Spider
• Usage
• Contributing

Features

• Product Listing: Browse a wide range of products categorized for easy navigation.
• Product Details: View detailed information about each product, including price, description, and available SKUs (colors and sizes).
• Category-based Filtering: Filter products based on categories clicked on the homepage.
• Responsive Design: A user-friendly interface that adapts to various screen sizes.

Technologies Used

Frontend:

• React
• React Router DOM
• Axios
• Tailwind CSS

Backend:

• Django
• Django Rest Framework
• SQLite3 (for development)

Scraping:

• Scrapy

Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Python 3.8+
• Node.js and npm (or yarn)
• pip (Python package installer)

Backend Setup (Django API)

1. Navigate to the backend directory:

   cd nobero_api

2. Create and activate a virtual environment:

   python -m venv venv
   # On Windows
   .\venv\Scripts\activate
   # On macOS/Linux
   source venv/bin/activate

3. Apply migrations:

   python manage.py makemigrations products
   python manage.py migrate

4. Load initial data (optional, but recommended after scraping): If you have scraped data into data/products.json, you can load it into the database:

   python manage.py load_products data/products.json

   (Note: The load_products command is a custom management command. Refer to nobero_api/products/management/commands/load_products.py)

5. Run the development server:

   python manage.py runserver

   The API will be running at http://127.0.0.1:8000/.

Frontend Setup (React)

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm start
   # or
   yarn start

   The React app will be running at http://localhost:3000/ (or another available port).

Scrapy Spider

1. Navigate to the scraper directory:

   cd nobero_scraper

2. Install Scrapy:

   pip install scrapy

3. Run the spider to scrape data:

   scrapy crawl nobero_spider -o ../nobero_api/data/products.json

   This command will run the nobero_spider and save the scraped data into products.json within the nobero_api/data/ directory.

Usage

1. Start the Django backend: Follow the "Backend Setup" steps and ensure the Django server is running.
2. Start the React frontend: Follow the "Frontend Setup" steps and ensure the React development server is running.
3. Access the application: Open your web browser and navigate to http://localhost:3000/.
4. Browse categories: Click on the images on the homepage to filter products by category.
5. View product details: Click on a product to see its detailed information.

Issue Creation ✴

Report bugs and issues or propose improvements through our GitHub repository.

Contribution Guidelines 📑

• Firstly Star(⭐) the Repository

• Fork the Repository and create a new branch for any updates/changes/issue you are working on.

• Start Coding and do changes.

• Commit your changes

• Create a Pull Request which will be reviewed and suggestions would be added to improve it.

• Add Screenshots and updated website links to help us understand what changes is all about.

• Check the CONTRIBUTING.md for detailed steps...

Contributing

Enhance Attiria with your contributions! Whether you have innovative suggestions, spot bugs, or wish to introduce new features. Contributions of any kind from anyone are always welcome🌟❕

Your insights are invaluable to us. Reach out to us team for any inquiries, feedback, or concerns.

📄 License

This project is open-source and available under the MIT License.

📞 Contact

Developed by Eccentric Explorer

Feel free to reach out with any questions or feedback!