Awesome Books

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ (OPTIONAL)
• 📝 License

📖 Awesome books

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

How to build the "Awesome books" website

• 1: Manage books collection (plain JS with objects).
• 2: Manage books collection (plain JS with classes) and add basic CSS.
• 3: Create a complete website with navigation.
• 4: Using Javascript Class
• 5: Refactor code with ES6 module

Will start by building the core functionalities and ignoring how the website looks. At the very beginning the website will look similar to the UI below. Note that it is plain HTML with no styling, but it will allow to add and remove books from the list!

Once have the code working, will play with refactoring it. In this step will also need to adhere to the layout presented in the wireframe, but i will choose the application's styling. So i initial ugly HTML will turn into something similar to this:

In the last step, will build a complete website with working navigation. When a user clicks on a link in the navigation bar, the content in the main section of the website changes (URL stays the same, though.) Again styling is my choice, but it is essential to adhere to the layout presented in the wireframe. my end result should look similar to this:

🛠 Built With

Tech Stack

Client Side / Front-End

• HTML
• CSS
• Javascript

Server Side / Back-End

• JSON
• ES6

Tools i have used for this project

Code Convention, Code Analysis

• ESLint
• Webhint
• Stylelint
• Lighthouse
• node_modules checker

Version Control, CI/CD, Hosting Service

• Github Pages
• Github Actions
• Git

IDE, Desktop Apps, Other Tools

• Visual Studio Code
• Github Desktop

Key Features

• Mobile First Approach
• Responsive Website
• Button Interactions (i.e. hover, etc.)
• Attractive Images & Design
• Modal/dialog
• Dynamic page (data is retrieved from localstorage JSON)

(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
• browser (chrome, firefox, edge, safari)

Setup

Clone this repository to your desired folder:

  cd my-folder
  git [email protected]:fickryiman/awesome-books.git

Install

Install this project with:

  cd my-project
  node install

Usage

To run the project, execute the following command: run live server

Run tests

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

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

Deployment

You can deploy this project using: GitHub Pages Example:

[email protected]:fickryiman/awesome-books.git

(back to top)

👥 Authors

👤 Author 1

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

(back to top)

🔭 Future Features

• Dynamic content
• Add functionality of Javascript
• Add list of my recent works / projects
• Store data to database
• Adding my blog related with my work experiences

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [email protected]:fickryiman/awesome-books.git.

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