BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book.

Last update: Aug 22, 2022

Overview

Project Name : BookStore CMS

BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book.

In order to achieve this project I used some resources and technologies listed below :

Project view

Built With

Major languages : JavaScript , JSX and CSS
Frameworks : none
Toolchain : Babel
Library : React.js
Technologies used : Github, Git, Gitflow and Linters

Live Demo (not available yet)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites ♻️

A personal computer connected to the internet;
Have a working and updated browser.
Have a local version control like git installed on your computer
Have an account on Github, as an online/remote Version Control System
Code editor (Visual studio code, sublime text, notepad++, ...) installed on your computer;
To be okay with javaScript ES6
Knowledge of HTML and CSS.

Setup 🎰

Click the me and you'll land on the pure repository;
click on the green ( 🟢 ) button with Code Inscription;
You can choose to download the project or just clone it if you are familiar with Git and Github;
Follow normal step once download in your computer and use it as it's yours.

Install

If you are familiar with git, Run npm install to get all dependencies required to run the linters checks, otherwise use the downloaded project on your computer without testing files

Run test 🧪

Run the command bellow inside your git bash or command line interface..

npm run start : to run the project in your default web Browser
npx stylelint "**/*.{css,scss}" : for the css codebase and use of best practices. you can add
npx eslint . : for the JavaScript codebase and use of best practices
Note that you can add --fix keyword to the command for Css and/or JavaScript to make sure that you avoid all errors coming from your code editor

Author

👤 Chris Siku

GitHub: @githubhandle
Twitter: @twitterhandle
LinkedIn: LinkedIn

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Comments

Milestone 5: Deploy project on Netlify

What I add to the project

[Note: In this project's milestone] I was supposed to add styling to the project but as add styling in the Milestone 1 and noticed that on the submission of the project on Milestone 4 I just deploy the project on Netlify so that the styling can be visible.

Click here to view the live demo and styling

opened by Chrissiku 2
MIlestone 3 : Use Redux in React components.
What I add to the project 💻

In this project's milestone, I use the Redux store to display books. I also add some UI elements to my components and made them dispatch actions.

What I use 👨‍💻

[x] React-redux.

[x] Readux-toolkit

[x] Provider,

[x] useSelector,

[x] useDispatch

[x] React Components

What I implement ♻️

I keep state immutable in reducers!

I change the default state in my books reducer from an empty array to an array with a few books

I import Redux Provider and your store in the main component of your React app

I connect my app to the Redux store

I make sure that list of books displays books from the Redux store.

I add functionality for the "Add new" button click

I add functionality for the "Remove" button click

Technology used 🧑‍💻

Language : JavaScript(ES6), JSX and CSS3

Framework: None

state container : Redux

Library: Reactjs

Module bundler : Babel

Technology: Gitflow, Github Workflow, Linters
opened by Chrissiku 1
Milestone 1 : Initialize project with components (React only).
What I add to the project 💻

in this project's Milestone I lay foundations of the Bookstore website. I create the React part of the app and I also set up routing using React Router.

What I use 👨‍💻

[x] React Router.

[x] React Components

What I implement ♻️

Initialise React app.

Set as re-usable components

Add React Router and set two <Route>s and <Link>s for the app's navigation

Technology used 🧑‍💻

Language : JavaScript(ES6), JSX and CSS3

Framework: None

Library: Reactjs

Module bundler : Babel

Technology: Gitflow, Github Workflow, Linters

Project New Overview
opened by Chrissiku 1
Milestone 4 : Connect React-redux ap to api
What I add to the project 💻

In this project's milestone, I connect my React-Redux application to an existing API to create and remove books on a remote server.

What I use 👨‍💻

[x] Use fetch or axios with createAsyncThunk for making API calls.

[x] Readux-toolkit

[x] Provider,

[x] useSelector,

[x] useDispatch

[x] React Components

[ ] Use store, actions and reducers in React.

What I implement ♻️

Fetch book list from Bookstore API on Books page load

I Refactor my add book and remove book features to persist your changes in the server

Make sure that the Add book and remove book are working in the same way after the refactor.

Also Implement some styling to the project

Technology used 🧑‍💻

Language : JavaScript(ES6), JSX and CSS3

Framework: None

promised-based HTTP : axios

state container : Redux

Library: Reactjs

Module bundler : Babel

Technology: Gitflow, Github Workflow, Linters
opened by Chrissiku 0
Install redux-thunk
What I add to the project 💻

In this project's milestone, I configure your Redux Store and write actions and reducer for adding and removing books. NOTE: editing an existing book and updating the progress is not part of this step. Neither is the styling of the application's components but adding and removing actions need to be implemented

What I use 👨‍💻

[x] React-redux.

[x] React Components

What I implement ♻️

Add Redux Toolkit

Structure application files using a "feature folder

Write the book's actions and reducer

Write categories actions and reducer

Configure the Redux Store

Technology used 🧑‍💻

Language : JavaScript(ES6), JSX and CSS3

Framework: None

state container : Redux

Library: Reactjs

Module bundler : Babel

Technology: Gitflow, Github Workflow, Linters
opened by Chrissiku 0

BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book.

Related tags

Overview

Project Name : BookStore CMS

Project view

Built With

Live Demo (not available yet)

Getting Started

Prerequisites ♻️

Setup 🎰

Install

Run test 🧪

Author

🤝 Contributing

Comments

Milestone 5: Deploy project on Netlify

What I add to the project

Click here to view the live demo and styling

MIlestone 3 : Use Redux in React components.

What I add to the project 💻

What I use 👨‍💻

What I implement ♻️

Technology used 🧑‍💻

Milestone 1 : Initialize project with components (React only).

What I add to the project 💻

What I use 👨‍💻

What I implement ♻️

Technology used 🧑‍💻

Project New Overview

Milestone 4 : Connect React-redux ap to api

What I add to the project 💻

What I use 👨‍💻

What I implement ♻️

Technology used 🧑‍💻

Install redux-thunk

What I add to the project 💻

What I use 👨‍💻

What I implement ♻️

Technology used 🧑‍💻

Owner

Chris Siku

Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has threee different sections: 1. books list, 2. add new book, 3. contact.

The Bookstore is a website that allows the user to :display a list of books , Add a book and remove a selected book.

The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.

"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application with JavaScript, the website is more interactive!

Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list

"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list.

This project is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This Awesome books webpage was created using ES6.

Awesome Books. In this project, I built a basic website that allows users to add/remove books from a book list. This project is build with JavaScript.

This is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This was a continuous project, where in each milestone, new feature(s) was/were added to it.

This is an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

AweSome Book App displays the book details entered by user and saves the information in Local storage. User can add and remove a book title/author to the library and from the library.

This is a basic app that allows user add/remove books from a list of books. It was created by using JavaScript arrays and objects to dynamically modify the DOM.

This is an Awesome books page, a basic website that allows users to add and remove books from a list. Built with JavaScript.

Book-list project, the user can add/remove books from the list.

Awesome books app is a basic website that allows users to add/remove books from a list. It is a single page app (SPA) which allow switching to different pages of the app without page load. Built with JavaScript.

In this project, I built a basic website that allows users to add/remove books from a book list.

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.