joyapisi / awesome-books

Awesome Books Project

HTML, CSS and JavaScript Awesome Books Project

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
• Tech Stack
• Key Features
• 🎥 Video Explanation
• 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support -- 🙏 Acknowledgements
• ❓ FAQ
• 📝 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. By building this application, you will learn how to manage data using JavaScript. Thanks to that, your website will be more interactive. You will also use a medium-fidelity wireframe to build the UI.

🛠 Built With

Tech Stack

Javascript runtime environment

• Node JS

Version control

• Git Hub

Key Features

• [Medium-fidelity Wireframes]
• [Desktop Version]
• [Dynamic Design]

(back to top)

🎥 Video Explanation

Coming soon!

🚀 Live Demo

Live Demo

💻 Getting Started

Creating your first "Awesome Books" project

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

Prerequisites

In order to run this project you need:

-A Git hub account -Git bash -Node JS -Visual Studio Code as your code editor

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone[(https://github.com/MarwanDev/Awesome-Books.git)]

Set Up Linters

Define Linters

A linter is a tool to help you improve your code. You can learn more about Linters here: (source: (https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/)).

Advantages of Linting:

1. Fewer errors in production- The use of linters helps to diagnose and fix technical issues such as code smells. As a result, fewer defects make their way to production.
2. Achieving a more readable and consistent style, through the enforcement of its rules.
3. Having more secure and performant code.
4. Having an objective and measurable assessment of code quality.
5. Having fewer discussions about code style and aesthetic choices during code reviews.

Install Linters

You can find linters for most of the programming languages, e.g. Rubocop for Ruby or ESLint for JavaScript.

Also, there are many ways you can integrate a linter in your workflow:

-text editor plugin -GitHub Actions -GitHub apps

Set up Linters

Note: The npm package manager is going to create a node_modules directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a .gitignore file and add node_modules to it:

.gitignore

node_modules/

ESLint

Run

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

Web Hint

This is a customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.

NOTE: If you are using Windows, make sure you initialize npm to create package.json file.

npm init -y

1. Run

   npm install --save-dev [email protected]
   

   how to use npm: (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
2. Copy .hintrc to the root directory of your project.
3. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
   • If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
4. Run

   npx hint .
   

   Copy contents of .eslintrc.json to the root directory of your project
5. Fix validation errors.

Stylelint

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

1. Run

npm install --save-dev [email protected] [email protected] [email protected] [email protected] not sure how to use npm? Read this.

2. Copy .stylelintrc.json to the root directory of your project.

3. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.

If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it. 4. Run npx stylelint "**/*.{css,scss}" on the root of your directory of your project.

5. Fix linter errors.

6. IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

Making Your HTML Using Medium-fidelity wireframes

-Make sure to use a design that is similar to the Medium-fidelity wireframes to present your website

(back to top)

👥 Authors

👤 Joy Phoebe

• GitHub: (https://github.com/joyapisi)
• Twitter: (https://twitter.com/joyapisi)
• LinkedIn: (https://http://www.linkedin.com/in/joy-phoebe-00b80a13a)

👤 Marwan Abdelsattar

• GitHub: (https://github.com/MarwanDev)
• Twitter: (https://twitter.com/MarwanEg)
• LinkedIn: (https://www.linkedin.com/in/marwan-abdelsattar-665a59105/)

🤝 Contributing

🔭 Future Features

[Feature-1]

• Add more styling (aesthetics)

[Feature-2]

• Add mobile version

(back to top)

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

⭐️ Show your support

If you like this project, kindly leave a comment below and share it with someone who enjoys coding! Coding is all about continuous learning and allowing yourself to be a beginner. Keep going!

🙏 Acknowledgments

I'm thankful to Microverse for providing a study platform which guided me through this project and to my coding partners at Microverse for the collaborative effort.

❓ FAQ

• [Question_1] What is a medium-fidelity wireframe?

  • Medium-fidelity wireframes present how your website's elements should be arranged, but they skip detailed information about aesthetics (e.g., colors, images). They can assist with communicating to teams how aesthetic features can support essential functionalities. Please read Low Fidelity Wireframes vs High Fidelity Wireframes to fully understand the difference between low-, medium-, and high-fidelity wireframes.

• [Question_2] Where can I download node JS for installation?

  • Node Js can be downloaded here-
    • Node JS

📝 License

This project is MIT licensed.

(back to top)