Bookstore CMS

Welcome to the Bookstore CMS, a web application for managing and categorizing your book collection. This project provides an intuitive user interface to add, edit, and categorize books, making it easy to keep your library organized. The Bookstore CMS is built with React, Redux, and React Router for efficient state management and dynamic routing.

Tech Stack 🛠

This project was built using a variety of modern technologies and tools:

• React - A JavaScript library for building user interfaces.
• Redux Toolkit - State management for React applications.
• React Router - Routing library for React applications.
• Tailwind CSS - A utility-first CSS framework.
• Axios - A promise-based HTTP client for making requests to your API.

• Bookstore API: The custom API created for this project.
  • API Documentation: Documentation for the Bookstore API.

• Git - Distributed version control system.
• GitHub - Web-based platform for version control and collaboration.

• VS Code - A lightweight code editor by Microsoft.

Our project leverages these technologies to deliver a modern and efficient web application.

Table of Contents

• Tech Stack 🛠
• Getting Started 💻
  • Prerequisites 🧱
  • Installation 🏗️
  • Setting Up Environment Variables ⚙️
• Running the Application 📋
• Project Structure 📗
• Usage 📂
• Contributing 🤝
• Acknowledgements 🙏
• License 📝
• Overview 📷

Getting Started 💻

Prerequisites 🧱

Before you begin, ensure you have met the following requirements:

• Node.js: Download and install Node.js from the official website.
• npm (Node Package Manager): npm is included with Node.js. Make sure you have npm installed as well.

Installation 🏗️

1. Clone the repository to your local machine:

   git clone https://github.com/lily4178993/bookstore-cms.git
   

2. Navigate to the project directory:

   cd bookstore-cms
   

3. Install the project dependencies:

   npm install
   

Setting Up Environment Variables ⚙️

The Bookstore CMS uses environment variables to configure certain settings. To set up these variables, follow these steps:

1. Create a .env file in the project's root directory:

   touch .env
   

2. Open the .env file in a text editor of your choice.

3. Define the following environment variables in the .env file:

   REACT_APP_URL=your_api_url_here
   REACT_APP_KEY=your_api_key_here
   

   Replace your_api_url_here and your_api_key_here with the appropriate values for your API setup.

4. Save the .env file.

Now, the project is configured to use your custom environment variables.

Running the Application 📋

To run the application locally, use the following command:

1. Fixing JavaScript/JSX Errors

To identify and automatically fix JavaScript/JSX errors using ESLint, run the following command:

 npx eslint "**/*.{js,jsx}" --fix

ESLint will analyze your code and attempt to fix any issues automatically.

2. Fixing CSS/SCSS Errors

To identify and automatically fix CSS/SCSS errors using Stylelint, run the following command:

 npx stylelint "**/*.{css,scss}" --fix

Stylelint will analyze your CSS and SCSS files and attempt to fix any issues automatically.

Project Structure 📗

The project is organized as follows:

• src/: Contains the source code of the application.
  • components/: Contains reusable React components.
  • redux/: Manages the application state using Redux.
  • assets/: Stores static assets like images and icons.
  • containers/: Defines the main pages of the application.
• App.js: The root component of the application.
• .env: Configuration file for environment variables.
• README.md: This documentation file.
• package.json: Defines project metadata and dependencies.
• public/: Contains static files like the HTML template and the project's favicon.

Usage 📂

• Navigate to the Books page to view, add, and edit books.
• Use the Categories page to categorize books by genre.
• Easily manage your book collection using the intuitive user interface.

Contributing 🤝

Contributions are welcome! If you'd like to contribute to the project, please follow these guidelines:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them using conventional commits.
4. Push your branch to your fork.
5. Open a pull request with a clear title and description.

Please ensure your code adheres to the project's coding standards and is well-documented.

Acknowledgments 🙏

We would like to express our sincere gratitude to the talented artists and photographers who contributed their work to this project. Their beautiful images have enhanced the visual appeal of our application. Please take a moment to appreciate their creativity and generosity:

• Deemo
• Icon8

We are thankful for their valuable contributions to our project, making it more visually appealing and engaging.

License 📝

This project is licensed under the MIT License - see the LICENSE file for details.

Overview 📷

Here are some videos from the Bookstore CMS application:

• Desktop Version:

https://github.com/lily4178993/bookstore-cms/assets/101261047/d84f4716-17c7-41f8-a328-92fd07375a34

• Mobile Version:

https://github.com/lily4178993/bookstore-cms/assets/101261047/14d37177-6b52-40b2-8aa3-9b12d642e72c