Giter VIP home page Giter VIP logo

m-aminalizadeh / awesome-books-collection Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 2.16 MB

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

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

License: MIT License

HTML 48.13% JavaScript 51.54% CSS 0.33%
javascript spa bootstrap5 es6-javascript functional-programming html-css-javascript oop routes gh-pages localstorage npm crud-application responsive-website eslint lighthouse ux-ui

awesome-books-collection's Introduction

πŸ“— Table of Contents

πŸ“– 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 desktop-add-new-book desktop-contact-me

Mobile screenshots

mobile-hamburger-menu mobile-list-of-books mobile-add-new-book mobile-contact-me

πŸ›  Built With

Tech Stack

Client

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

(back to top)

πŸ’» Getting Started

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

Prerequisites

To run this project you'll need:

Setup

Clone this repository to your desired folder:

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

Install

Install this project with:

  npm install

Usage

To start/run the project:

  npm start

Deployment

You can deploy this project using these:

(back to top)

πŸ‘₯ Authors

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.

(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.

(back to top)

awesome-books-collection's People

Contributors

m-aminalizadeh avatar

Stargazers

Ali Reza avatar Javier Jesus MartΓ­nez FariΓ±as avatar Biftu Girma avatar

Watchers

 avatar

awesome-books-collection's Issues

Update documentation

Todo list:

  • Update readme file
  • Add the structure of JS in this project in the readme file
  • Update repo description part
  • Deployment on GitHub pages

Update file structure

Todo list:

  • Delete extra files -- vsconfig, prettierignore
  • Update package.json file -- delete useless packages
  • Add router for different pages

Add proper styling

Todo list:

  • Refactor index.html file
  • Refctor index.css file and try to use BootStrap classes instead of vanilla CSS
  • Add Favicon
  • Full responsive:
    1. brand-log part
    2. navbar section
    3. footer
    4. All 3 pages

Peer-to-peer code review

Excellent work, Congratulations!
kindly consider the following suggestions to improve the UX of your project:

  • It is better to use explicit error message text to make sure that the user understands what is going wrong;
  • Use a more easily readable format for date and time display.

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.