Blok-Tech4-Team-2

Quinesha, Jop, Mila, Arron, Thije

Concept

Om al onze onderdelen bij elkaar toevoegen hebben wij bedacht om een app te maken waar de gebruiker kan inloggen en zijn voorkeuren kan kiezen. Daaruit komen zijn matches te zien en kan de gebruiker producten gaan bestellen.

We hebben ook een admin side: De admin moet inloggen en kan verschillende producten toevoegen aan de lijst.

De producten: Dieren: De gebruiker kan kiezen wat zijn voorkeuren is bijvoorbeeld een actief of rustig dier etc. en daaruit kan je filteren.

Features

• Inloggen + Registreren
• Informatie + Voorkeuren aangeven
• Jouw matches + filteren
• Afspraken maken
• Liken/opslaan + verwijderen

De admin:

• Inloggen
• Overview pagina
• Dieren toevoegen/verwijderen
• Dieren wijzigen

Interesses/producten:

• activiteit = Actieve dieren - Rustige dieren
• leefstijl = Binnen dieren - Buiten dieren - beiden
• grootte = Grote dieren - Kleine dieren - Middel
• dag = Nacht dieren - Dag dieren

Tools

• Node.js
• nodemon
• Express/Express-Handlebars
• SCSS
• CSS
• JavaScript
• MongoDB/Mongoose
• Adobe XD
• bcrypt
• ESLint
• Gulp
• npm

Target Audience

Onze applicatie is gericht op kieskeurige mensen die opzoek zijn naar een nieuw huisdier dat perfect aansluit hun leefstijl. Deze mensen kunnen via onze site een huisdier vinden dat matched met hun wensen.

Installation

1. Clone the repository:

   git clone https://github.com/JopMolenaar/Blok-Tech4-Team-2.git
   

2. Navigate to the project directory:

   cd myApp
   

3. Install the dependencies:

   npm install
   

4. Start the application:

   npm start
   

   The application will be accessible at http://localhost:3000.

Contributing

Please ensure that your contributions adhere to the MIT License.

License

Dierenshop is open-source and released under the MIT License.

Sources

This is a list of sources I used formatted in APA style:

• Stack Overflow. (n.d.). Retrieved from https://stackoverflow.com/

• OpenAI. (2021). ChatGPT (Version GPT-3.5) [Computer software]. Retrieved from https://chat.openai.com/

• Autoprefixer. (2023, June 12). Autoprefixer. GitHub. https://autoprefixer.github.io

• TinyPNG. (n.d.). Retrieved from https://tinypng.com/

• TinyJPG. (n.d.). Retrieved from https://tinyjpg.com/

• Freepik. (n.d.). Cats paws set in flat style. Retrieved from https://www.freepik.com/free-vector/cats-paws-set-flat-style_13153666.htm#page=2&query=pet%20pattern&position=4&from_view=search&track=ais

• ImageOptim. (n.d.). How to use ImageOptim. Retrieved from https://imageoptim.com/howto.html

• UglifyJS. (n.d.). Retrieved from https://www.npmjs.com/package/uglify-js

• Mozilla. (n.d.). Lazy loading. Retrieved from https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

• Mozilla. (n.d.). Intersection Observer API. Retrieved from https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

• Passport. (n.d.). Retrieved from https://www.passportjs.org/

• YouTube. (2020, July, 6). JavaScript Modules Tutorial: What are JavaScript Modules? [Video]. YouTube. Retrieved from https://youtu.be/uA1VO_E8tXM

• YouTube. (2019, July, 13). Google Sign-In with JavaScript [Video]. YouTube. Retrieved from https://www.youtube.com/watch?v=-RCnNyD0L-s&t=599s

• Google Developers. (n.d.). Using OAuth 2.0 to Access Google APIs. Retrieved from https://developers.google.com/identity/protocols/oauth2

• CSS. (z.d.). https://parceljs.org/languages/css/#:~:text=Parcel%20includes%20equivalents%20of%20autoprefixer,not%20need%20PostCSS%20at%20all.

• Kanevsky, A. (2016). Gulp: A Web Developer’s Secret Weapon for Maximizing Site Speed.

• Toptal Engineering Blog. https://www.toptal.com/javascript/optimize-js-and-css-with-gulp

• Bundling CSS with webpack Loaders. (z.d.). https://www.learnhowtoprogram.com/intermediate-javascript/test-driven-development-and-environments-with-javascript/bundling-css-with-webpack-loaders#:~:text=The%20loaders%20will%20actually%20transform,so%20webpack%20can%20bundle%20it.

• Gulp. (2022, August 14). DEV Community. https://dev.to/t/gulp

• Traversy Media. (2017, November 15). Intro To JavaScript Unit Testing With Mocha JS & ChaiVideo]. YouTube. https://www.youtube.com/watch?v=MLTRHc5dk6s

• MammothInteractive. (2018, September 17).Simple Node.js Unit Testing with Mocha [Video]. YouTube. https://www.youtube.com/watch?v=xDI2KK2gSgQ

• Stack Overflow. (2016, January 2).

• Stack Overflow. (2016, January 2). What are the differences between Grunt, Gulp.js, and Bower? Why/when to use them? https://stackoverflow.com/questions/34287542/what-are-the-differences-between-grunt-gulp-js-and-bower-why-when-to-use-them

• Matskas, C. (2017, January 2). Setting up a Gulp task with Visual Studio Code. cmatskas. https://cmatskas.com/setting-up-a-gulp-task-with-visual-studio-code/#:~:text=Open%20the%20Node.,This%20command%20installs%20Gulp%20globally.

• KeyCDN. (2017, February 28). Gulp vs Grunt: What's the difference and which is better? https://www.keycdn.com/blog/gulp-vs-grunt#:~:text=Gulp%20vs%20Grunt%3A%20Speed&text=The%20reason%20for%20Gulp's%20current,one%20task%20at%20a%20time.

• freeCodeCamp.org. (2017, February 28). Simple Node.js Unit Testing with Mocha. YouTube. https://www.youtube.com/watch?v=LYbt50dhTko

• Gulp.js. (n.d.). Gulp.js. https://gulpjs.com/

Acknowledgments

• Mila Bigini
• Arron Robinson
• Jop Molenaar
• Quinesha van Burgh
• Thije Wind