Wilde Book Club

The Wild Book Club is a community brought together by the love & joy that the famous Oscar Wilde brings to our lives. The Wilde Book Club was started in 2017 & the group currently has 12 members. we are always happy for new members to join, and look forward to hearing new ideas and opinions. This is a club for people who know and love the works of Oscar wilde and also for those who just want to learn more to learn about his works and life.

The Book Club is a reading and discussion group who meet once a week on Facebook Meet-up. This meeting takes place at 7pm on the first Friday of every month and is hosted by me (Michelle). We discuss the fascinating life of Oscar Wilde & books, plays and stories written for and by Oscar Wilde. There has also been many collections and biographies written about his life & so many other topics we delve deep on.

If you are interested in joining, get in tough with us anytime through our social media links. Have a Wilde day, Michelle

UX

User stories

As a user I would like to the following:

Successfully implemented

• View information about OScar Wilde.
• View books written by Oscar Wilde.
• View plays written by Oscar Wilde.
• Find out where I can purchase Oscar Wilde literature.
• Join Oscar Wild Book Club.
• View contact information about the Book Club.

Not yet implemented

• Add Contact form to answer questions people may have.
• Add a Oscar Wilde biography page.

Design

Icons

I used Font Awesome for the social media icons and menu bar for the mobile mobile.

Typography

• I used Google Fonts for the typography
  • Bad Script
  • Major Mono Display
  • Philosopher

Wireframes (Mobile)

Wireframes (Desktop)

Features

1. View Oscar Wilde's Books

• Users can view Oscars Wilde's written work

2. Purchase Books by Oscar Wild & other authors that have written books on Oscar Wilde

• Users can use links under each book that will direct the user to Amazon where they can make their purchase.

3. Mobile dropdown menu

• Users can easily navigate though our app with mobile dropdown menu providing links to all pages.

4. Social media links

• Users can contact us through Facebook, Twitter, Instagram & Facebook Messenger.

Future features

• I would like to add a contact form and receive the message sent to my email.
• I would like to add a Oscar Wild biography page where people can learn more about Oscar Wilde.

🔝 Back to Top

Technologies

Web development

• 

  • Code editor & version control

• 

  • Used as version control system

Front-End Technologies

• 

  • Markup language.

• 

  • Used to add style to the markup.

• 

  • Used to show navigation menu on mobile devices.

Design

• Draw.io
  • Used for designing wireframes

🔝 Back to Top

Testing

1. Page speed metrics & SEO analytics

Google page speed insight (Used to tests performance score)

Mobile

Desktop

2. Browser Testing

I tested my application across three major browsers: Chrome, Firefox, and Safari. I tested for the following issues.

• Screen overflow.
• Console errors.
• Accessability issues.

External Validation W3C Validator

1. Validate HTML

W3C Markup Validation

I used prettier to format my HTML & CSS which added a closing tag to the meta
tags and anchor tags & caused the following warnings.

2. CSS

W3C CSS Validation

3. JavaScript

JS Hint

🔝 Back to Top

Deployment

The project was deployed using GitHub pages and is live now Wilde Book Club

Local Deployment

Navigate or create a folder would like to clone the repository into & run the following command.

git clone https://github.com/Michelle-io/wilde-book-club.git

If you use Visual Studio Code you can add Vite from the market place for a better development experience.

Remote Deployment

There are many ways to deploy this project, however I chose GitHub pages.

Deploying using GitHub Pages

To deploy to GitHub pages add the repository to your GitHub, next go to the pages option in settings & click deploy from branch button. The project will be live in a few minutes.

🔝 Back to Top

Credits

Content

• Awesome Badges Used to create markdown badges in the README.

Media

• Book information & photos
  • Amazon

Home page

• Banner Image & The wilde stroy paragraph Oscar Wilde illustrated

• Stroy image Pinterest

• Book shelf with lights

  • Unsplash Janko Ferlič

• Oscar Wild sketched

  • Unsplash Europeana

• Oscar Wilde Statue & Oscar Wilde with cane -Wikipedia

About us page (Banner image)

• Unsplash Tabitha Turner

Contact us page (Banner image)

• Unsplash Mathyas Kurmann

Collections page (Banner image)

• Unsplash Paul Melki

Plays page (Banner image)

• Unsplash Miro Polca

Stories page (Banner image)

• Unsplash Patrick Tomasso

Acknowledgements

• A big thank you to my brother Cian, he help to resolve some issues I have & provided feedback from my project.

🔝 Back to Top