This app simulates a simple bookstore, and it was created using ReactJS and Redux.

Related tags

bookstore
Overview

Microverse GitHub last commit (branch) GitHub Repo stars

Bookstore

About

The Bookstore is a website similar to the "Awesome Books" website built in the previous Microverse module, with pure JavaScript (see live version). My goal here is to create an MVP version of it, using ReactJS and Redux, to allow the user to:

  • Display a list of books (accessing the 'bookstore' API provided by Microverse).
  • Add a book ('ADD BOOK' button).
  • Remove a selected book ('Remove' link).

A screenshot of the Books page is presented below:

Home Page

Built With

  • HTML, CSS, JavaScript;
  • ReactJS, ReduxJS;
  • VisualStudio Code, Git, & GitHub;

Pre-requisites

  • NodeJs (v. 14.17)
  • YarnJs (v. 1.22.10)
  • Git

Live Demo

A live demo for this project can be found in this link.

Getting Started

To run this project, you only need a computer with a browser installed, and follow these steps:

  1. In your terminal, in the folder of your preference, type the following bash command to clone this repository:
git clone [email protected]:enionsouza/bookstore.git
  1. Now that you have already cloned the repo run the following commands to get the project up and running:
cd bookstore
yarn
yarn start

Author

πŸ‘€ Ênio Neves de Souza

🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

πŸ“ License

This project is MIT licensed.

Issues
  • Feature/initialize components

    Feature/initialize components

    Bookstore: initialize project with components

    In this milestone, the following requirements have been met:

    • [x] Initialize React app
    • [x] Add React Redux (npm install react-redux)
    • [x] Structure your application files using a "feature folder" approach and use the ducks pattern for your Redux files
    • [x] The building blocks of your app should be set as re-usable components (BookItem)
    • [x] Add React Router and set two <Route>s and <NavLink>s for the app's navigation:
    • Books - the default view
      • Should display the list of books (empty at this point but it should be ready for the data) with the Remove button (no funcionality yet)
      • Should have a form for adding a book (no functionality yet)
    • Categories
      • Should display "Under construction" text only.
    • [x] Styling is not required at this point.
    opened by enionsouza 0
  • Feature/create remove books

    Feature/create remove books

    Bookstore: create and remove books

    In this milestone, the following requirements have been met:

    • [x] Configure Redux store
    • [x] Write Books Action Creators and Reducer
    • [x] Implement Create New Book feature, using local React state (set title and author) - NOTE: categories and comments are NOT part of this step
    • [x] In the React component responsible for removing books, implement that event by dispatching a corresponding action
    • [x] Use the redux-logger to check if your application is working correctly
    opened by enionsouza 0
  • Feature/connect api

    Feature/connect api

    Bookstore: connect to API

    In this milestone, the following requirements have been met:

    • [x] Refactor your add book and remove book features to persist your changes in the server.
    • You should refactor the redux code of your application using middleware to make async requests to the API.
    • Don't do the changes using only React state.
    • [x] Add book and remove book should work in the same way after the refactor.
    • [x] No styling is required.
    opened by enionsouza 0
  • Feature/styling

    Feature/styling

    Bookstore: styling

    In this milestone, the following requirements have been met:

    • [x] Find all the details of the Bookstore CMS design in Zeplin
    • [x] Use the information detailed in Zeplin to style the website
    • [x] Your final design should match Zeplin's design.
    opened by enionsouza 0
Owner
Enio N. de Souza
Enio N. de Souza
This is a React application for managing books you want to read. It tracks your progress and makes the reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux.

This is a React application for managing books you want to read. It tracks your progress and makes reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux

Henry Kc 10 Oct 17, 2021
The Bookstore is a website similar to the

Bookstore The 'Bookstore' is a website similar to the "Awesome Books" website already built with JavaScript. It allows you to: Display a list of books

Mateo Villagomez 2 Oct 9, 2021
Bookstore app, store your favorites books. Built with JavaScript, React, SASS and framer.

Bookstore. Bookstore application built with REACT, JAVASCRIPT, and SASS. It lets you add and remove books. I also used motion library too create compl

Gabriel Rendon 4 Sep 2, 2021
The bookstore where you can store your best books that you read before. Built with React, Redux, and TailwindCSS.

Bookstore Project In this project, I set up my Bookstore project. It is about making a Bookstore with 2 section BOOKS and CATEGORIES (styles and funct

Arthur Guzman 3 Aug 28, 2021
This is a front-end of an application that will help organize and manage the bookstore. It is so fast, dynamic and responsive to actions and it is built with React & Redux.

Bookstore This is a front-end of an application that will help organize and manage bookstore. It is so fast, dynamic and responsive to actions and it

Baraka Mukelenga 4 Aug 9, 2021
This website is a React and Redux app. It is simply an adding and removing books store.

This website is a React and Redux app. It is simply an adding and removing books store. Thank you to the ZEPLIN website for the UI provided. This application works with an existing API.

Olipliche B.F. Mavoungou Paka 3 Oct 13, 2021
Fusion.js + Base UI Example App

Fusion.js + Base UI Example App What are we going to build? If you want to immediately get the whole application git clone [email protected]:tajo/fusion-

Vojtech Miksu 39 May 13, 2021
Learn React by Building Netflix.

It means that you are learning React.js by building a real-life project. I will explain concepts in detail. This post is the first part in my series and it is suitable for beginners.

Hiep Le 149 Oct 14, 2021
Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Davide Mandelli 3.3k Oct 14, 2021
πŸŽ“ Introduction to GraphQL + React + Java + Astra DB

?? Introduction to GraphQL + React + Java + Astra DB

DataStax Developers 68 Oct 7, 2021
πŸ‘» A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!

?? SnapChat Clone [LIVE APP] [Live App] β€’ [Video Demo] ⚑️ Breakdown Built with React Only functional components using hooks Folder structure: Flat - n

null 835 Oct 1, 2021
One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love ❀.

React front-end for tclone Try it here back-end repo here looks like twitter, but not ?? It is my own take on building Twitter clone, I have tried to

muzamil 106 Oct 3, 2021
React & Redux project - Space Travelers' Hub.

React & Redux project - Space Travelers' Hub.

Nelsino Francisco 5 Oct 8, 2021
Learn React and Redux by Building Youtube.

The repository helps you learn React and Redux by building Youtube :star:

Hiep Le 61 Jun 28, 2021
A minimal operating system created with ReactJS

mindows A minimal Operating System created with React. About This project provides a minimal Windows 10 experience in browser. It runs completely on c

Piyush Madhusudan 83 Sep 13, 2021
Simple, powerful online communities.

Simple, powerful online communities. This is the main monorepo codebase of Spectrum. Every single line of code that's not packaged into a reusable lib

Spectrum 10.2k Oct 10, 2021
A clone of Google Keep with its original Material Design aesthetics

A Clone of Google Keep A minimal Clone of Google Keep written in ReactJS with Material UI Components, themed to look exactly like Google Keep, with co

Merbin J Anselm 406 Oct 12, 2021
This is my React capstone project to handle the Stock API using Redux store.

React Capstone Project: Stock API ?? For this repository, I've been working on the React Capstone Project to create a React app using Redux, the main

Dante Alonso 3 Oct 18, 2021
React features to enhance using Rollbar.js in React Applications

React features to enhance using Rollbar.js in React Applications

Rollbar 23 Oct 21, 2021