Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://m-aminalizadeh.github.io/Awesome-books-collection/

This project is about building a web-app to store your books collection in browser's local storage with CRUD feature.
https://m-aminalizadeh.github.io/Awesome-books-collection/

bootstrap5 crud-application es6-javascript eslint functional-programming gh-pages html-css-javascript javascript lighthouse localstorage npm oop responsive-website routes spa ux-ui

Last synced: 5 days ago
JSON representation

This project is about building a web-app to store your books collection in browser's local storage with CRUD feature.

Host: GitHub
URL: https://m-aminalizadeh.github.io/Awesome-books-collection/
Owner: M-AminAlizadeh
License: mit
Created: 2023-05-02T14:50:43.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2024-05-07T13:43:53.000Z (6 months ago)
Last Synced: 2024-07-25T13:35:29.053Z (4 months ago)
Topics: bootstrap5, crud-application, es6-javascript, eslint, functional-programming, gh-pages, html-css-javascript, javascript, lighthouse, localstorage, npm, oop, responsive-website, routes, spa, ux-ui
Language: JavaScript
Homepage: https://m-aminalizadeh.github.io/Awesome-books-collection/
Size: 2.11 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # 📗 Table of Contents

- [📗 Table of Contents](#table-of-contents)

- [📖 About the project](#about-project)

  - [🛠 Built With](#built-with)

    - [Tech Stack](#tech-stack)

    - [Key Features](#key-features)

  - [🚀 Live Demo](#live-demo)

  - [💻 Getting Started](#getting-started)

    - [Prerequisites](#prerequisites)

    - [Setup](#setup)

    - [Install](#install)

    - [Usage](#usage)

    - [Deployment](#deployment)

  - [👥 Authors](#authors)

  - [🔭 Future Features](#future-features)

  - [🤝 Contributing](#contributing)

  - [⭐️ Show your support](#️show-your-support)

  - [🙏 Acknowledgments](#acknowledgments)

  - [📝 License](#license)

## 📖 Awesome Books Collection 

Awesome Books Collection is a web app to store your favorite books. The user can

`Add/Read/Update/Delete` (all `CRUD` functionalities) to the collection.

This project was built with vanilla JavaScript with modules (`functional programming`) and a Class (`object-oriented programming`).

I tried to use both approaches to learn how to implement an idea into a digital solution using both of these principles.

For storing data I chose `local storage` the reason was to learn how to store data in it and how to manipulate data

using vanilla JavaScript.

> Desktop screenshots

![desktop-list-of-books](./src/assets/images/desktop-list-of-books.png)

![desktop-add-new-book](./src/assets/images/desktop-add-new-book.png)

![desktop-contact-me](./src/assets/images/desktop-contact-me.png)

> Mobile screenshots

![mobile-hamburger-menu](./src/assets/images/mobile-hamburger-menu.png)

![mobile-list-of-books](./src/assets/images/mobile-list-of-books.png)

![mobile-add-new-book](./src/assets/images/mobile-add-new-book.png)

![mobile-contact-me](./src/assets/images/mobile-contact-me.png)

## 🛠 Built With 

### Tech Stack 

  Client

  


    

      

      Javascript (modules)

      

    

    

      Bootstrap

    

    

      CSS3

    

    

      HTML5

    

  


### Key Features 

- Fully responsive

- OOP

- Functional approach (using modules)

- Pretty UI and elegant UX as a side project!

- SPA (single page application)

- Routing system

- CRUD

- Display Date and Time

- Linters (Eslint, Sytlelint, Webhint, Lighthouse)

- GitHub Actions

- Well documented

(back to top)


## 🚀 Live Demo 

- [Live Demo Link](https://m-aminalizadeh.github.io/Awesome-books-collection/)

(back to top)


## 💻 Getting Started 

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

### Prerequisites

To run this project you'll need:

- [Node js](https://nodejs.org/en)

- [Vscode](https://code.visualstudio.com/) or any other IDE

### Setup

Clone this repository to your desired folder:

```sh

  git clone [email protected]:M-AminAlizadeh/Awesome-books-collection.git awesome-books-collection

  cd awesome-books-collection

```

### Install

Install this project with:

```sh

  npm install

```

### Usage

To start/run the project:

```sh

  npm start

```

### Deployment

You can deploy this project using these:

- [GitHub Pages](https://pages.github.com/)

- [Vercel](https://vercel.com/)

- [Netlify](https://www.netlify.com/)

(back to top)


## 👥 Authors 

**Amin Alizadeh**

- [GitHub](https://github.com/M-AminAlizadeh)

- [LinkedIn](https://www.linkedin.com/in/m-amin-alizadeh/)

(back to top)


## 🔭 Future Features 

- Dark/light Theme

- Add backend and DB instead of local storage

(back to top)


## 🤝 Contributing 

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/M-AminAlizadeh/Awesome-books-collection/issues).

(back to top)


## ⭐️ Show your support 

If you like this project kindly give it a ⭐

(back to top)


## 🙏 Acknowledgments 

I would like to thank Microverse for the idea behind this and I only tried to implement it.

(back to top)


## 📝 License 

This project is under [MIT](./LICENSE) license.

(back to top)