Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ab-noori/bookstore-cms

Using React and Redux in the context of a real application to create an simplified version of Bookstore to: Display a list of books, Add a book and Remove a selected book.
https://github.com/ab-noori/bookstore-cms

api-backend asyncthunk components react reactjs redux-toolkit routing sass scss

Last synced: about 2 months ago
JSON representation

Using React and Redux in the context of a real application to create an simplified version of Bookstore to: Display a list of books, Add a book and Remove a selected book.

Awesome Lists containing this project

README 

        



![](https://img.shields.io/badge/Microverse-blueviolet)









> # Bookstore CMS



| Desktop View Representation|

|---------------------------------------|

|
|



# 📗 Table of Contents



- [📖 About the Project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

- [💻 Getting Started](#getting-started)

  - [Setup](#setup)

  - [Prerequisites](#prerequisites)

  - [Install](#install)

  - [Usage](#usage)

  - [Run tests](#run-tests)

  - [Deployment](#triangular_flag_on_post-deployment)

- [👥 Authors](#authors)

- [🔭 Future Features](#future-features)

- [🤝 Contributing](#contributing)

- [⭐️ Show your support](#support)

- [🙏 Acknowledgements](#acknowledgements)

- [❓ FAQ (OPTIONAL)](#faq)

- [📝 License](#license)



# 📖 [Bookstore-CMS] 



> **[Bookstore-CMS]** Using React and Redux in the context of a real application to create a simplified version of Bookstore to: Display a list of books, Add a book and Remove a selected book.  



## 🛠 Built With 



### Tech Stack 

- Client

    



### Key Features 



- **[Responsive layout]**

- **[UX/UI accessibility]**

- **[Dynamic data]**



(back to top)



## 🚀 Live Demo 



> - [Live Demo on Gh-pages](https://ab-noori.github.io/bookstore-cms/)



(back to top)



## 💻 Getting Started 



To get a local copy up and running, follow these steps:



### Prerequisites



In order to run this project you need:

  - A browser of your choice.

  - A text editor of your choice.

  - An installed node.js on your local system



### Setup



Clone this repository to your desired folder:



- Use the following Commands:



      cd your-desired-folder

      git clone [email protected]:ab-noori/bookstore-cms.git



### Install

- Install this project with:



       npx create-react-app my-app

       cd my-app

       npm start



### Usage

- Use the following commands to run on your local system:



      npm run build

      npm run deploy



### Run tests

- Run the following script and style test:



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

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



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

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

 

### Deployment

- 1- install `gh-pages` with the following command:



      npm i -D gh-pages



- 2- Add `homepage` to project's Jason file:



      "homepage": "https://ab-noori.github.io/bookstore-cms",



- 3- Add the following scripts to the project's Jason file:



      "predeploy": "npm run build",

      "deploy": "gh-pages -d build "



- 4- Finally run the following command:



      npm run deploy



(back to top)



## 👥 Authors 



👤 **Abdul Ali Noori**



- GitHub: [@ab-noori](https://github.com/ab-noori)

- Twitter: [@AbdulAliNoori4](https://twitter.com/AbdulAliNoori4)

- LinkedIn: [abdul-ali-noori](https://www.linkedin.com/in/abdul-ali-noori-384b85195/)



## 🔭 Future Features 



- [ ] **[Add About page]**

- [ ] **[Add Contact page]**



(back to top)



## 🤝 Contributing 



Contributions, issues, and feature requests are welcome!



Feel free to check the [issues page](https://github.com/ab-noori/bookstore-cms/issues).



(back to top)



## ⭐️ Show your support 



 

  If you like this project, give it a star.



(back to top)



## 🙏 Acknowledgments 



  I would like to thank Microverse and my coding partners. Also, I want to give credit to [`Nerd's lesson`](https://www.youtube.com/@Nerdslesson)

YouTub Channel, its [`react tutorial`](https://www.youtube.com/watch?v=cd3P3yXyx30) is really helpful.



(back to top)



## ❓ FAQ (OPTIONAL) 



- **How to make it mobile friendly?**



  - Put a viewport tag in the header



- **How to design the site?**



  - Draw a mockup before starting to code



(back to top)



## 📝 License 



This project is [MIT](./LICENSE) licensed.



(back to top)