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.

MIT License

Stars
20

Bookstore CMS

Desktop View Representation

📗 Table of Contents

📖 [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

Key Features

  • [Responsive layout]
  • [UX/UI accessibility]
  • [Dynamic data]

🚀 Live Demo

💻 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
    

👥 Authors

👤 Abdul Ali Noori

🔭 Future Features

  • [Add About page]
  • [Add Contact page]

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

⭐️ Show your support

If you like this project, give it a star.

🙏 Acknowledgments

I would like to thank Microverse and my coding partners. Also, I want to give credit to Nerd's lesson YouTub Channel, its react tutorial is really helpful.

❓ 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

📝 License

This project is MIT licensed.

Related Projects