This repository contains the source code for an audio book application where you can browse through different cards containing short stories with an audio controller. The data is consumed from an API.
Deploy link: https://vfostories.vercel.app/
- Stories catalog: Explore a list of story cards with audio controller, so you can read as you listen to the narrator.
- Rich visual aspects with the addition of Parallax JS plugin, for an engaging application.
- Data consumed from an API that will be mapped and listed for the user.
- Simple and efficient audio controller with play/pause button and an interactive progress bar.
- Implementation of Gulp JS for the images minification, Sass compilation and CSS compression, plus the addition of Gulp Uglify to reduce the size of the JavaScript file and help with the performance. Features that will reduce the loading time and enhance the performance of the app.
- HTML
- JavaScript
- Sass
- Gulp JS (imagemin, gulp-sass, uglify)
- Parallax JS
- Clone the repository
git clone https://github.com/oliveira-victor/VFO_stories.git
- Navigate to the project directory
cd VFO_stories
- Install dependencies
npm install
- Start Gulp JS to run imagemin, gulp-sass and gulp-uglify functions whenever there's change
npm run gulp
- You can start gulp-watch to keep track of any saved changes related to JavaScript and Scss files, and process the files on the run
npm run gulp watch
- Open your browser: Navigate to http://127.0.0.1:5500/ or simply start Live Server VS Code plugin
Keep the source files you're working on in the /src folder. Gulp will search for the files in the following folders:
- Image files: src/images (and any folders inside)
- Scss files: src/styles
- JavaScript files: src/scripts
Gulp will compile Sass and compress images, JavaScript and CSS files and save them into /dist folder every time you run the 4th step of installation. If you run gulp-watch, make sure you run 'npm run gulp' manually every time a new image file is included in the src/images folder of the project, so it will be compressed and saved into the destination folder.
- Fork the project
- Create a new branch
- Make your changes
- Submit a pull request
This project is licensed under the MIT License. See the LICENSE file for details.