Code Monkey home page Code Monkey logo

ab-noori / bookstore-cms Goto Github PK

View Code? Open in Web Editor NEW
20.0 1.0 0.0 3.98 MB

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.

Home Page: https://ab-noori.github.io/bookstore-cms/

License: MIT License

HTML 8.53% JavaScript 58.50% SCSS 31.82% CSS 1.16%
components react reactjs routing sass scss api-backend asyncthunk redux-toolkit

bookstore-cms's Introduction

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]

(back to top)

๐Ÿš€ Live Demo

(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

๐Ÿ”ญ 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.

(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 YouTub Channel, its react tutorial 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 licensed.

(back to top)

bookstore-cms's People

Contributors

ab-noori avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.