Giter Club home page Giter Club logo

bookroom's Introduction

Book Room Website

This is a website for people who want to search, add, store, edit, delete book records. They can search for books, add books, edit books, delete books. Admins can also create and delete genre's. Each user can only delete books added by that user.

UX

The book page the book room website is white and simple for the the user to use. There is a simple search bar they can use as a user or an admin user, with a search and reset button. Along with a simple navigation bar leading you to the books, profile page, add book, manage categories and log out as an admin or as a user the books, profile page, add book and log out page. The book room once clicked brings you back to the book page.

As a user on the books page, you can search bar you can search key words from the books title, author or genre. You can click the edit button next to the book you want to edit, this lets you to the edit book page where you can edit the book genre, title, author, due date and mark as urgent or not. At the bottom of the edit book page you can select edit book or cancel.

On the profile page you can check to see if you are logged in as a user e.g Terri or as an Admin.

As a user on the add book page you can add a book, choose its genre, book title, author, due date, mark as urgent or not then click add book button.

Then you can select log out from the nav bar.

As an admin you select books then you can search the keys words from the book title, author and genre. Select profile and check the profile to see that you are logged in as an admin. You can select add a book add a book. You can select manage categories where you can add, edit and delete a category. Then you can select log out to log out.

UI

This website is for individuals who love reading, they want to keep a record of the books and genres. This project will help them keep track of all the books they want to read.

User stories

Epic 1

  • As an admin user I want to search all the books by key words from the title, author and genre.

Story 1

  • As an admin user I want to be able to add new books.

Story 2

  • As an admin user I want to be able to add, edit and delete categories.

Epic 2

  • As a user to search all the books by key words from the title, author and genre

Story 1

  • As a user I want to be able to add new books.

Features

Existing Features

Book Room - The Book Room button allows users to click on and get brought back to the books page from any of the other pages.

Nav Bar - The nav bar allows the user to click on any of the navigation links, each one brings them to another page.

Reset button - The reset button allows the user to click on the button bringing them back to the list of books.

Search button - The search button allows the user to search key words from the book title, author or genre.

Delete button - The allows the user to delete a book.

Edit button - The edit button allows the user to edit the books genre, title, author, due date and mark as urgent.

Cancel button - The cancel button allows the user to cancel any edits to the books.

Add book feature - Allow the user to add the books name, author, due date, mark as urgent and select the add book button.

Features Left to Implement

I started a delete_confirmation page so that the user would get a message saying are you sure you want to delete? This is a future feature too be finished.

Technologies

HTML The project uses HTML5 mark up language code used for basic description and layout of website.

CSS The project uses CSS3 style sheet language used to create content structure and design of website.

JavaScript / JQuery The project uses vanilla javascript is plane javascript without the need or use of javascript libraries. The project uses JQuery to simplify website creation.

Python / Flask The project uses python as it is a high-level programming language designed to be easy to read and simple to implement. The project uses flask to as a web framework.

Mongo DB The project uses mongo db as a document-oriented, high volume database.

Git The project uses Git tool used for version-control system for tracking changes in source code during software development for website.

GitHub The project uses GitHub as a git repository hosting sercice for the website.

GitPod The project uses GitPod asw an online IDE which can be launches from any GitHub page.

Fontawesome The project uses fontawesome for the icon links.

Materialize The project uses materialize for the icon links, accordion and date calendar.

Testing

  • Open webite on chrome, safari and firefox to manually test all links.

  • In dev tools the site has been tested on all mobile devices, tablets through to laptops and computers.

  • Log in as a user Terri password Hack27ney.

  • Go to nav bar and select Books, this takes you to the books page.

  • Once on the Books page you can use the search bar, using key words to narrow down your search.

  • You can select the reset button to reset back to the orginal the list of books.

  • Select delete button to delete a book.

  • Select the edit button to edit the genre, book title, author, due date or mark as urgent, then click the edit book button to save changes made or the cancel button to cancel the changes.

  • Go to nav bar and select profile, this takes you to the profile page.

  • Go to nav bar and select add book, this allows you to choose book genre, title, author, due date and mark as urgent if you like then select add book to save.

  • Go to nav bar and select log out, this logs you out.

  • Log in as a user Admin password Hack27ney.

  • Go to nav bar and select Books, this takes you to the books page.

  • Once on the Books page you can use the search bar, using key words to narrow down your search.

  • You can select the reset button to reset back to the orginal the list of books.

  • Select delete button to delete a book.

  • Select the edit button to edit the genre, book title, author, due date or mark as urgent, then click the edit book button to save changes made or the cancel button to cancel the changes.

  • Go to nav bar and select profile, this takes you to the profile page.

  • Go to nav bar and select add book, this allows you to choose book genre, title, author, due date and mark as urgent if you like then select add book to save.

  • Go to nav bar and select manage categories, click add category button to add a category, on the add category page type in the category name and click add category. Click on the edit button on any of the existing categories, on the edit category page you can change the name and click edit category or click cancel. You can also click delete to delete any of the existing categories.

  • Go to nav bar and select log out, this logs you out.

Bugs

  • When I found bugs I double clicked the site and went to dev tools check the console log and found a resolution.
  • Got rid of 404 errors.
  • Tested responsiveness of site and links.

Existing bugs

None

Deployment

  • The code is hosted by master branch in GitHub
  • Deployed the project using Heroku.
  • Running the code using GitPod.
  • Used the GitPod to run and debug my code within the workspace.
  • Used console in GitPod to write code and use terminal and Git commands to send code to GitHub repository to save code.
  • Used Git to save code and view changes made.
  • Used GitHub & Heroku repository to save code.
  • Adding to the repository git add -Acknowledgements git commit -m "initial commit" git push

Credits

Inspired by Tim Nelson for his mini-project videos.

Acknowledgements

Inspired by Tim Nelson for his mini-project videos.

Link to Wireframe

My wireframe was created using wireframepro https://s3.amazonaws.com/assets.mockflow.com/app/wireframepro/fileexport/Export_D0bb409598699aa3410c0f724ec91428c.pdf

bookroom's People

Contributors

terrimarie avatar

Watchers

James Cloos avatar

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.