BookShop

BookShop is an e-commerce application for browsing and purchasing books. The project includes a Flask backend for handling API requests and a React frontend for the user interface.

Deployed Site: Live Demo

Blog Article: Final Project Blog

Authors:

• Kareem Hany (LinkedIn) - Backend Developer
• Youssef Ahmed (LinkedIn) - Backend Developer
• Sayed Abdelaal (LinkedIn) - Frontend Developer

Table of Contents

• Features
• Technology Stack
• Installation
• Usage
• Contributing
• License
• Screenshots
• Admin access
• Story and Technical Details

Features

• User authentication (register, login, logout, reset password, login with google)
• Cart functionality (add, view, update, and remove items)
• Wishlist management
• Book catalog with search and filter options
• Checkout process
• Admin dashboard for managing books, users, and orders

Technology Stack

• Frontend: React, HTML, CSS, TypeScript, Redux
• Backend: Python, Flask, SQLAlchemy
• Database: SQLite
• Authentication: Session
• Dependency Management: pip, virtualenv

Installation (Running Locally)

1. Clone the Repository

   git clone https://github.com/sayedabdelal/BookShop.git
   cd BookShop

2. Install virtualenv (if not already installed)

   pip install virtualenv

3. Create a Virtual Environment Navigate to your project directory and create a virtual environment:

   python3 -m venv venv

4. Activate the Virtual Environment To activate the virtual environment:

   source venv/bin/activate  # On Windows use `venv\Scripts\activate`

5. Install the backend dependencies

   pip install -r requirements.txt

6. Set Up Environment Variables Copy the .env.example file to .env and fill in the necessary environment variables.

   cp backend/.env.example backend/.env

   Note: The .env file is used to configure the backend. Ensure you provide the required values for the environment variables listed in the .env.example.

7. Install frontend dependencies (Terminal 1)

   cd frontend
   npm install

8. Run the frontend development server

   npm run dev

9. Run the backend server (Terminal 2)

   open new terminal and run this command in BookShop directory

   python3 run_backend.py

10. Open the webiste

    Navigate to http://localhost:5173/ in your browser.

Usage

1. Create an account and log in.
2. Browse through available book in shop or use the search feature to find books.
3. Add books to your cart and proceed to checkout.
4. Manage your cart and wishlist.
5. Add favorite books to your wishlist.

Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and create a new branch with your feature or bug fix.

1. Fork the repository
2. Create a new feature branch
3. Push your changes
4. Create a pull request

Related Projects

Dragons Project

Tic Tac Toe Game

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Screenshots

Homepage

Shop Page

Dark mode enabled! After login, you can add items to the cart or wishlist.

Add to Cart (Dark Mode)

Cart Page

Wishlist Page

Admin dashboard for managing users and books:

Admin User Management

Admin Product Management

Database Diagram

Admin Access (For Demo Purposes)

If you'd like to explore the admin dashboard, you can use the following credentials:

• Email: [email protected]
• Password: admin1234

Note: These credentials are only for demo purposes and should not be used in production environments.

Story and Technical Details

The inspiration for BookCorner came from a need to simplify the book shopping experience. I wanted to create a platform where users could easily find books, manage their carts, and make purchases without hassle.

Technical Challenges

One of the biggest challenges was managing user authentication and secure sessions across the frontend and backend. Flask's session management, along with React's state handling, required careful configuration to ensure that users remained logged in across different sessions.

Another area of focus was ensuring the smooth operation of cart and wishlist functionality. I also learned the importance of handling asynchronous operations with React Query and making API calls to the backend.

Future Iterations

In the next iteration, I aim to:

• Add user reviews and book ratings
• Implement a recommendation engine based on purchase history
• Further enhance the search functionality with filters for author, price, and publication year