bookstore-cms

The Bookstore is a website that allows us to: display a list of books, add a book and remove a selected book.

Bookstore

📗 Table of Contents

• bookstore-cms
• 📗 Table of Contents
• 📖 Bookstore
  • How to build the "Bookstore" application?
  • Projects list
    • Project 1: Initialize project with components (React only).
    • Project 2: Add reducers and actions.
    • Project 3: Use Redux in React components.
    • Project 4: Connect to API.
    • Project 5: Styling.
    • Deployment.
  • 🛠 Built With
    • Tech Stack
    • Tools i have used for this project
    • Key Features
  • 🚀 Live Demo
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • 📝 License

📖 Bookstore

The Bookstore is a website that allows us to: display a list of books, add a book and remove a selected book.

How to build the "Bookstore" application?

I will need to build a website with two subpages:

• /books
• /categories

However, I will only need to implement the /books page (see the image below). The /categories page will stay empty in this MVP (will develop this page on the future).

Projects list

I will start "Bookstore" website only with React code. Then I will be building the rest of it and learning Redux Toolkit for the whole week.

Here is the list of projects that will guide me through the steps described below. I will find details about each of the project requirements in the upcoming program activities.

• Project 1: Initialize project with components (React only).
• Project 2: Add reducers and actions.
• Project 3: Use Redux in React components.
• Project 4: Connect to API.
• Project 5: Styling.
• Deployment.

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

This is the first project of the Bookstore application. I will set up the environment and tools needed to develop a React application. In the following projects, I will develop the actual application.

• Set-up linters on local environments.

• Used correct flow GitFlow.

• Documentation the project in a professional way on README file.

• First, make sure I have Node.js installed on my local machine

• Setup a new React application using Create React App

• The application should run in the browser without errors

• splitted UI into these components:

  1. BookStoreApp: the parent or root component. It holds two direct child components.
  2. Header: display the backstore heading text.
  3. BookStoreLogic: holds the application logic. It includes two direct child.
  4. BookstoreTodo: will take the user’s input.
  5. BookStoreList: serves as a container for the bookstore items.
  6. BookStoreItem: renders the individual bookstore item.

Project 2: Add reducers and actions.

Install React Router V6 Setup router inside of Add 2 routes in this application, each should render a page component:

• /
• /categories

Project 3: Use Redux in React components.

Create components inside of the /components directory:

• Contains individual book state, as well as a button to delete the book
• Contains a list to renders individual books
• Contains a form to create new books
• Contains a navigation to link to the 2 routes you created

Project 4: Connect to API.

Project 5: Styling.

Deployment.

🛠 Built With

Tech Stack

Client Side / Front-End

• HTML
• CSS
• Javascript
• React
• React Router

Server Side / Back-End

• JSON
• Node.js
• big.js
• API Ninjas

Package, Library, Framework

• Jest

Tools i have used for this project

Code Convention, Code Analysis

• ESLint
• Webhint
• Stylelint
• Lighthouse
• node_modules checker

Version Control, CI/CD, Hosting Service

• GitFlow
• Github Pages
• Github Actions
• Git

IDE, Desktop Apps, Other Tools

• Visual Studio Code
• Github Desktop

Key Features

• display a list of books
• add a book
• remove a selected book
• single page apps (SPA)

(back to top)

🚀 Live Demo

• Click the following url for ... 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:

• git version 2.38.x
• node.js version > 12.x
• IDE (visual studio code, etc)
• browser (chrome, firefox, edge, safari)
• install the dependencies

Setup

Clone this repository to your desired folder:

  cd bookstore-cms
  git [email protected]:fickryiman/bookstore-cms.git

Install

Install this project with:

  cd bookstore-cms
  npm install

Usage

To run the project, execute the following command:

  npm run build (production environment)
  npm start (development environment)

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Run tests

To run tests, run the following command: Run Github Actions Test

  npm test

  npx stylelint "**/*.{css,scss}"
  npx eslint "**/*.{js,jsx}"

  auto fix linter with --fix
  npx stylelint "**/*.{css,scss}" --fix
  npx eslint "**/*.{js,jsx}" --fix

Deployment

You can deploy this project using: GitHub Pages Example:

[email protected]:fickryiman/bookstore-cms.git

(back to top)

👥 Authors

👤 Fickry Bil Iman

• GitHub: @fickryiman
• Facebook: @fickry.bil.iman
• LinkedIn: fickry-bil-iman

(back to top)

🔭 Future Features

• add login to user with social media auth or google auth
• create mobile version

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the https://github.com/fickryiman/bookstore-cms/issues.

(back to top)

⭐️ Show your support

If you like this project please follow me on my GitHub: @fickryiman or connect on my LinkedIn: @fickry-bil-iman.

(back to top)

🙏 Acknowledgments

First thing first, I would like to say Alhamdulillah, Thanks to my Families, Microverse and Micronaut's, Reviewer's, Thank you for all of the experiences, lesson and everythings.

(back to top)

📝 License

This project is MIT licensed.

(back to top)