ReadEar 📚

ReadEar is a school project I made, allowing blind people to "read" again. The project is focused on one user (exclusive design) called Roger Ravelli. He used to work as a renewable energy specialist, but he's slowly becoming blind and will need to use a screenreader. He likes to read and he's currently a member of a book group.

Click here for the live demo

Table of Contents 🧭

Goal 💪🏻

The goal of ReadEar is to provide it's users with an accessible interface, so they can easily listen to mp3 files. By creating this project im hoping to learn how to make the web a more accessible place!

Getting started ✨

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Technical requirements

To run this project you'll need Git, Nodejs and any code editor

📥 Installing

1. Clone this repository 👯

Before we can get started, we'll need to clone this repository. We can do this by typing the following line of code in the terminal:

git clone https://github.com/InjuMichorius/ReadEar.git

2. Install the packages 💻

First we need to install the used NPM packages.

npm install

3. Start developer environment 🎬

Now we can run our application, by running the following line of code in your terminal:

npm run dev

4. Navigate to localhost 🌐

Congratulations! If everything works, you should be able to see the application running in your browser. Please note that the port won't always be the same number.

http://localhost:3000

Feature wishlist / backlog 👑

Below is a list of features I'd love to add to this application. The features are split up using the MoSCoW method.

M - Must haves These features are requirements for the end product

Overview page with avaible books
Possibilty to change pages

S - Should haves These features are wanted, but not necessary for a usable product

Accessible styling
Easy audio controls

C - Could haves These features can be added if there is enough time to do so

Database that stores all mp3 files

W - Would haves These features can be added in the future

Easy way for firends to upload mp3 files

Design patterns and Best Practices 👩🏻‍💻

Code standards are important when working on any project; your code stays consistent and is readable for everyone. I defined code standards for HTML, CSS and JS while working on this project.

Javascript code standards

Variables & functions are written in camelCase
Promises are handled with async functions using await
I don't use var, only const or let
I put spaces around operators ( = + - * / ) and after commas (exception for for loops)
I use indentation with TAB
I always end a statement with a semi-colon;
Functions have their opening bracket on the same line as the name, with 1 space in between
I use ES6 syntax where possible

CSS code standards

I try to avoid !important as much as possible
Layout/general styling is always above more specific styling
Selectors are not unnecessary long nor short
I use CSS3 syntax where possible
I avoid old display properties like float
CSS Selectors must have a space between the name and bracket

HTML code standards

I only use IDs when the element is present once on a page and it's necessary for styling or Javascript
I always write semantic HTML according to W3C Validator
Divs are only used when necessary for styling purposes
Classes allow easy re-usage
Indentation is always clear

Packages used 📦

Express - Used to setup the server
Body-parser - Used to refer to html elements
Ejs - Used for templating
Nodemon - Used for auto refreshing the server

InjuMichorius/ReadEar